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

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

为了使该字段更易于访问，我可以添加

搜索

并将其可视化隐藏，以便屏幕阅读器可以访问该字段

我还可以将

aria label=“search”

添加到输入字段，并使输入字段不带标签

我在Mac上用“画外音”进行了测试，得到了相同的结果/输出。我的问题是，这些方法是否等效？还是一种方法比另一种更好

---

这里有一个。

我认为

aria label=“search”

是正确的方法，因为它可以生成更清晰的标记（即没有不必要的

标签

标记），并且不需要CSS设置标签的可见性，如中所示

我相信使用CSS可视化地隐藏

标签是解决问题的一种有点“黑”的方法，而ARIA是可访问标记的标准，因此在这种情况下，它应该是显而易见的选择

另一方面，确保您打算支持的所有浏览器都能正确使用ARIA是值得的，如果不能，则可能需要使用
标签
方法来确保所有浏览器之间的兼容性。尽管如此，我认为这些天的支持非常好，所以这不应该是一个常见的场景。
使用
aria-label
比依靠CSS在视觉上隐藏
标签
元素更可取

（相关技术：）

但是请注意，对于只包含搜索字段和提交按钮的搜索表单。假设您使用了一个标记为“搜索”的按钮，它已经清楚地说明了文本字段的用途

（相关技术：）

在这种情况下，虽然它不需要标签，但仍然应该有一个名称。提供名称的一种方法是使用
input
元素上的
title
属性。这项技术在中显示了这一点（一个没有标签的搜索表单，在
输入
上有
标题
属性）。
在不了解网站（其他表单字段如何标记？）或受众（他们的技能水平或技术概况是什么？）的情况下，我用两个参数来处理这些问题：

ARIA规则（此处可能适用）
渐进增强
也就是说，我经常编写一个没有ARIA和CSS的页面（因为这可能会被阻塞、分块等），并确保它是可访问的

这意味着我要编写一个
。然后我把它藏起来。如果CSS崩溃，一切仍然正常。如果用户的屏幕阅读器不支持ARIA，那么一切仍然正常。另一方面，如果您认为您的用户的所有屏幕阅读器都支持ARIA，我鼓励您对用户进行技术评估（在没有任何真正用户的情况下，本地盲人协会是一个良好的开端）。许多人仍然运行旧版本的浏览器和SRs

对于有视力的用户，我会确保依赖上下文线索，比如按钮中的清晰搜索图标（或单词）（作为Unor参考）。或者可能是一个具有适当对比度的
占位符
（尽管您可以使用
作为视觉占位符，并使用一些CSS技巧将其隐藏在焦点上）

如果您的submit按钮使用SVG，那么鉴于SVG替代文本方法的支持不一致，我会将ARIA折叠为SVG

FWIW，我也不是
title
属性的粉丝，部分原因是不一致的可访问名称计算，部分原因是我认为它看起来像meh

因此，要回答您的问题：

我的问题是，这些方法是否等效

没有，但他们之间的距离正在缩小

还是一种方法比另一种更好

这取决于我们没有的上下文。
一如既往，我鼓励同时使用
title
和
aria标签
，以获得更好的兼容性（
aria-label
只有辅助技术才能理解，而
title
属性在标准浏览器上提供了一个可视化的工具提示，当提交按钮还不可见时，这可能很有用，例如使用屏幕放大镜）OP对网站的用户没有任何上下文，OP没有为网站的用户提供上下文，而在一个真空毯中，建议和说明书可能会引起问题。至于标题>代码>，我认为默认为“否”。无论如何，更多关于“代码>标题<代码>的信息：@ AARDRIAN，我没有在广告上做广告。ole使用了
title
属性，但每次使用
aria标签时都建议使用它。这不是万能药，但有些人喜欢。明白了。同意了。我感觉你看到我在推特。可能有点相关，全新的WebKit
title
/
占位符
名称计算错误：（抱歉，如果我说的太辣了，我知道我在简短的讲话中经常听起来很刺耳。）你已经有两个答案了，但是你能提供一些上下文吗？网站的其他部分是否使用
的形式或
aria标签
？你知道用户的技术概况吗？或者用户的技术水平？这些都会影响你的方法。@aardrian网站的其他表单字段使用
而从不
aria-标签
。我无法回答您的其他问题。您所说的“用户技术水平”是什么意思？如果你的目标用户技术水平较低，而且通常是低端或老式设备，那么你的编码方式会发生变化。例如，我父母的技能水平与我大不相同，他们不知道你不需要双击链接（粗略的例子，是的）谢谢你的详细回答。我完全控制了标记，所以“咏叹调的第一条规则”为我解决了这个问题。