我应该使用 arial-label 还是视觉上隐藏的标签元素

Question

我正在创建一个搜索表单，其中包含两个元素：输入字段和按钮。输入字段没有与之关联的标签。

为了使该字段更易于访问，我可以添加<label for="searchfield">Search</label>并在视觉上隐藏它，以便屏幕阅读器可以访问它。

我还可以添加aria-label="search"到输入字段并保留输入字段不带标签。

我在 Mac 上使用“Voice Over”进行了测试，得到了相同的结果/输出。我的问题是这些方法等效吗？或者一种方法比另一种更好？

这是一支笔。

Answer 1

在不了解网站（其他表单字段如何标记？）或受众（他们的技能水平或技术概况是什么？）的情况下，我用几个参数来处理这些问题：

1. ARIA 规则（此处可能适用第一条规则）
2. 渐进增强

话虽这么说，我经常在没有 ARIA 和 CSS 的情况下编写页面（因为这可能会被阻止、分块等），并确保它是可访问的。

这意味着我编写了一个<label>. 然后我在视觉上隐藏它。如果 CSS 坏了，一切都还好。如果用户的屏幕阅读器不支持 ARIA，一切仍然正常。顺便说一句，如果您认为用户的所有屏幕阅读器都支持 ARIA，我鼓励您对用户进行技术评估（在没有任何真实用户的情况下，本地盲目关联是一个好的开始）。许多人仍在运行旧版本的浏览器和 SR。

对于视力正常的用户，我确保依靠上下文线索，例如按钮中清晰的搜索图标（或单词）（作为 Unor 引用）。或者可能placeholder具有适当的对比度（尽管您可以将 用作<label>视觉占位符，并通过一些 CSS 技巧将其隐藏在焦点上）。

如果您的提交按钮使用 SVG，那么考虑到 SVG 替代文本方法的支持不一致，我会将 ARIA 折叠到其中。

FWIW，我也不喜欢该title属性，部分原因是可访问名称计算不一致，部分原因是我认为它看起来很无聊。

所以，回答你的问题：

我的问题是这些方法等效吗？

不，但他们之间的距离正在缩小。

或者一种方法比另一种更好？

这取决于我们没有的背景。