我正在创建一个搜索表单，其中包含两个元素：输入字段和按钮。输入字段没有与之关联的标签。
为了使该字段更易于访问，我可以添加<label for="searchfield">Search</label>并在视觉上隐藏它，以便它可以例如可以访问屏幕阅读器。
我还可以将aria-label="search"添加到输入字段，并使输入字段不带标签。
我已经在Mac上使用“Voice Over”进行了测试，我获得了相同的结果/输出。我的问题是这些方法是否相同？或者一种方法比另一种更好？
这是pen。
答案 0 :(得分：2)
使用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表示搜索表单只包含搜索字段和提交按钮。假设您使用标记为＆＃34; Search＆＃34;之类的按钮，它已经明确了文本字段的用途。
（相关技术：Using an adjacent button to label the purpose of a field）
在这种情况下，虽然它不需要标签，但仍应获得名称。提供名称的一种方法是使用title元素上的input属性。技术Using the title attribute to identify form controls when the label element cannot be used在example 3中显示了这一点（title上没有标签的搜索表单，input属性）。
答案 1 :(得分：2)
如果没有对网站有任何了解（如何标记其他表单字段？）或受众（他们的技能水平或技术概况是什么？），我会用几个参数来解决这些问题：
话虽这么说，我经常编写一个没有ARIA的页面，没有CSS（因为它可能会被阻塞，分块等），并确保它是可访问的。
这意味着我编码<label>。然后我在视觉上隐藏它。如果CSS坏了，一切都还好。如果用户的屏幕阅读器不支持ARIA，一切都还不错。顺便说一句，如果您认为您的用户的所有屏幕阅读器都支持ARIA，我鼓励您对用户进行技术评估（在没有任何真实用户的情况下，本地盲人协会是一个良好的开端）。许多人仍然运行旧版本的浏览器和SR。
对于有视力的用户，我确保依靠上下文线索，例如按钮中的清晰搜索图标（或单词）（作为Unor引用）。或者可能是具有适当对比度的placeholder（尽管您可以使用<label>作为视觉占位符，并使用一些CSS技巧将其隐藏在焦点上。）
如果您的提交按钮使用SVG，那么考虑到对SVG替代文本方法的不一致支持，我会将ARIA折叠成。
FWIW，我也不是title属性的粉丝，部分原因是因为可访问的名称计算不一致，部分是因为我觉得它看起来很简单。
所以，回答你的问题：
我的问题是这些方法是否相同？
不，但它们之间的距离在缩小。
或者一种方法比另一种更好？
这取决于我们没有的背景。
答案 2 :(得分：1)
我认为aria-label="search"是正确的方法，因为它产生更清晰的标记（即没有不必要的label标记）并且不需要CSS来设置标签的可见性 - 就像在{{3}中一样}。
我认为使用CSS在视觉上隐藏label是解决问题的一种“hacky”方式，而ARIA是可访问标记的标准，因此它应该是这种情况的明显选择。
另一方面，确保您打算支持的所有浏览器都可以正确使用ARIA，如果没有，可能值得使用label方法来确保所有浏览器的兼容性。虽然，我认为这些天的支持非常好，所以这不应该是一种常见的情况。