我可以让标题用作按钮但不使用按钮的角色吗?

Question

我有一个标题，我想把它当作一个按钮。我的问题是，如果我为标题分配一个按钮角色，它会弄乱 accebability 和屏幕阅读器;按钮角色将覆盖标头，因此盲人用户无法像使用其他标头那样导航到标头。

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

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

关于如何让标题用作按钮但不使用按钮角色的任何想法？

Answer 1

这有什么问题？使用真实的<button>简化每个人的生活：

<h2 class="navigation_title">
    <button class="navigation_title_text">
        Foo
    </button>
</h2>
<script>
    $('.navigation_title_text').click(function () {
        ...
    });
</script>

Answer 2

我解释这个问题是为了将一些脚本化事件分配给标题元素，因此除了默认的heading角色之外，您还希望为其分配button角色。这是为了提高可访问性，以便将元素视为标题，例如在"标题阅读模式"中，以及作为按钮，例如，辅助软件可以通知用户可以激活的按钮。

根据 WAI ARIA 规范，role 属性允许使用空格分隔的角色标识符列表作为其值，但仅使用第一个。因此，设置role="heading button"，虽然正式允许(HTML5验证器有一个将其报告为错误的错误(，但被视为与role="heading"相同。这意味着一个元素实例只能有一个角色。

(此外，W3C HTML5 Rec 定义了h2，因此唯一允许的角色是 heading、tab 和 presentation。

您可以将span包装在h2元素中(如问题中(或h2包装在div中，并声明要button的span或div元素的角色。但是，在WAI术语中，这使一个元素成为标题，另一个元素成为按钮。不能为单个元素分配两个角色的情况反映了实现：不能期望它们以两种方式处理同一元素。

从更一般的可访问性的角度来看，考虑到认知问题，这是合理的：即使你可以让一个元素同时充当标题和按钮(从技术上讲，你可以，在一定程度上，但不是在WAI意义上(，用户也会有认知挑战。当他们遇到像标题一样走路，像标题一样说话的东西时，他们不会期望它也是一个按钮。

鉴于描述的抽象性，不可能提出其他方法。但解决方案可能包括在每个标题之后(可能在同一行上(包含一个带有简短文本的按钮。

Answer 3

<h2 class="navigation_title" tabindex="0">
     <span onclick="myFunction()" class="navigation_title_text" tabindex="-1">
</span></h2>

通过使用 onclick 属性，可以使此元素可单击。我的函数可以是你喜欢的任何东西