WAI-ARIA Study Recap
🍀

WAI-ARIA Study Recap

#A11Y

By jiyuujin at

WAI-ARIA 勉強会

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

狙い・成果物

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

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

資料一覧

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

  • 暗黙のロール
  • (一部和訳が怪しいので時折原語も混ぜながら)
  • モーダルダイアログ実装で考えるべき事柄
    • Authoring Practices を見ながら考慮する
  • SmartHR の取り組み
  • ユニットテスト
    • Testing Library
    • Puppeteer
  • アクセシビリティテスト (E2E)
    • DOM と CSS OM から成るアクセシビリティオブジェクトモデル (AOM) を利用する
  • 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 を機械的にチェックできると良い。