先日参加した勉強会の学習メモと感想です。
WAI-ARIA勉強会 - UIのアクセシビリティを損なわないための基礎と応用 -
勉強会参加前の WAI-ARIA 理解度としては「MDCとかのコンポーネント使うときにたまに出てくるやつ」「アクセシビリティのために大事っぽいから変にいじらんとこ」という感じでした。基礎セッションの視聴後は「完全に理解した」
学習メモ
とは
WAI-ARIA とは、 role や aria-* の属性を使って、HTMLでは表現しきれない役割・性質・状態を表すもの。
WAI-ARIA には、指定できる要素・できる組み合わせに厳しいルールがある。どんな使い方がダメかというと、だいたいダメ。たぶんダメだろう前提で使用を確認することが大事。
ロール・プロパティ・ステート
<button aria-label="ヘルプ">？</button>
<-- ↑button ロールの aria-label プロパティを指定していることになる -->
ロールによって、指定できるプロパティとステートが異なる。ロールは要素の役割。スクリーンリーダーで読み上げられる。HTMLの各要素には暗黙のロールが規定されている（ex. a要素はリンク）。HTMLがもともと持っているロールを使うことが大事。HTML要素の振る舞いまでは実装しきれない場合もあるため。
プロパティとステートは、aria-* の属性で表される。ARIA のプロパティは DOM のプロパティに伝播しないので、checked 属性と aria-checked 属性だったら、checked 属性を使う。hidden とか例外もある。
まとめ
- ARIA 属性を使う時は、ダメパターン前提で仕様を調べる
- 要素の暗黙のロールを知る
- HTMLがもともと持っているロールを優先的に使う
- ロールごとに必須のプロパティ・ステートを設定する
- 適当な構造関係にする
- プロパティ・ステートの値が正しいか確認する
感想
その他のセッションとしては、実際にスクリーンリーダーを使っているエンジニアの方が遭遇した妙な読み上げや、チーム内での実施・浸透方法なども紹介されました。実際ATを使っているところのを初めて見たのですが、自分でもやっぱり実際に使ってみないとダメだよなと思うなどしました。
配信時に、UDトークで字幕がついていたのが、自分としてはかなり嬉しいポイントでした。音声認識弱くて聞き逃しがちなので。こういうちょっとした不自由がカバーされるのが、アクセシビリティ高める利点だなと再認識しました。
後半はちょっと意識を失ってました。