目次
はじめに
発売されてから少し時間がたってはしまいましたが、Web アプリケーションアクセシビリティを読んでみて、おもしろかった考え方や実務の中で少しずつでは取り入れはじめたので、その辺りを共有していければと思います！
実際にこの書籍はすごいボリュームがあるので、すべてを解説するということはできないので、今回の記事では実際に実務の中でどんな風に取り入れてみたのかということを取り上げてみるので、興味の出た方はよかったら購入してみてください。
アクセシビリティに取り組む意味とは？
まず、この書籍を手に取ろうと思ったきっかけは時代的にアクセシビリティへの配慮が高まってきているという背景を感じ取ったミーハー心からです。
ですが、冒頭部分で単なるミーハー心からでなく真剣にアクセシビリティについて学んでみようと思いました。
それは「1.5 Web アクセシビリティに取り組む理由」の章の中で、アクセシビリティに取り組むことで以下のメリットを享受することができるという説明を受けて、なるほど。それは取り組む価値がありますな。ということでちゃんと学んでみることにしました。
- ユーザーを増やせる
- ユーザビリティを高められる
- 権利を守り法を遵守できる
ユーザーを増やせる
純粋にユーザーを増やすことができるというのは大きなメリットで、つくったものをひとりでも多くの人に届けることができるのは素晴らしいことだと思います。
令和 4 年の調査の中でも国民の 7.6%はなんらかの障害を有しているということがわかっており、1 割近くを占めていて想像よりも多くのユーザーを取りこぼしてしまっているのはもったいないので、誰にとっても使いやすくするためにアクセシビリティに取り組むモチベーションになりました。
また、障害を持つ方々の中で「このサービスは使いやすいよね」といったような口コミが広がっていくこともあるそうです。
これまでは自分や身近に障害を持つ方がいなくて、アクセシビリティに取り組むことでどれだけの方の役に立つのかを知ることができなかったのですが、こうして数字にしてもらえると意識できていいですね。
ユーザビリティを高められる
アクセシビリティを改善することによって、障害を持つ方にも使ってもらえるようになることはもちろん。それ以外のユーザーにとっても見やすかったり操作しやすかったりする情報設計やデザインを作成することにもつながって、使いやすい Web サイト・サービスの開発に役立てることができます。
権利を守り法を遵守できる
これは少し驚いたのですが、アメリカではアクセシビリティに対応していないことによって訴訟されるという事例も急増してきているようで、他国でもアクセシビリティへの対応を義務付けている地域も増えてきていて、そういった国際的なトレンドから日本でもそのうち義務付けられてもおかしくなしということで、今から対応できるようにしておく準備はしておいたほうがいいかなと思いました。
簡単なところから 1 コずつ
といった情報から、これからはアクセシビリティは当たり前になってくるのかな？ということで、実務の中でも少しづず取り組んでいくことにしました。
この書籍の中でも「複雑な UI パターンの改善」など、実際に Web サイト・サービスを実装する上でアクセシビリティに配慮するにはこうしましょう！という事例が取り上げられており、実務の中で参考にさせてもらったのでここでも共有していきたいと思います。
ハンバーガーメニュー
おそらくスマホデザインでハンバーガーメニューを入れている Web サイトは多いと思うのですが、その場合にはどんな実装をするべきか？ということが書かれていて、実際に自分でも試してみやすいところだったので、こちらでも紹介してみたいと思います！
特にアクセシビリティ対策をしていなければ以下のような問題が出てきてしまします。
ボタンに関する問題
- キーボードで開閉操作ができない
- スクリーンリーダーで開閉状態の認識ができない
メニューに関する問題
- メニューを閉じていてもメニューが操作できてしまう
- スクリーンリーダーで別のナビゲーションとの区別ができない
ボタンに関する問題
まずはボタンから。
「キーボードで開閉操作ができない」という問題に対して。
divやspanではなく、button要素を使うとキーボード操作ができるようになります。
「スクリーンリーダーで開閉状態の認識ができない」という問題に対して。
開閉状態を認識させるた目にはaria-expanded属性とaria-controls属性を使います。
aria-expandedはメニューを開いている時はaria-expanded="true"、メニューを閉じている時はaria-expanded="false"とすることで、スクリーンリーダーが開閉状態を読み上げられるようになります。 (ボタンを押したタイミング/ボタンにフォーカスしたタイミングで)
そして、aria-controlsはaria-expandedによって制御される側のコンテンツを紐付けます。
具体的にはaria-expandedを持つボタン要素にaria-controls="制御されるコンテンツのid"を指定して、制御される側の要素にid="制御されるコンテンツのid"を付与することで紐づけることができます。
それらを合わせるとこんな感じのコードになってきます！
<button aria-expanded="false" aria-controls="menu">
メニュー開閉
</button>
<nav id="menu">
<ul>
<li>
<a href="/">
ホーム
</a>
</li>
...
</ul>
</nav>
メニューに関する問題
続いてはメニューの問題を解消していきましょう。
「メニューを閉じていてもメニューが操作できてしまう」という問題に対して。
- hidden 属性
- CSS で
display: none;かvisibility: hidden;する
visibilityであればtransitionをかけることもできるので、例えばフェードアウトしていくようなアニメーションだとopacityと合わせてvisibilityも同じtransitionをかけてあげれば解決することができます。
「スクリーンリーダーで別のナビゲーションとの区別ができない」 という問題に対して。
これもシンプルでaria-labelで固有の名前をつけてあげればいいだけです。
<button aria-expanded="false" aria-controls="menu">
メニュー開閉
</button>
<nav id="menu" aria-label="メインメニュー">
<ul>
<li>
<a href="/">
ホーム
</a>
</li>
...
</ul>
</nav>
こんな感じです。
ただ、aria-controlsのように実装者だけがわかればいい名前ではなく、aria-labelは実際に読み上げられるものになるので、ユーザーに伝わりやすい命名を意識してみましょう！
参考
さいごに
今回は本当にほんの一部分を取り上げてみましたが、ハンバーガーメニューの実装法ひとつとっても、また別の方法も紹介されていたり、他の UI でのアクセシビリティを考慮した実装方法が紹介されていて、明日から役立つ書籍になっていると思うのでおすすめでした！！