VoiceOver（Mac）使用tabindex導航並忽略唱片屬性

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> 

---

首先，我想與標籤導航用戶跳過advertisments，所以我對提供的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讀取用戶前往搜索結果區？

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中找到它）並轉到「主」地標。
• 通過鏈接Tabbing，和一致性勝過這裏。

總的來說，我會建議您不要試圖操縱製表順序，並確保您提供良好的標題，地標和跳過鏈接，如果您確實需要提供快捷方式。這也適用於基於Windows的屏幕閱讀器。

Answer 2

當前的w3輔助功能標準說要儘量避免使用正值tabindex值。佈局你的dom是最好的做法，這樣你可以簡單地使用tabindex = 0來表示所有應該可配置的東西。