对屏幕阅读器的支持<legend>
一直参差不齐,要针对一项辅助技术(例如讲述人)而不影响其他应用程序(例如 NVDA 和 JAWS),即使不是不可能,也是非常困难的。
但是,您可以尝试通过在legend
元素内插入视觉上隐藏的文本来更明确地传达元素的上下文label
。这将为不可见的盲人用户补充额外的信息。技术包括将内容定位在屏幕外或使用 CSS clip-path。
<fieldset>
<legend>Billing Address:</legend>
<div>
<label for="billing_name">
<span class="visuallyhidden">Billing </span>Name:
</label><br>
<input type="text" name="billing_name" id="billing_name">
</div>
<div>
<label for="billing_street">Street:</label><br>
<input type="text" name="billing_street" id="billing_street">
</div>
[…]
</fieldset>
另请注意,不同的屏幕阅读器有时会以不协调的方式表现。让他们表现得完全一样不是不可能的,所以我们必须“分裂差异”并尝试为所有人做出合理的调整,即使它并非在每种情况下都是完美的。
根据配置,一些屏幕阅读器会读出每个表单元素的图例,一次,或者很少,根本不读出。为了适应这种情况,请考虑以下事项:
- 对于每次与标签一起阅读的情况,使图例尽可能短。
- 对于没有大声朗读图例的情况,使各个标签足够不言自明,而无需在每个标签中重复该图例。
https://www.w3.org/WAI/tutorials/forms/grouping/