目次
WAI-ARIAの役割
下記以外にもたくさんの機能がありまるが代表的なカテゴリを紹介。
ここにほとんどの物が網羅されており、参考になります
ロール（role）
この要素の意味を定義する。
ex) role=“navigation”, banners search, tab
プロパティ（property）
追加の意図や意味を定義する。
ex) aria-required=“true” 必須項目
ex) labelledby=“label” ページ内のどの要素からもラベルとして参照できる。label for=“input”では代用できない
ステート（state）
要素の状態を表すプロパティ 。
ex) aria-disabled=“true” 非活性であることをスクリーンリーダーに伝える。
WAI-ARIAを使うタイミングは？
HTML5では伝えられない意味を伝えたい時
上記のロール、プロパティ 、ステート。
動的コンテンツの更新内容を伝えたい時
スクリーンリーダーでは追いきれない、動的に更新される物については
`aria-live`を利用する。
XMLHttpRequestやDOM APIで更新された場合に、スクリーンリーダーでユーザに伝えることができる
WAI-ARIAを使う上で注意すること
上記でも伝えましたが、大切な事なので再度伝えますが
「基本的にはWAI-ARIAではなく、HTMLの基本機能でスクリーンリーダーを通して伝えるべきである。」
それが困難な場合に限って利用し、アクセシビリティを向上させる
こんな時は不要
注意事項としては、下記は基本的な例で、そもそもブラウザが該当の要素に対応していないバージョンの事も考慮にする場合、使うケースもあります。
例えばnav要素に対応していないブラウザをサポートする場合は、role属性をつける必要がある。という事。
<nav role=”navigation”>
Nav要素を使えば、role属性がなくてもnavigationであることは伝わるので、使う必要はない。
WAI-ARIAを使う上でに疑問
コメント募集中mm
Q. vueやreactのようにリアクティブに変更されたものは対応できない？
募集中。
Q. requiredやdisabledって属性に記載するのに伝えられないの？冗長じゃない？
これらの属性はなぜかスクリーンリーダーが読み上げてくれないとのこと。
なので冗長だけれども、記載する必要がある。
ブラウザの更新に期待？
WAI-ARIA対応するとSEOへの効果はあるのか
明確にGoogleがアクセシビリティに考慮したからSEOの順位をあげるという言葉は見かけませんでした。
しかしながら、最近はウェブページUXの重要指標「コアウェブバイタル」3つ「LCP」「FID」「CLS」を、SEOの指標に追加するという話がありました
https://webtan.impress.co.jp/e/2020/06/05/36210
これらのことから、アクセシビリティに正しく対応しているサイトはSEOとしても高評価を得る可能性はあります。
ちなみに、スクリーンリーダー使ったことありますか？
通常使うことは無いと思いますが、アクセシビリティを考慮した設計をする場合、一度スクリーンリーダーで音声で確認すると全てが明らかになるはずです。
VoiceOver をオン／オフにする – VoiceOver スタートアップガイド
以下のどれかを行います。
- Command + F5 を押す
- Command を押しながら Touch ID を素早く3回押す
- Siri に「VoiceOver をオン（オフ）にして」と言う
使ってみると結構難しい。この使い方がメインの方もいるため、全ての人によりわかりやすくサイトを知ってもらえるような対応を心がけていければと思います。
※本ブログは自由度が少ないため、そこまでの対応ができていません。。。