2

aria-labelMac で VoiceOver が(または別の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 と 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 に読み取らせる方法はありますか?

4

2 に答える 2

2

特定のナビゲーション スタイルを強制しようとする場合は、十分に注意してください。スクリーン リーダーを使用して移動する方法は、タブ移動だけではなく、主要な方法でもありません。

ほとんどの場合、スクリーン リーダーのユーザーは「参照」ナビゲーションを使用してコンテンツを読みます。VoiceOver ではこれは cntl-alt-右矢印であり、Jaws/NVDA では単に下矢印です。

ブラウズ モードは、フォーム コントロールやリンクだけでなく、すべてのコンテンツを通過します。ブラウズ モードは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 値を使用しないようにするように指示されています。タブ可能なすべてのものに tabindex=0 を使用できるように、DOM をレイアウトすることをお勧めします。

于 2015-06-29T22:29:25.257 に答える