我正在创建一个搜索表单,它有两个元素一个输入字段和一个按钮。输入字段没有与其关联的标签。
为了使字段更容易访问,我可以添加<label for="searchfield">Search</label>
并在视觉上隐藏它,以便屏幕阅读器可以访问它。
我还可以将aria-label="search"
添加到输入字段中,并使输入字段不带标签。
我在mac上用“voice-over”进行了测试,得到了相同的结果/输出。我的问题是这些方法是等价的吗?或者一种方法比另一种更好?
这是一个pen。
最佳答案
在不了解站点的情况下(如何标记其他表单字段?)或者观众(他们的技术水平或技术简介是什么?),我用几个参数来处理这些问题:
咏叹调的规则(这里可以应用first rule)
渐进增强
也就是说,我经常编写一个没有aria和css的页面(因为它可能会被阻塞、分块等),并确保它是可访问的。
这意味着我编码a<label>
。然后我把它藏起来。如果css坏了,一切都还不错。如果用户的屏幕阅读器不支持aria,那么一切仍然正常。另外,如果您认为所有用户的屏幕阅读器都支持aria,我建议您对用户进行技术评估(在没有真正用户的情况下,本地盲人协会是一个良好的开端)。许多人仍然运行旧版本的浏览器和srs。
对于有视力的用户,我确保依赖上下文线索,比如按钮中的一个清晰的搜索图标(或单词)(作为unor引用)。或者使用带有适当对比度的placeholder
(尽管您可以使用<label>
作为视觉占位符,使用一些css技巧将其隐藏在焦点上)。
如果submit按钮使用svg,那么考虑到svg可选文本方法前后不一致的支持,我将把aria折叠成svg。
fwiw,我也不是title
属性的粉丝,部分原因是不一致的可访问名称计算,部分原因是我认为它看起来像meh。
所以,回答你的问题:
我的问题是这些方法是等价的吗?
不,但他们之间的距离在缩小。
或者一种方法比另一种更好?
这取决于我们没有的背景。