web-dev-qa-db-ja.com

アクセシビリティ：sr-onlyまたはaria-label

MDNから ：

以下の例では、ボタンは典型的な「閉じる」ボタンのように、中央にXがあるスタイルになっています。ボタンの目的がダイアログを閉じることであることを示すものは何もないため、支援技術にラベルを提供するためにaria-label属性が使用されます。

<button aria-label="Close" onclick="myDialog.close()">X</button>

Bootstrapドキュメントによると：

.sr-onlyでスクリーンリーダーを除くすべてのデバイスに対して要素を非表示にします

だから私も書くことができると思います：

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>

Bootstrapプロジェクトでは、どのプロジェクトを選択することができますか？

htmltwitter-bootstrapaccessibilitywai-aria
20
CharlesM

MDNの例では、aria-labelがボタンのテキストをオーバーライドするため、スクリーンリーダーは「閉じる」という単語だけを読み上げます。これは、Bootstrapなしでコードを再利用しても機能します。

あなたの例では、スクリーンリーダーから「x」を隠すために何もしていないので、スクリーンリーダーは「close x」と話します。また、テキストノードを追加して、それをクラスで非表示にします。

MDNの例を使用します。

12
aardrian

クラス sr-onlyクラスは、スクリーンリーダーを使用するユーザーにのみ役立ち、他のユーザーから非表示にする必要があるテキストコンテンツのブロック全体用です。

私が作業しているアプリの例と、ウェブアプリでアクセス可能なコントローラーを使用するための手順を示します。

<div class="sr-only">
  When voting with the text-to-speech audio, use the accessible
  controller to navigate your ballot. To navigate through the
  contests, use the left and right buttons. To navigate through
  contest choices, use the up and down buttons. To select or
  unselect a contest choice as your vote, use the select button.
</div>

あなたの例では、スクリーンリーダーに異なるテキストコンテンツを提供したいだけです。特定の質問に答えるには、MDNの例を使用してください。

Aria-labelsを使用して、必要に応じてタイトルにピリオドまたはコンマを付けて一時停止を追加する場合に、スクリーンリーダーにヒントを提供します（詳細 アクセシビリティのためにスクリーンリーダーで一時停止 ）：

<h1 aria-label="Hello World.">
  Hello World
</h1>
0
Beau Smith