如果HTML元素具有role =“button”,它还应该具有属性“name”

时间:2016-07-20 09:53:36

标签: html html5 accessibility wai-aria

如果HTML5 <div>元素需要role="button"属性来确保辅助功能审核中的成功结果(成功标准4.1.2 [名称,角色,值] .. div正在充当UI中的按钮),是否还需要有效的name属性(对于div通常是无效的HTML5)。

如果答案是否定的 - 我可以添加哪些其他辅助功能友好属性来描述div按钮并符合条件?一个简单的title属性或aria-label

3 个答案:

答案 0 :(得分:4)

name的{​​{1}}属性不存在,无法添加。

您需要<div>来提供可访问的名称。

然而,如果你只是想在SC 4.1.2上获得一个传递,那么你可能以错误的方式接近它。事实上,如果您无法在屏幕阅读器中测试aria-label以确认它的工作方式符合您的要求,那么您就会编写一份清单而不是真正帮助用户。

如果是这种情况,那么你应该放弃你的aria-label,而是从工作中最正确的元素开始。

一个好的经验法则是永远不要让自己处于改变元素默认语义的情况下(通过<div role="button">)。

已经有三个元素可以做你想要的第一个。如果您的问题没有上下文,那么有关何时使用role<a href><button>的一些一般提示:

  • 如果用户要访问新页面(或页面上的锚点),请使用<input type="submit">spec)。
  • 如果用户正在更改当前页面上的状态,请使用<a href>spec)。
  • 如果用户正在提交表单,请使用<button><input type="submit">spec)。

我提醒不要更改具有<button type="submit">属性的元素的默认角色,因为这最终会导致某些混淆并且可能会对某些辅助技术产生冲突。这些也违反了ARIA使用的firstsecond规则。

考虑键盘体验。如果您所做的只是更改元素的role,那么您还必须提供所有脚本以允许它作为新元素运行。

按Enter键可以触发超链接(role)。但是按下回车键或空格键可以触发真<a href>。当超链接具有焦点并且用户按下空格键时,该页面将滚动一个屏幕。某些辅助技术的用户将期望基于所使用的元素的行为。

我认为值得一提的是,空格键触发的事件仅在释放键时触发,而使用Enter键会在您按下键时(在释放键之前)立即触发事件。

首先使用上面的列表开始使用正确的任务元素,然后根据需要设置样式。

答案 1 :(得分:2)

我认为最初的问题是因为对“WCAG 4.1.2名称,角色,价值”中“名称”的含义有些混淆。

name上的<div>属性确实无效。 name =用于命名对象,以便可以在javascript中引用它。它与可访问性无关。

4.1.2中的“名称”是指屏幕阅读器和其他辅助技术将调用该对象的内容。对于按钮,通常是按钮上显示的文本。对于输入字段,它通常是字段的标签。如果您有<div>,那么正如其他人所指出的那样,aria-label就是您如何“命名”该对象。

当焦点转到对象时,大多数屏幕阅读器将读取对象的名称/标签,角色(按钮,复选框,组合框,表格等),以及对象的值或状态(如果适用)(输入,组合框,复选框状态)。

这三条信息可以通过眼睛快速确定,并基本上为您提供有关对象的所有信息。同样的信息应该出现在辅助技术上。

答案 2 :(得分:1)

无法添加属性name

按钮应始终具有可访问的名称。对于大多数按钮,此名称将与按钮内的文本相同。在某些情况下,例如对于图标按钮,可以通过aria-label或aria-labelledby属性提供可访问的名称。

请在此处查看更多详情:Using Button Role