web-dev-qa-db-ja.com

WAI-ARIAの読み込みアニメーションにラベルを付ける方法は？

私はウェブページのいくつかのアクセシビリティの問題を修正することに取り組んでいます。ダイアログとして機能するこのdivがあり、ある時点で、読み込み中のアニメーションと「Working ...」というテキストを含むdivが表示されます。

目の見えないユーザーに進行状況のアニメーションがあり、それが機能していることを正しく通知するために、これら2つのアイテムにラベルを付ける方法がわかりません。彼は、待つ必要があります。

<div id="loading" style="display: none;">
        <div class="mgBot15"><span class="txt16" role="alert">Working...</span></div>
        <img src="loading.png" role="progressbar" aria-busy="true"/>
    </div>

ロールとaria-busyプロパティをimgに（最初は親divにも）追加してみました。

このdivが表示されると（表示スタイルプロパティを変更することにより）、「Working ...」と正しく表示されますが、ビジーであり、ユーザーが待機する必要があるという表示は聞こえません。何かが足りませんか？

私はアニメーションをロードするための例をあちこち探してきましたが、今のところ役に立ちません。

注：テストするスクリーンリーダーとして [〜＃〜] nvda [〜＃〜] を使用しています。

ありがとう

htmlaccessibilitywai-aria
11
So Many Goblins

私が思いついた最善の解決策は、ロールアラートとaria-busy = "true"を使用することでした。

<div id="loading" style="display: none;">
    <div class="mgBot15"><span class="txt16" role="alert" aria-busy="true">Working...</span></div>
    <img src="loading.png" alt="loading" />
</div>
14
So Many Goblins

最も賢明なアプローチは、コンボaria-busy="true" aria-live="polite"を使用することだと思います。

その理由は、一部のページに多数の個別のローダーがあり（たとえば、ページ全体に単一のローダーではなく、コンポーネントごとに1つ）、aria-live="assertive"またはrole="alert"を使用するためです。非常に煩わしく、各ローダーが呼び出されます。

4
Lejeune

ここで使用する正しい役割は、使用された元の質問としてprogressbarです。 alertのような他の役割は機能するかもしれませんが、それらはそれほど具体的ではありません。つまり、支援技術はあまり理想的ではない方法で情報を提示する可能性があります。

ただし、元の質問の例にはいくつかの問題があります。

  • アラートと同じようにテキストをアナウンスしたい場合は、alertロールではなくaria-live="assertive"を使用する必要があります。そのaria-live値は、スクリーンリーダーがアラートの場合にテキストをアナウンスする原因になります。
  • アナウンスされるテキストは、aria-valuetext属性を使用して、progressbarロールを持つ要素に設定する必要があります。隣接する別の要素だけに設定しないでください。表示上の理由で別の要素にも含める必要がある場合は、その要素にaria-hidden="true"を含める必要があります。
  • 仕様により、進行状況が不確定な場合でも（回転する負荷インジケーターのように）、aria-valueminとaria-valuemaxを指定する必要があります。これらは、パーセンテージを意味する単純なプレースホルダーとして、それぞれ0と100に設定できます。

ロードが完了すると、aria-valuenowはaria-valuemaxに使用されたものに設定でき、aria-busyはfalseに設定できます。

これは、元の質問に対する1つの潜在的な代替案につながります。

<div id="loading" role="progressbar" aria-valuetext="Working…" aria-busy="true"
    aria-live="assertive" aria-valuemin="0" aria-valuemax="100">
    <div class="mgBot15" aria-hidden="true"><span class="txt16">Working...</span></div>
    <img src="loading.png" alt="" />
</div>
1
Scott Buchanan

このシナリオで何をする必要があるかを説明する良い記事があります スピナーアクセシビリティの読み込み

スピナーはコンテナ内に含まれている必要があります。その可視性は、aria-busy属性に関連して切り替えることができます。それらは常に反対である必要があります。つまり、現在ロードしている場合は、section [aria-busy = "true"] 、. tn-spinner [aria-hidden = "false"]、コンテンツがロードされたら、それぞれfalseとtrueに切り替えます。

1
ZeroDarkThirty

スパンでrole="alertdialog" aria-busy="true"を使用してみましたか？

0
Clyde Lobo

同様の問題をいじって一日を過ごした後、私はようやく多くの読書と実験でこれを機能させることができました。スクリーンリーダーにNVDAを使用しています。

<div class="loader" show.bind="isLoading" role="alert" aria-label="Loading"></div>

次の属性が重要でした：ロールおよびaria-label。上記の例では、isLoadingがtrueになると、NVDAに「Loadingalert」をアナウンスさせます。注意すべき重要な点は、NVDAがaria-label値を発音し、その後に「アラート」が続くことです。ロール「log」または「status」を使用しても、アナウンスにはなりませんでした。

0
malkstor

これもここで回答されていることに注意してください JAWSのようなスクリーンリーダーが読み込みアイコンにアクセスできるようにするにはどうすればよいですか？ このコンボで：role = "alertdialog" aria-busy = "true" aria-live = 「断定的」

0
Mike Gifford