Html 我可以将标题用作按钮，但不使用按钮的角色吗

我有一个标题，我想作为一个按钮工作。我的问题是，如果我给标题分配了一个按钮角色，它会影响可访问性和屏幕阅读器；按钮角色覆盖标题，因此盲人用户无法像使用其他标题一样导航到标题

我希望用户能够导航到标题并像按钮一样按下它（使用空格键）。我一直在尝试将一个按钮嵌套到带有更改的选项卡索引的标题中，但它不起作用

<h2 class="navigation_title" tabindex="0">
     <span role="button" class="navigation_title_text" tabindex="-1">
</span></h2>

---

关于如何让标题作为按钮而不使用按钮的角色，有什么想法吗？

我解释了这个问题，这样您就为标题元素分配了一些脚本事件，因此除了默认的

标题

角色之外，您还希望为其分配

按钮

角色。这是为了提高可访问性，以便将元素视为标题（例如在“标题阅读模式”中）和按钮（例如，使辅助软件可以通知用户可以激活的按钮）

根据WAI ARIA规范，允许以空格分隔的角色标识符列表作为其值，但只使用第一个。因此，设置

role=“heading”按钮“

，虽然正式允许（HTML5验证程序有一个将其报告为错误的消息），但被视为与

role=“heading”

相同。这意味着一个元素实例只能有一个角色

（此外，W3C HTML5 Rec定义了唯一允许的角色是

标题

、

选项卡

、和

演示

）

您可以像问题中那样将

span

封装在

h2

元素中，或将

h2

封装在

div

中，并将

span

或

div

元素的角色声明为

按钮。然而，这使得一个元素成为标题，另一个元素成为按钮。不能将单个元素分配给两个角色的情况反映了实现：不能期望它们以两种方式处理同一元素

从更普遍的可访问性角度来看，考虑到认知问题，这是合理的：即使您可以让元素同时充当标题和按钮（在某种程度上，您可以做到，但在WAI意义上不能做到），用户也会面临认知挑战。当他们遇到像航向一样走路，像航向一样说话的东西时，他们不会期望它也会被按下

鉴于描述的抽象性，不可能提出其他方法。但解决方案可能只是在每个标题后面（可能在同一行）有一个带有短文本的按钮。


通过使用onclick属性，可以使此元素可单击
我的函数可以是您喜欢的任何函数
这有什么问题吗？通过使用真正的
，简化每个人的生活：


福
$（'.navigation\u title\u text'）。单击（函数（）{
...
});
您研究过javascripts
onclick
函数吗？你是如何实现的？如何使标题充当按钮，以及它的作用是什么？这在键盘上不起作用（为此，您必须手动连接键事件处理程序）。屏幕阅读器需要
角色
属性。明智的做法是只使用真正的
元素。
<h2 class="navigation_title" tabindex="0">
     <span onclick="myFunction()" class="navigation_title_text" tabindex="-1">
</span></h2>

<h2 class="navigation_title">
    <button class="navigation_title_text">
        Foo
    </button>
</h2>

<script>
    $('.navigation_title_text').click(function () {
        ...
    });
</script>