Question

我有一个标题，我想用作按钮。我的问题是，如果我将标题指定为按钮角色，它会与可加性和屏幕阅读器混淆;按钮角色会覆盖标题，因此盲人用户无法像使用其他标题一样导航到标题。

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

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

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

Answer 1

我解释了这个问题，因此您已将一些脚本事件分配给标题元素，因此除了默认的button角色之外，您还希望为其分配heading角色。这意味着改善可访问性，以便将元素作为标题处理，例如，在“标题阅读模式”中，以及作为按钮，例如这样辅助软件就可以通知用户一个可以激活的按钮。

根据WAI ARIA规范，role attribute允许以空格分隔的角色标识符列表作为其值，但仅使用第一个。因此，在正式允许的情况下设置role="heading button"（HTML5验证程序将bug报告为错误），与role="heading"相同。这意味着您只能为元素实例添加一个角色。

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

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

从更一般的可访问性角度来看，考虑到认知问题，这是合理的：即使你可以使一个元素既作为标题又作为按钮（从技术上讲，可以达到某一点，但不是在WAI意义上），用户将面临认知挑战。当他们遇到像标题一样走路的东西时，会像标题一样说话，他们也不会指望它按下按钮。

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

Answer 2

这有什么问题？使用真实<button>：

简化每个人的生活

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

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

Answer 3

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

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

我可以将标题作为按钮使用但不使用按钮的作用

3 个答案: