はじめに
業務でaria-*が色々出てきたので、メモしました。
調べるうちにWAI-ARIAってなんだっけ？となったのでそれもメモ
そもそもWAI-ARIAとは？
- WAI-ARIA = Web Accessibility Initiative Accessible Rich Internet Applications
- W3Cによって定められた仕様で、HTML属性を定義している
- HTMLだけでは不足しているセマンティクス（意味）を補完できる
- ウェブページの構造や DOM に影響を与えない
- 必要な場合にのみ使う
- 理想はHTMLだけ
WAI-ARIAの3つの機能
ロール（Role）
- 要素が何か、何をするかを定義する
- 主にランドマークロール
- HTML構造要素の意味づけ
- ウェブページの重要な場所や目的の場所に移動するのに役立つ
-
<nav>``<aside>などのような役割として振る舞える
プロパティ（Property）
-
要素の性質を定義する
- 要素の追加の意味を示せる
- （例）
aria-required="true"：値を入力しないとフォーム入力が有効にならない - アプリでのアクションなどを通して変化しない
状態（State）
- 要素の現在の状態を定義する
- 状態はアクションなどによってプログラムから変更される
WAI-ARIAはいつ使うべき？
道しるべ/ランドマーク
HTML要素で指定できない役割を与えられる（tabなど）
動的なコンテンツの更新
コンテンツが更新された時にスクリーンリーダーのユーザーに対して伝えられる
エラーが発生した時に伝えられたり！
キーボードのアクセシビリティの向上
HTMLタグでtabキーでフォーカスが当てられないものがある場合などにtabindex対策できる
意味論的ではないコントロールのアクセシビリティ
不規則なUIとか複雑な構成の時に、ユーザーに機能の手がかりを示す
よく見るaria属性メモ
-
aria-invalid属性：入力フォームの値が無効であることを示すために使用する -
aria-labelledby属性：適用される要素のラベル付けを行う要素（複数可）を識別する-
<label for="input">は複数不可
-
-
aria-describedby属性：その属性が設定されている要素を説明する要素（複数可）を特定する- 例：エラー文とinputの紐付けなど
-
aria-live属性：要素が更新されることを示す-
たくさんつけすぎると良くない
- うるさくなってしまうことがある
- 属性値
- off：変更を通知しない
- polite：ユーザーの操作を妨げない範囲で変更を通知する
- assertive：即座に変更を通知する
-
突然ページが真っ白になって通知が表示されるようなもの
- 強すぎて、ユーザーの操作に影響が出るので使わない
-
-
参考