代码之家  ›  专栏  ›  技术社区  ›  Johnson

而不是按钮

  •  11
  • Johnson  · 技术社区  · 7 年前

    我使用NVDA程序测试我的网站,并使所有人都可以访问网站。最近,我在MDN Web文档上看到一个属性,允许我使用 a 而不是 button . 它是 role="button" .

    MDN和Bootstrap 4文档说:

    应该为这些链接指定一个role=“button”,以便将其目的适当地传达给屏幕阅读器等辅助技术。

    <a class="btn btn-primary" href="#"> Anchor without ROLE </a>
    <a class="btn btn-primary" href="#" role="button"> Anchor with ROLE </a>
    <button class="btn btn-primary" type="button"> Just a Button </button>
    

    我尝试使用NVDA,然后按 B (在网站中查找按钮的快捷方式),找到的唯一按钮是 <button> 标签什么 role=“按钮” 是否正在使用?正确的方法是什么?

    裁判: Bootstrap V4 MDN Docs

    1 回复  |  直到 3 年前
        1
  •  15
  •   Adam    7 年前

    我尝试使用NVDA,然后按B(在网站中查找按钮的快捷方式),它找到的唯一按钮是带标签的按钮。正在使用哪个角色=“按钮”?正确的方法是什么?

    ARIA角色的浏览器支持和行为可能因浏览器/屏幕阅读器的组合而异。

    您应该使用本机 <button> 要素

    记住ARIA的第一条和第二条规则:

    第一条规则:

    如果你 可以 使用具有所需语义和行为的本机HTML元素或属性 已内置 ,而不是改变元素的用途并添加ARIA角色、状态或属性以使其可访问, 那么就这样做 .

    第二条规则:

    不要更改本机语义,除非您真的必须这样做。