Question

如何在Mac上制作VoiceOver阅读aria-label（或其他aria-属性），与tabindex没有冲突？

我正在尝试使用类似

的结构向搜索结果页面提供一些辅助功能

    <div class="header">
        <input value="" name="search" type="search"/>
    </div>
    <div class="main">
        <div class="adv-block">
            <a href="#">Link to adv 1</a>
            <a href="#">Link to adv 2</a>
        </div>
        <div class="search-result">
            <a href="#">Search result 1</a>
            <a href="#">Search result 2</a>
        </div>
    </div>

首先，我想要一个带标签导航的用户跳过广告，所以我提供了tabindex for和input，然后是搜索结果，就像这样。

    <div class="header">
        <input value="" name="search" tabindex="1" type="search"/>
    </div>
    <div class="main">
        <div class="adv-block">
            <a href="#">Link to adv 1</a>
            <a href="#">Link to adv 2</a>
        </div>
        <div class="search-result">
            <a href="#" tabindex="2">Search result 1</a>
            <a href="#" tabindex="3">Search result 2</a>
        </div>
    </div>

但是我想帮助屏幕阅读程序（在我的情况下是Mac上的VoiceOver）正确读取区域。因此，我将搜索结果包含在其角色和描述中。

    <div class="header">
        <input value="" name="search" tabindex="1" type="search"/>
    </div>
    <div class="main" role="main" aria-label="Search results">
        <div class="adv-block">
            <a href="#">Link to adv 1</a>
            <a href="#">Link to adv 2</a>
        </div>
        <div class="search-result">
            <a href="#" tabindex="2">Search result 1</a>
            <a href="#" tabindex="3">Search result 2</a>
        </div>
    </div>

问题在于VoiceOver还会根据tabindex进行导航，并从输入直接转到第一个链接。

我试图通过向容器添加tablindex属性来作弊

    <div class="header">
        <input value="" name="search" tabindex="1" type="search"/>
    </div>
    <div class="main" role="main" aria-label="Search results" tabindex="2">
        <div class="adv-block">
            <a href="#">Link to adv 1</a>
            <a href="#">Link to adv 2</a>
        </div>
        <div class="search-result">
            <a href="#" tabindex="3">Search result 1</a>
            <a href="#" tabindex="4">Search result 2</a>
        </div>
    </div>

但是这种情况会改变通常的标签导航。

那么，有没有办法让VoiceOver读取用户进入搜索结果区域？

Answer 1

在尝试强制使用特定导航样式时请务必小心，因为标签不是使用屏幕阅读器导航的唯一（甚至主要）方法。

大多数情况下，屏幕阅读器用户会使用“浏览”导航来阅读内容。在VoiceOver上，这是cntl-alt-right箭头，在Jaws / NVDA中，它只是向下箭头。

浏览模式将浏览所有内容，而不仅仅是表单控件和链接。浏览模式不受tabindex影响。

tabindex的问题在于它超越了默认（代码）顺序，当它与浏览顺序不匹配时可能会非常混乱。当页面中有其他内容时，这一点更加明显，然后您跳过内容块并转到最低的tabindex。

我会推荐类似的东西：

<header role="banner">
  <div class="header" role="search">
    <label for="search" class="hidden">Search</label>
    <input value="" name="search" type="search" id="search">
  </div>
</header>
<div class="adv-block">
     <a href="#">Link to adv 1</a>
     <a href="#">Link to adv 2</a>
</div>
<main role="main" id="main" aria-labelledby="results">
    <h1 id="results" class="hidden">Search results</h1>
    <div class="search-result">
        <a href="#" tabindex="2">Search result 1</a>
        <a href="#" tabindex="3">Search result 2</a>
    </div>
</main>

注意：我假设将有其他内容进入标题，否则不值得使用带横幅角色的标题。

使用屏幕阅读器的人获取“内容”的典型方式是：

向下箭头，耗时但可靠。
跳过标题（VoiceOver中的cntl-alt-cmd-h），主标题1是页面主要内容的一个很好的指示。
打开地标对话框（cntl-alt-u然后左/右在VO中找到它）并转到'主'地标。
通过链接进行制表，这里的一致性胜过效率。

总的来说，我建议不要试图操纵标签顺序，并确保提供良好的标题，地标，如果你真的需要提供快捷方式，也可以提供跳过链接。这也适用于基于Windows的屏幕阅读器。

Answer 2

当前的w3可访问性标准表示尽量避免使用正的tabindex值。最好的做法是布置你的dom，这样你就可以简单地使用tabindex = 0来表示应该可以进行操作的所有内容。

VoiceOver（Mac）使用tabindex导航并忽略aria-属性

2 个答案: