我应该使用 aria-label 还是视觉上隐藏的标签元素
Should I use arial-label or a label element that is visually hidden
我正在创建一个搜索表单，其中包含输入字段和按钮两个元素。输入字段没有与之关联的标签。
为了使该字段更易于访问，我可以添加 <label for="searchfield">Search</label> 并在视觉上隐藏它，例如屏幕阅读器可以访问。
我还可以将 aria-label="search" 添加到输入字段并让输入字段不带标签。
我已经在 Mac 上使用 "Voice Over" 进行了测试，我得到了相同的 result/output。我的问题是这些方法是否等效？还是一种方法比另一种更好？
这里是pen.
我相信 aria-label="search" 是正确的方法，因为它会产生更清晰的标记（即没有不必要的 label 标签）并且不需要 CSS 来设置标签的可见性 -就像 this example.
我认为使用 CSS 在视觉上隐藏 label 是解决问题的一种 'hacky' 方法，而 ARIA 是可访问标记的标准，因此它应该是显而易见的这种情况的选择。
另一方面，确保您打算支持的所有浏览器都能正确使用 ARIA 是值得的，如果不能，则可能值得使用 label 方法来确保所有浏览器的兼容性。不过，我觉得这几天的支持还是不错的，所以应该不会出现这种情况。
使用 aria-label 优于依赖 CSS 来视觉隐藏 label 元素。
（相关技术：Using aria-label to provide an invisible label where a visible label cannot be used）
但请注意 you don’t have to provide a label 对于仅包含搜索字段和提交按钮的搜索表单。假设您使用标有 "Search" 之类的按钮，它已经明确了文本字段的用途。
（相关技术：Using an adjacent button to label the purpose of a field）
在那种情况下，虽然它不需要 label，但它仍应获得 name。提供名称的一种方法是在 input 元素上使用 title 属性。技巧 Using the title attribute to identify form controls when the label element cannot be used shows this (a search form without label, with title attribute on input) in example 3.
在不了解网站（其他表单字段如何标记？）或受众（他们的技能水平或技术概况如何？）的情况下，我用几个参数来处理这些问题：
- ARIA 规则（first rule 可能适用于此处）
- 渐进增强
也就是说，我经常在没有 ARIA 和 CSS 的情况下编写页面（因为这可能会被阻塞、分块等）并确保它可以访问。
这意味着我编码了 <label>。然后我在视觉上隐藏它。如果 CSS 坏了，一切都还好。如果用户的屏幕 reader 不支持 ARIA，一切都很好。顺便说一句，如果您认为您的用户的所有屏幕 reader 都支持 ARIA，我鼓励您对用户进行技术评估（在没有任何真实用户的情况下，本地盲人协会是一个好的开始）。许多人仍然 运行 旧版本的浏览器和 SR。
对于有视力的用户，我确保我依靠上下文线索，比如按钮中清晰的搜索图标（或单词）（作为 Unor 参考）。或者也许 placeholder 具有适当的对比度（尽管您可以使用 <label> 作为视觉占位符并使用一些 CSS 技巧将其隐藏在焦点上）。
如果您的提交按钮使用 SVG，那么考虑到对 SVG 替代文本方法的不一致支持，我会将 ARIA 折叠到其中。
FWIW，我也不喜欢 title 属性，部分原因是可访问名称计算不一致，部分原因是我认为它看起来很无聊。
所以，回答你的问题：
My question is are these approaches equivalent?
没有，但他们之间的距离正在缩小。
Or is one approach better than the other one?
这取决于我们没有的上下文。
我正在创建一个搜索表单，其中包含输入字段和按钮两个元素。输入字段没有与之关联的标签。
为了使该字段更易于访问，我可以添加 <label for="searchfield">Search</label> 并在视觉上隐藏它，例如屏幕阅读器可以访问。
我还可以将 aria-label="search" 添加到输入字段并让输入字段不带标签。
我已经在 Mac 上使用 "Voice Over" 进行了测试，我得到了相同的 result/output。我的问题是这些方法是否等效？还是一种方法比另一种更好？
这里是pen.
我相信 aria-label="search" 是正确的方法，因为它会产生更清晰的标记（即没有不必要的 label 标签）并且不需要 CSS 来设置标签的可见性 -就像 this example.
我认为使用 CSS 在视觉上隐藏 label 是解决问题的一种 'hacky' 方法，而 ARIA 是可访问标记的标准，因此它应该是显而易见的这种情况的选择。
另一方面，确保您打算支持的所有浏览器都能正确使用 ARIA 是值得的，如果不能，则可能值得使用 label 方法来确保所有浏览器的兼容性。不过，我觉得这几天的支持还是不错的，所以应该不会出现这种情况。
使用 aria-label 优于依赖 CSS 来视觉隐藏 label 元素。
（相关技术：Using aria-label to provide an invisible label where a visible label cannot be used）
但请注意 you don’t have to provide a label 对于仅包含搜索字段和提交按钮的搜索表单。假设您使用标有 "Search" 之类的按钮，它已经明确了文本字段的用途。
（相关技术：Using an adjacent button to label the purpose of a field）
在那种情况下，虽然它不需要 label，但它仍应获得 name。提供名称的一种方法是在 input 元素上使用 title 属性。技巧 Using the title attribute to identify form controls when the label element cannot be used shows this (a search form without label, with title attribute on input) in example 3.
在不了解网站（其他表单字段如何标记？）或受众（他们的技能水平或技术概况如何？）的情况下，我用几个参数来处理这些问题：
- ARIA 规则（first rule 可能适用于此处）
- 渐进增强
也就是说，我经常在没有 ARIA 和 CSS 的情况下编写页面（因为这可能会被阻塞、分块等）并确保它可以访问。
这意味着我编码了 <label>。然后我在视觉上隐藏它。如果 CSS 坏了，一切都还好。如果用户的屏幕 reader 不支持 ARIA，一切都很好。顺便说一句，如果您认为您的用户的所有屏幕 reader 都支持 ARIA，我鼓励您对用户进行技术评估（在没有任何真实用户的情况下，本地盲人协会是一个好的开始）。许多人仍然 运行 旧版本的浏览器和 SR。
对于有视力的用户，我确保我依靠上下文线索，比如按钮中清晰的搜索图标（或单词）（作为 Unor 参考）。或者也许 placeholder 具有适当的对比度（尽管您可以使用 <label> 作为视觉占位符并使用一些 CSS 技巧将其隐藏在焦点上）。
如果您的提交按钮使用 SVG，那么考虑到对 SVG 替代文本方法的不一致支持，我会将 ARIA 折叠到其中。
FWIW，我也不喜欢 title 属性，部分原因是可访问名称计算不一致，部分原因是我认为它看起来很无聊。
所以，回答你的问题：
My question is are these approaches equivalent?
没有，但他们之间的距离正在缩小。
Or is one approach better than the other one?
这取决于我们没有的上下文。