Webアクセシビリティってどう対応すればいいの？

アクセシビリティとは？

まずは基礎をおさらいしましょう。

アクセシビリティ（Accessibility）とは

• アクセス：access：接近
• アビリティ：ability：能力

2つをかけ合わせた造語です。
略称として「a11y」（aとyの間に11文字あるため）と省略して表記することがあります。

その中でもWebに特化したアクセシビリティを「Webアクセシビリティ」といいます。

一昔前まで、アクセシビリティは障がい者・高齢者向けの施策と言われていた時代が長くありました。
その代表的な例としては

• ヘッダー部分に文字の大きさを変更するボタンの設置
• 事前収録された音声情報リンクの設置
• 背景色の変更

といったものです。

現在では上記のようなものをWebサイトに設置することをWebアクセシビリティと呼ぶことはありません。
なぜならこれらはOSのもつ機能で十分補完可能だからです。

真のWebアクセシビリティは
「Webサイトが提供する様々なサービスや情報に誰もがアクセスしやすくすること」
をさします。

• メガネを忘れてしまった
• 利き手を怪我してしまった
• 直射日光で画面が反射してしまった
• 忙しくてじっくり読んでいる暇がない
• 検索エンジンにサイトクロールされない

など我々の身近な事象においてアクセス不能な事態が起きたときでも、サービスや情報にアクセスできるようにしなければなりません。

どんな対策をしていけばいいの？

Webアクセシビリティの本質を理解するにはWCAG2.1のガイドラインを閲覧することをおすすめします。

ガイドラインを見たとき「文字の多さ」に慄いてしまうかもしれません。
そこでどんな施工をおこなうものであるのか、ガイドラインを少し噛み砕いてみます。

• 非干渉であること
  • こちらの意思に従わせようとサイト内で指図・妨害しないこと
• 全体に関わること
  • Webサイトを作る一番大きな枠組みの対応をおこなうこと
• 動画・音声に関わること
  • テキストで表すことのできる状態にすること
• テキストに関わること
  • わかりにくい言葉を使わないこと
• 画像にかかわること
  • どんな画像であるかわかるようにすること
• 制限時間
  • 時間制限のあるコンテンツに>注意すること
• 色
  • コントラスト比を確保すること
• フォーム
  • ユーザーが迷わず操作できるようにすること

といったものがあります。
これらをガイドラインでは4つの大カテゴリにわけ下記のように表しています。

• 知覚可能（ちかくかのう）
• 操作可能（そうさかのう）
• 理解可能（りかいかのう）
• 堅牢（けんろう）

大カテゴリの中には中カテゴリがあります

• 知覚可能
  • テキストによる代替
  • 時間依存メディア
  • 適応可能
  • 判別可能
• 操作可能
  • キーボード操作可能
  • 十分な時間
  • 発作の防止
  • ナビゲーション可能
• 理解可能
  • 読みやすさ
  • 予測可能
  • 入力支援
• 堅牢
  • 互換性

中カテゴリ内には個別の対応方法が記述されています。
個々の対応方法は3段階でレベル分けされており、対応の難易度が低い順に

• A（シングルエー）
• AA（ダブルエー）
• AAA（トリプルエー）

となっています。

ガイドラインの大まかな概要は上記のとおりです。

具体的にどんな対応をしていくの？

ガイドラインの全容を把握したところで、実際にどのように対応をしていけばよいかを確認してみましょう。
具体的な対応方法や失敗例もガイドラインに記載されていますが、ガイドラインの「A（シングルエー）」からいくつか抜粋し一部をカンタンに解説します。
正確な対応方法はWCAG2.1のガイドラインをご確認ください。

まとめ

Webアクセシビリティをしっかり対応しようとするととても大変だと思ってしまいがちですが、Webサイトを作る際やWebサイトを更新する際に、少し意識するだけでほとんど網羅できてしまいます。

ここで紹介したこと以外にも対応できることとしては

• aria属性を追加する
• スクリプトによって適切な実装方法を提供する

などがありますが
このような応用編で解決しようとせず、まずは基本をしっかり抑えることが重要です。

日常生活において、エスカレーターやエレベーターが我々の生活にとって使いやすいものであるように、使いやすいWebサイトは、誰にとってもどんな状況になっても使いやすくアクセスしやすいサイトになります。

明日の自分たちのためにも今からできることをしっかり始めていきましょう

この記事はDigital Identity Creative Div. Advent Calendar 2022　2日目の記事です。