JavaScript アクセシビリティ WAI-ARIAの基本1

「道しるべ/ランドマーク」の実装

道しるべ/ランドマーク（Signpost/Landmark）とは、
ユーザーが共通のページ要素を見つけることができるようになる情報を提供することです。
例えば、
 検索フォームはユーザーが見つけたいと考える重要なランドマークですが、
 以前は、
 
<input type="search">

 で済ませていました。
 しかしこれはアクセシビリティを改善できます。


<input type="search" name="q" placeholder="Search query" aria-label="コンテンツを検索します。t">

aria-label 属性を新たに設定します。
これによって、スクリーンリーダーは説明ラベルを読み上げます。

このように、
WAI-ARIA は role 属性をブラウザーに追加することで、
サイトに、
付加的な意味論的価値を追加することができます。

動的なコンテンツの更新の場合

静的なテキストだけであれば、
スクリーンリーダーにとって問題ありませんが、
XMLHttpRequest、Fetch、DOM API などのように、
動的に更新されるコンテンツがあることです。
ページ全体をリロードすることなく、
ページの一部だけ更新を行うコンテンツ（live region）の場合、
問題が生じます。
コンテンツの一部が更新されても、
スクリーンリーダーに検知されません。

こういったとき、
WAI-ARIAの、
aria-live プロパティを使用します。

aria-live プロパティには属性値が3つがあります。
off: デフォルト値。更新が通知されません。
polite: 更新がユーザが暇になったときのみ通知されます。
assertive: 更新は可能な限り早くユーザに通知されます。


<section aria-live="assertive">


こうすると、
コンテンツが更新されたとき、
スクリーンリーダーが読み上げてくれるようになります。

更新の時、
見出しも読み上げるならば、


<section aria-live="assertive" aria-atomic="true">


のようにします。

今回は以上です。