目次
どうやって勉強したらいいの？
ウェブアクセシビリティのガイドラインである「JIS X 8341-3」や「WCAG 2.0」をまずは隅から隅まで読みこんでみましょう。
・・・というのは最初からハードルが高すぎてとても大変なので参考サイトをいくつか紹介します。
「ゼロから学べる」とうたっているだけあって資料や動画での解説などで学べます。
実は2010年から存在する委員会。日本のアクセシビリティのJIS X 8341-3の理解と普及を促進するための委員会なのでさまざまな立場の方でもわかりやすくまとまっています。
その他さまざまな知見を持った方のコラムなども大変参考になります。
「Webアクセシビリティ とは」
「Webアクセシビリティ 解説」
「ウェブアクセシビリティ 企業 義務」
のようなワードで検索したり、AIに聞いてみてもよいかもしれません。
何をすればいいの？
具体的な対応の例を簡単に紹介します。
1. 視覚情報に頼りすぎない設計‐「言語化」と「コントラスト」
- 適切な代替テキスト（alt属性）は適切に設定する
- 色のコントラスト比を意識する
- 色だけに頼らない情報伝達を行う
2. マウスを使わなくてもキーボード操作とフォーカスで操作できるように
- キーボードで操作が完結できるようにする
- 今どこを指しているのか、フォーカスを可視化できるようにする
- 論理的なフォーカス順序の設定（左上から右下へ）
3. スクリーンリーダー（読み上げソフト）や検索エンジンに理解されやすいマシンリーダブル（機械判読性）な構造
- h1→h2→h3 などの適切な見出し（heading）構造
- 「ここをクリック」「もっと見る」のような抽象的ではないリンク先が推測できるリンクテキストを設定
- input要素にフォームのラベルを設定する
Webディレクターが実務でやるべきこと
上流工程での要件定義に含める
まずはクライアントに「Webアクセシビリティ」をご理解いただくところから始まることもありますが、
「このサイトはどのレベル（WCAG 2.1 A〜AAAなど）を目指すか」を、予算とスケジュールに合わせてクライアントと握ります。
後からの修正はコストが数倍かかるため、最初に入れ込むのがコツです。
「JIS X 8341-3」に従ってウェブアクセシビリティ対応を行ったサイトは
その対応状況や対応度をWebサイト上にて掲載したい場合には「ウェブアクセシビリティ方針」ページを公開する必要があります。
ウェブアクセシビリティ方針を記載したページで「こんな対応をここまで行っています」という宣言ページです。
これを宣言しておくと
「この企業はWebアクセシビリティをしっかり考えているんだ」
「ちゃんとした会社・サービスだ」
というクライアント自体の信頼感も上がります。
チェックツールの活用
エンジニアに渡す前、あるいは納品前に Lighthouse や axe DevTools などのツールを使い、機械的なエラーがないかセルフチェックします。
チームへの意識共有
デザイナーには配色、コントラストの意識を、エンジニアにはHTML構造を指示します。「なぜそれが必要か（ユーザーの不利益は何か）」をしっかり共有します。
さいごに
ガイドラインを読み込むほど当たり前ですが世の中には「さまざまなユーザー」がいて、なるべく全ての人が利用しやすいWebサイトを作成したいと感じます。
実際にキーボード操作のみ、音声読み上げブラウザの利用をしてみるのも実感できてよい体験になります。
