アコーディオンUIのアクセシビリティを改善してみよう！
この記事は STUDIO アクセシビリティ委員会のマガジンvol.8 です。
こんにちは！STUDIO株式会社 フロントエンドエンジニアのjimbouです。
私からはSTUDIO アクセシビリティ委員会マガジンにて、主にエンジニア/デザイナーさん向けに技術的な記事を発信しています。
STUDIOに限らずWebサイト、Webアプリに携わる全ての方々に読んでいただければと思います🌟
今回は「アコーディオンUI」についての記事になります💡
Webサイト、WebアプリでアコーディオンUIをデザイン/実装する方に向けて、少しでも役に立つ記事になれば幸いです☺️
何のためにアクセシビリティを向上させるのか？
ではこのアコーディオンUIを実装する上で、アクセシビリティを向上させるとどんな良いことが起こるのでしょうか。
例として、アクセシビリティを特に意識せず主にdivタグを用いてマークアップしたアコーディオンUIを見ていきましょう。
この場合、キーボード操作でアコーディオンヘッダーにフォーカスすることが出来ず、マウスクリックでしかアコーディオンパネルの開閉が出来ません。主にキーボード操作でサイトを閲覧しているユーザーはアコーディオンパネル内にある情報へ辿り着くことが出来なくなってしまいます。
また、マウス操作を必要とせず、キーボード操作でアコーディオンパネルが開閉できると、どのユーザーにとっても嬉しい体験向上になりますよね！
次に、スクリーンリーダーで操作してみるとどうでしょうか。キャプチャ動画を撮影してみました。（音声が出るのでご注意ください）
アコーディオンパネルが開かれているのか、現在読まれている文章はどの質問に対する答えなのか…など、分からないことがたくさんあり不便な状態です。
ということで、このサンプルの状態からアクセシビリティを向上させていこうと思います🔥
実装してみよう！
本記事では、UIの名称を以下の画像の通りに定義します。
アコーディオンヘッダー・・・アコーディオンパネルの開閉を制御する部分。
アコーディオンパネル・・・アコーディオンヘッダーに対応する情報が記載されているパネル。
アコーディオンヘッダー
まずはアコーディオンヘッダーから見ていきましょう！
1.) button要素でマークアップする
div要素で作られていたアコーディオンヘッダーをbutton要素でマークアップします。
button要素にすることでアコーディオンヘッダーが押せるものであることを伝えることができる他、特別な対応なしにキーボードフォーカスが当たるようになります。
2.) 開いている状態の時はaria-expanded="true"を指定する
aria-expandedはその要素（または要素が制御する別のグループ化要素）が現在展開されているのか、折りたたまれるかどうかを伝えることができます。
開いている状態の時はtrue, 閉じている状態ではfalseを指定するようにします。
3.) アイコンを使用する場合、aria-hidden=”true”を指定する
画像やアイコンを使用する場合は、画像要素にaria-hiddenを設定します。
aria-hiddenを設定することでスクリーンリーダーでの不要な読み上げを防ぐことができます。
4.) aria-controlsに対応するアコーディオンパネル要素のIDを指定し、アコーディオンパネルと紐づける
アコーディオンヘッダーはそれぞれのアコーディオンパネルを制御する役割を担っていますので、aria-controlsを指定し制御する対象を紐付けます。 対応するアコーディオンパネルのIDをaria-controlsに指定します。
5.) IDは対応するアコーディオンパネルのaria-labelledbyに指定したものと同じにする
対応するアコーディオンパネルに指定されているaria-labelledbyと同じものをIDに指定します。
詳細はアコーディオンパネルの解説にて後述します。
アコーディオンパネル
次に、アコーディオンパネルについて見ていきます。
1.) aria-labelledbyに「対応するアコーディオンヘッダーのID」を指定する
アコーディオンヘッダーを「アコーディオンパネルのラベル」と解釈し、対応するアコーディオンヘッダーのIDをaria-labelledbyに指定します。
こうすることで、ラベルの役割を持っているアコーディオンヘッダーとアコーディオンパネルを紐づけることができます。
こうすることで、アコーディオンパネルの情報にアクセスした際にアコーディオンヘッダーの情報を読み上げてくれるようになります。
アコーディオンパネル内に見出しが存在する場合は、見出しジャンプでパネル内の情報に直接アクセスする可能性もあります。その際に対応するアコーディオンヘッダーの情報が分かると、より情報が理解しやすくなりますね。
2.) IDはアコーディオンボタンに指定したaria-controlsと同じものを指定して紐づける
アコーディオンヘッダーでも記述がありましたが、対応するアコーディオンヘッダーに指定されているaria-controlsと同じものをIDに指定します。
完成したものがこちら！
完成したものを以下のURLで公開しましたので、キーボードやスクリーンリーダーで操作してみてください。
最初の状態と比べると、とても使いやすくなりました✨
少しの変更でより多くのユーザーが嬉しくなるポイントがたくさんあります！みなさまもぜひトライしてみてはいかがでしょうか！
また、今回のコードのサンプルもこっそりと公開しますので参考になれば幸いです。
終わりに
今回のアコーディオンUIは下記を参考に作成しました。
様々なUIのサンプルが掲載されていますので、ぜひチェックしてみてください💡
現在STUDIOではアコーディオンUIの提供は行っておりませんが、要望を頂くことが大変多いです。提供させていただく際には、しっかりとアクセシビリティを向上させた状態でお届けできるようにいたします🔥
STUDIOアクセシビリティ委員会のマガジンでは他にもアクセシビリティ関連の記事を公開しております。Webサイト作りや運営に関わる全ての方に読んでいただけます！
気になった方はぜひマガジン登録をお願いいたします🌸
STUDIOでは積極的に採用を行なっています
STUDIO では現在、積極的に採用を行なっています💫とことんこだわってプロダクトを作りたいエンジニアの皆さん、STUDIOを一緒に作りませんか？カジュアルな面談ももちろん受け付けておりますので、少しでも興味のある方はぜひお話しましょう！
この記事が気に入ったらサポートをしてみませんか？