アクセシビリティとは
アクセシビリティとは辞書で調べると「近づきやすいこと。物を得やすいこと。また、道具などの使いやすさ、情報やサービスに対する利用のしやすさ。」という意味で定義されています。
その中でもWebに特化したアクセシビリティを「Webアクセシビリティ」といいます。
誰のためにやるの？
障害者の方向けの対応をすることというイメージを持つ人が多いかもしれませ んが、「怪我をしないです」、「病気もしないです」なんてことはないかと思います。一時的な怪我や病気であっても充分にアクセシビリティ対策をする方の対象となります。つまり、全員にアクセシビリティは必要だと思います。
我々全ての人類共通で必要な対策がアクセシビリティの対策です。アクセシビリティはユーザビリティと少し似ていますが、ユーザビリティは一部のユーザーに対して使いやすいものに対し、アクセシビリティは全ての人が使いやすいものです。
いつから始めるの？
2024年4月1日から国や地方公共団体、民間事業者などに義務化されるようになります。また全事業者は、遅くとも2024年6月4日までに対応する必要があることもアナウンスされました。いずれペナルティの恐れもあります。特にSEO対策では画像への代替テキストなどアクセシビリティへの考慮も重要な項目として挙げられます。これから作るものにはWebアクセシビリティを盛り込むことが重要だと思います。
ところで余談ですが、一部の企業でアクセシビリティポリシーのページを見ます。これもまさかの義務化がありそうな予感しませんか？
何か基準になるものはあるの？
こちらにガイドラインがありますが、ウェブアクセシビリティのレベルについては下記のようになっています。
・レベル A （25項目）：アクセシビリティ確保に最低限必要なレベル
・レベルAA（13項目）：諸外国でも公的機関に求められるレベル
・レベルAAA（23項目）：レベル AAAを目標とすることは推奨しない
うん、わからない…
そう感じたら、デザインフェーズ、コーディングフェーズ、開発フェーズなど制作を終えたらひとまずこちらのチェックリストを見てどれくらいの達成基準をクリアしているかをチェックする必要があると思います。
また、人力でチェックリストを見ていく方法以外で「PageSpeed Insights」に通すことも大切だと思います。ユーザー補助の部分がアクセシビリティにあたる部分となります。
対策例
いきなり準備することは難しいと思いますが、簡単にできそうな部分から取り入れてみませんか？
画像のALTやキャプション付け
例えば、画像のALTキャプションをつけることは記事を書くうえで大切で、設定し忘れがちな項目です。
画像が何の画像を示すのかをALTでつけたり、表などの説明にcaptionをつけたりすることで、SEOの効果をあげたり、音声読みあげにてわかりやすい表現となります。
<img src alt="画像の代替え文字"><table border="1">
<caption>テーブルの説明<caption>
<thead>
<tr>
<th>見出し</th>
<td>要素</td>
</tr>
</thead>
<tbody>
</table>ブラウザで検証する際などに、Read Aloundなどgoogleの拡張機能を利用して読ませることも大切です。
配色のコントラスト比のチェック
Adobe Colorを使ってコントラスト比率をチェックし、WCAGレベルに配色がアクセシビリティに良いものなのかを判断させることができます。
その他でできる対策
- カルーセルスライダーのloopを切り、ナビゲーションだけで前後にスライドできるようにする
- 動画に字幕をつける
- タブ切り替えの時にどのタブの中の内容なのかをしっかりと明記する
- フォームにlabel要素を使い、タップできる範囲を大きくする
まとめ
アクセシビリティの義務化は大変という意見も多いと思いますが、しっかりと対応していくことで見れる方の幅が広がることはとても魅力的なので、まずは手をつけられそうな簡単な部分から対応していくことが大切だと思います。
