NOTE 103 / 2022年
WAI ARIA を読む会で残った問い
WAI ARIA の仕様を読むときに、実装へどうつなげるかを考えます。
読了目安 約2分
WAI ARIA は、HTML だけでは伝えきれない役割や状態を補う仕様です。ただし、属性を足せばよいわけではありません。ネイティブの要素で表現できるなら、そちらを優先するのが基本です。
勉強会では、role と状態の組み合わせが実際の操作と合っているかが話題になりました。仕様の言葉を覚えるだけでなく、キーボードや読み上げでどう体験されるかを確かめる必要があります。
押さえたい点
- 01ネイティブ要素を先に検討する
- 02role と状態を操作に合わせる
- 03読み上げで体験を確かめる
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- MDN アクセシビリティ 外部サイトdeveloper.mozilla.org
- W3C WAI 外部サイトw3.org
- WAI ARIA APG 外部サイトw3.org
- WAI チュートリアル 外部サイトw3.org
- web.dev アクセシビリティ 外部サイトweb.dev
- アクセシビリティを学ぶ 外部サイトweb.dev
- WCAG 2.1 外部サイトw3.org
- WCAG 2.2 外部サイトw3.org
- ARIA in HTML 外部サイトw3.org
- MDN ARIA 外部サイトdeveloper.mozilla.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- web.dev 外部サイトweb.dev
- GitHub Docs 外部サイトdocs.github.com