支援技術からコンテンツを非表示にする
aria-hidden
支援技術ユーザーのエクスペリエンスを微調整するためのもう 1 つの重要な手法は、ページの関連部分のみが支援技術に公開されるようにするというものです。DOM のセクションがユーザー補助 API に公開されないようにする方法はいくつかあります。
まず、DOM で明示的に非表示になっているものはすべて、ユーザー補助ツリーにも含まれません。そのため、CSS スタイルが visibility:
hidden または display: none であるか、HTML5 の hidden 属性を使用しているものも、支援技術ユーザーには表示されません。
ただし、視覚的にレンダリングされていなくても明示的に非表示になっていない要素は、引き続きユーザー補助ツリーに含まれます。一般的な手法の 1 つは、絶対的な画面外に配置された要素に「スクリーン リーダー専用テキスト」を含めることです。
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
また、すでに見てきたように、非表示になっている要素を参照する aria-label、aria-labelledby、または aria-describedby 属性を使用して、スクリーン リーダー専用のテキストを指定することもできます。
「スクリーン リーダー専用」のテキストの作成について詳しくは、テキストを非表示にする方法に関する WebAIM の記事をご覧ください。
最後に、ARIA では、aria-hidden 属性を使用して、視覚的に隠されていないコンテンツを支援技術から除外するメカニズムが提供されます。この属性を要素に適用すると、実質的にその要素とすべての子孫がユーザー補助ツリーから削除されます。唯一の例外は、aria-labelledby 属性または aria-describedby 属性で参照される要素です。
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
たとえば、メインページへのアクセスをブロックするモーダル UI を作成する場合は、aria-hidden を使用します。この場合、目の見えるユーザーには、ページの大部分が現在使用できないことを示すなんらかの半透明のオーバーレイが表示されることがありますが、スクリーン リーダーのユーザーはページの他の部分を探索できる可能性があります。この場合、前述のキーボード トラップを作成するだけでなく、ページ内で現在範囲外となっている部分も aria-hidden にする必要があります。
ARIA の基本、ネイティブ HTML セマンティクス、ARIA を使用してユーザー補助ツリーに大規模な手術や、単一要素のセマンティクスの変更を行う方法について理解したところで、次は、ARIA を使用して時間的制約のある情報を伝える方法を見ていきましょう。
aria-live
aria-live を使用すると、デベロッパーはページの一部を「ライブ」としてマークできます。これは、ユーザーがたまたまページ内のその部分を探索するのではなく、ページの位置に関係なく、ユーザーにすぐに通知する必要があるという意味です。要素に aria-live 属性が設定されている場合、その要素を含むページの一部とその子孫はライブ領域と呼ばれます。
たとえば、ライブ リージョンは、ユーザーの操作の結果として表示されるステータス メッセージです。目の見えるユーザーの注意を引くほど重要なメッセージの場合、aria-live 属性を設定して、支援技術のユーザーの注意をそのメッセージに向けさせることが重要です。このプレーンな div を比較してください
<div class="status">Your message has been sent.</div>
あります。
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live には、polite、assertive、off の 3 つの値を使用できます。
aria-live="polite"は、現在実行中の操作が完了したときに、この変更についてユーザーに警告するよう支援技術に指示します。重要ではあるが緊急ではない場合に使用することをおすすめします。aria-liveの使用の大部分を占めます。aria-live="assertive"は、実行中の作業を中断し、この変更を直ちにユーザーに警告するよう支援技術に指示します。これは「サーバーエラーが発生し、変更が保存されていません。ページを更新してください」のようなステータス メッセージや、ユーザー操作の直接的な結果としての入力フィールドの更新（ステッパー ウィジェットのボタンなど）など、重要かつ緊急の更新にのみ使用します。aria-live="off"は、aria-liveの割り込みを一時的に停止するよう支援技術に指示します。
ライブ リージョンを正しく動作させるには、いくつかのコツがあります。
まず、最初のページ読み込み時に aria-live リージョンを設定する必要があります。これは厳格なルールではありませんが、aria-live リージョンに問題がある場合は、これが問題である可能性があります。
次に、スクリーン リーダーの種類によって、変更の種類によって反応が異なります。たとえば、一部のスクリーン リーダーでは、子孫要素の hidden スタイルを true から false に切り替えることで、アラートをトリガーできます。
aria-live と連携するその他の属性により、ライブ領域が変更されたときにユーザーに伝える内容を微調整できます。
aria-atomic は、更新を伝えるときにリージョン全体を 1 つの全体と見なすかどうかを示します。たとえば、日、月、年で構成される日付ウィジェットに aria-live=true と aria-atomic=true があり、ユーザーがステッパー コントロールを使用して月のみの値を変更した場合、日付ウィジェットの内容全体が再度読み上げられます。aria-atomic の値は true または false（デフォルト）です。
aria-relevant には、ユーザーに表示する変更の種類を指定します。個別に、またはトークンリストとして使用できるオプションがいくつかあります。
- additions: ライブ リージョンに追加される要素がすべて重要であることを意味します。たとえば、ステータス メッセージの既存のログにスパンを追加すると、そのスパンがユーザーに通知されます（
aria-atomicがfalseの場合）。 - テキスト: 任意の子孫ノードに追加されるテキスト コンテンツに関連性があることを意味します。たとえば、カスタム テキスト フィールドの
textContentプロパティを変更すると、変更されたテキストがユーザーに読み取られます。 - removals は、テキストノードまたは子孫ノードの削除をユーザーに伝える必要があることを意味します。
- all。すべての変更に関連性があることを意味します。ただし、
aria-relevantのデフォルト値はadditions textです。つまり、aria-relevantを指定しない場合、要素への追加時にユーザーが更新されます。これは最も望ましい選択です。
最後に、aria-busy を使用すると、読み込み中など、要素に対する変更を一時的に無視するように支援技術に通知できます。すべての準備が整ったら、aria-busy を false に設定して読み取りオペレーションを正規化する必要があります。