2

如何让 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 和输入，然后为搜索结果，像这样。

    <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 读取用户进入搜索结果区域？

4

2 回答 2

2

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

大多数时候，屏幕阅读器用户会使用“浏览”导航来阅读内容。在 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 的屏幕阅读器。

于 2013-10-25T15:13:53.650 回答
0

当前的 w3 可访问性标准说要尽量避免使用正的 tabindex 值。最好的做法是布局你的 dom，这样你就可以简单地使用 tabindex=0 来处理所有应该可以选项卡的东西。

于 2015-06-29T22:29:25.257 回答