アクセシビリティアドベントカレンダー5日目の記事です。
はじめに
皆さんはアクセシビリティを配慮したマークアップする際に参考にしているサイトなどはありますか？
freee株式会社が公開している「freeeアクセシビリティー・ガイドライン」やW3Cの「ARIA Authoring Practices Guide」などが有名ですね。
UIライブラリなどは私が前回、記事にしたReact Ariaなどがあります。
A11Yデザインシステム
今回は、フランスのIPEDISという会社が公開している「A11Y Design System」というサイトを紹介したいと思います。
ページ下部に「Web components」「Disability guide」「Accessibility guide」「Useful Links」の4つのリンクがありますが、今回は「Web components」の一部を見てみます（ひとつひとつ紹介すると、かなりの長文になってしまうので）
アコーディオンのページを見てみましょう。
Usage
使用方法に関しての注意点が書いてあります。
アコーディオンに関しては長い文章を折りたたんでページを省略できるけど、ユーザーに全部読んで欲しいのならリストもしくは段落にするべきという事が書いてあります。
Design
Figmaで作られたプロトタイプを見ることができます。
もちろんFigma上で開けます。
Accessibility
実装方法が記載されています。
アコーディオンのヘッダーはbuttonタグ、もしくはrole="button"でなければならない等々…
Keyboard Navigation
キーボード操作で、どういった動きをするのが正解かが書かれています。
アコーディオンですとSpace/Enterでアコーディオンの開閉、Tabキーで次に進んでShift + Tabキーで前に戻るなどが記載されています。
ライセンスについて
A11Y Design Systemのlicenseにも書かれていますがCC BY 4.0です。
「商用でも使っていいよ！」という事が書いありますが、個人的には自分の勉強の範囲で触ってみるだけで充分だし逆にそれ以外の用途が思いつかないです。
アクセシビリティを配慮したマークアップを勉強したいと思っている方だったら、A11Y Design Systemが配布しているFigmaのデザインを触りながら実際にコーディングしてみるのも良いのではないでしょうか。