如果一个 HTML 元素有 role="button" 它也应该有属性 "name"

alf*_*ndo 0 html accessibility wai-aria

如果 HTML5<div>元素需要一个role="button"属性来确保可访问性审核中的成功结果(成功标准 4.1.2 [名称、角色、值]..div 在 UI 中充当按钮),那么它是否还需要一个有效的name属性(通常对于 a 来说是无效的 HTML5 div)。

如果答案是否定的 - 我可以添加哪些其他可访问性友好属性来描述 div 按钮并满足标准?一个简单的title属性或aria-label?

aar*_*ian 5

name属性不存在<div>且无法添加。

您需要aria-label提供一个可访问的名称。

但是,如果您只是想获得 SC 4.1.2 的通行证,那么您可能以错误的方式进行了处理。事实上,如果您无法aria-label在屏幕阅读器中测试以确认它以您想要的方式工作,那么您就是在编写清单,而不是真正帮助用户。

如果是这种情况,那么您可能应该放弃您的工作<div role="button">,而是从最正确的工作要素开始。

一个好的经验法则是永远不要让自己处于更改元素默认语义的情况(通过role)。

已经有三个元素可以先做你想做的。在您的问题没有上下文的情况下,一些关于何时使用 an<a href>与 a <button>or 的一般提示<input type="submit">

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

我警告不要更改具有该role属性的元素的默认角色,因为这最终会导致一些混乱,并可能与某些辅助技术发生冲突。这些也违反了ARIA 使用的第一条第二条规则。

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

<a href>按回车键可以触发超链接 ( )。但是<button>可以通过按回车键或空格键来触发true 。当超链接获得焦点并且用户按下空格键时,页面将滚动一屏。某些辅助技术的用户将期望基于所使用元素的行为。

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

因此,使用上面的列表从任务的正确元素开始,然后将其设置为您想要的样式。