WAI-ARIA Study Recap
By jiyuujin at
WAI-ARIA 勉強会
いま一度見直しておきたい 動画 です。
狙い・成果物
WAI-ARIA を誤って使っていませんか。下手に WAI-ARIA を使用しているとクリーンリーダーなどの支援技術は上手く読み取ってくれません。
WAI-ARIA とは何ぞや、という概要説明から、実際プロダクトのアクセシビリティを改善するために取り組んだ知見などを中心に聞ける良い場となっていそうです。
資料一覧
イベント内で参照があった資料一覧
- 暗黙のロール
- WAI-ARIA 実装の 5 つのルール
- WAI-ARIA Authoring Practices 1.1 (一部和訳が怪しいので時折原語も混ぜながら)
- モーダルダイアログ実装で考えるべき事柄
- Authoring Practices 3.9 Dialog (Modal) を見ながら考慮する
- SmartHR の取り組み
- ユニットテスト
- Testing Library
- Puppeteer
- アクセシビリティテスト (E2E)
- DOM と CSS OM から成るアクセシビリティオブジェクトモデル (AOM) を利用する
- acot
- HTML Standard から見る WAI-ARIA
- その他
個人的メモ
- UI の手掛かりを拡張し、適切なアクセシビリティツリーを提供するのが WAI-ARIA
- WAI-ARIA の使用を検討する際、その箇所の仕様を確認する (絶対)
- 暗黙のロールを調べる
aria-label
属性は特に重要ですaria-
で始まる属性を介して変更するステートとプロパティは同じものとして考えて良いhidden
属性は特殊、基本的にhidden
属性よりaria-hidden
属性を使用する- Authoring Practices の輪読会では 3 章「デザインパターンとウィジェット」を重点的に見ていったそうです
- 悪い ARIA なら ARIA の無い方がマシ、その方針を前提に Authoring Practices を応用する
- Authoring Practices に載っていないパターンは地道に頑張るしか無さそうです
なお、 WAI-ARIA を機械的にチェックできると良い。