支援技術からコンテンツを非表示にする
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 に設定して読み取りオペレーションを正規化する必要があります。