WAI-ARIA Study Recap

WAI-ARIA 勉強会

いま一度見直しておきたい 動画 です。

• YouTube アーカイヴ動画
• トゥギャッター WAI-ARIA なにもわからない

狙い・成果物

WAI-ARIA を誤って使っていませんか。下手に WAI-ARIA を使用しているとクリーンリーダーなどの支援技術は上手く読み取ってくれません。

WAI-ARIA とは何ぞや、という概要説明から、実際プロダクトのアクセシビリティを改善するために取り組んだ知見などを中心に聞ける良い場となっていそうです。

資料一覧

• WAI-ARIA 勉強会
• Authoring Practices から始めるアクセシビリティ対応
• WAI-ARIA ディープダイブ

イベント内で参照があった資料一覧

• 暗黙のロール
  • WAI-ARIA を学ぶときに整理しておきたいこと
• WAI-ARIA 実装の 5 つのルール
• WAI-ARIA Authoring Practices 1.1 (一部和訳が怪しいので時折原語も混ぜながら)
  • WAI-ARIA オーサリング・プラクティス 1.1
• モーダルダイアログ実装で考えるべき事柄
  • Authoring Practices 3.9 Dialog (Modal) を見ながら考慮する
    • UI における見えるけど利用できない非活性な領域の実装と inert 属性について
• SmartHR の取り組み
  • 「やさしさ」禁止！SmartHR のプログレッシブデザイン宣言
• ユニットテスト
  • Testing Library
    • Cheatsheet
  • Puppeteer
    • Puppeteer と ARIA Handler
    • Puppetaria: accessibility-first Puppeteer scripts
• アクセシビリティテスト (E2E)
  • DOM と CSS OM から成るアクセシビリティオブジェクトモデル (AOM) を利用する
  • acot
• HTML Standard から見る WAI-ARIA
  • 3.2.6 Global attributes
  • 3.2.4 Element definitions
  • 3.2.9 Requirements related to ARIA and to platform accessibility APIs
• その他
  • iOS の VoiceOver で『俺の従業員サーベイ』を実施した話し
  • HTML 解体新書-仕様から紐解く本格入門 単行本 – 2022/4/15

個人的メモ

• UI の手掛かりを拡張し、適切なアクセシビリティツリーを提供するのが WAI-ARIA
• WAI-ARIA の使用を検討する際、その箇所の仕様を確認する (絶対)
• 暗黙のロールを調べる
• aria-label 属性は特に重要です
• aria- で始まる属性を介して変更するステートとプロパティは同じものとして考えて良い
• hidden 属性は特殊、基本的に hidden 属性より aria-hidden 属性を使用する
• Authoring Practices の輪読会では 3 章「デザインパターンとウィジェット」を重点的に見ていったそうです
• 悪い ARIA なら ARIA の無い方がマシ、その方針を前提に Authoring Practices を応用する
• Authoring Practices に載っていないパターンは地道に頑張るしか無さそうです

なお、 WAI-ARIA を機械的にチェックできると良い。

• Nu HTML Checker
• axe®︎
• markuplint