WEBアクセシビリティ：デジタル庁のウェブアクセシビリティ導入ガイドブック
はじめに
WEBアクセシビリティは最近話題になってます。しかし、アクセシビリティやWEBアクセシビリティの意味、やり方、どのような効果があるかは分かりにくいです。WEBアクセシビリティを参考できる標準がありますが、複雑で難しいです。
このように困ってる方をためにデジタル庁でウェブアクセシビリティ導入ガイドブックを公開しました。今回はこのガイドブックを利用してWEBアクセシビリティについて勉強したいと思います。
WEBアクセシビリティ
アクセシビリティとは何なのでしょうか？
辞書の意味ではアクセスしやすい、利用しやすい、ユーザーが製品やサービスなどを利用する時に便利に使えることだと思います。
であれば、WEBアクセシビリティはユーザーがWEBを利用する際に便利に使えることだと思います。
WEBを考案した「ティム・バーナーズ＝リー」は以下ように話しました。
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
WEBの力はその普遍性にある。障害の有無にかかわらず、誰もがアクセスできることは不可欠な要素である。
Tim Berners-Lee, W3C Founding Director and inventor of the World Wide Web
つまり、ユーザーがどんな環境でも技術や専門的な問題なくWEBから提供してくれる全ての情報に接続できるようにすることだと思います。
このようなアクセシビリティの話を聞くと、障害者の方を向けに対応することがWEBアクセシビリティだと思われるかもしれません。しかし、ウェブアクセシビリティ導入ガイドブックを参考すると老眼で文字が読みにくくなることもアクセシビリティの問題ですし、地方の人にとって東京にある府省庁が発行する情報にアクセスしづらいことも、アクセシビリティの問題だと言われてます。
なので、障害者に限ってる問題ではなくて、目が悪い私もためにも必要なことです。
ウェブアクセシビリティ導入ガイドブック
「アクセシビリティ」という単語は、Access（近づく、アクセスする）と Ability（能力、〜できること）に分けることができます。「近づくことができる」「アクセスできること」という意味から派生して、「（製品やサービスを）利用できること、またはその到達度」という意味でも使われます。
WEBアクセシビリティで達成すべきこと
WEBアクセシビリティで達成すべきことをいくつか紹介いたします。
自動再生はさせない
ここでは、動画、オディオ、音声、背景音、などコンテンツが提供する全てについてです。この音が自動再生されることによってスクリーンリーダー使用者がコンテンツを認識して使用するときに邪魔になるからです。
どうしても自動生成が必要な場合は、3秒以内に停止するか、ESCキーを押して停止するか、ソース上で停止機能を最初に実行できるように実装する必要があります。
例えば、スクリーンリーダーと背景音が重ねて再生されたら、聞きづらくなります。なので、コンテンツに含まれたファイルは停止状態で提供する方が良いです。
キーボードの使用の保障
全ての機能はキーボードのみで使用できなければならないです。例えば、WEBページ上ではマウスオーバーしたらメニューが表示されるドロップダウンメニューがあります。でも、キーボードで接近した際にはサブメニューが出力されなかたら、キーボードのみ利用できる方はこのサブメニューでは接近することができません。
例えば、下記の<a>タグはキーボードで選択することができません。
<a onclick="move()">Click me</a>
なので、キーボードの使用を保障してないコードになります。しかし、href属性を追加するとキーボードの使用の保障するコードになります。
<a href="#" onclick="move(); return false">Click me</a>
キーボードによるフォーカス移動
キーボードによるフォーカスは論理的に移動し、視覚的に区別できるようにする必要があります。フォーカスは一般的に左から右、上から下に移動できると予測します。
例えば、ログイン画面でIDにフォーカスになったら次はPWにフォーカスになると予測します。でも、次にフォーカスになった項目がブログ記事表示になってしまうなら、ユーザーは困ると思います。
それと、ログインする時に良くある保存ボタンのフォーカス順番がログイン後であれば、IDとPWを保存するボタンを押せない可能性があります。
それと、CSSを利用してそもそもフォーカスが見れないようにすることも注意しないといけないです。
代替テキストの付与
テキストではないコンテンツはその意味と用途を認識できるようにテキストを設定しないといけないです。
例えば、この記事を視覚的に見れる方は上記の図の内容を認識できるし、コードは以下になります。
<img src="image.png" alt="" width="400"/>
しかし、見れない方はスクリーンリーダーで内容を聞きます。上記のコードではイメージについて説明がないため、何も読んでくれないか、単純にimage.pngというファイル名を呼んでくれるかもしれません。なので、altにイメージに対する説明を書く方が良いです。
<img src="image.png" alt="ログイン画面でログインボタンよりIDとPWを保存しますかのチェックボックスのフォーカスが後順位の図" width="400"/>
代替テキストが長すぎる場合altを開いてる値に処理してpタグを使用して提供する方法もあります。この時には<p>タグを見れないようにしなければならないです。但し、この方法を使用する際に注意することはdisplay: noneやopacity: 0やvisibility: hiddenを使ってはいけません。なぜなら、このような属性はスクリーンリーダーでも呼んでくれないからです。
なので、ちょっと違う方法で対応しないといけないです。例えば、TailwindCSSの場合sr-onlyというクラスを提供してくれます。
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
字幕提供
マルチメディアコンテンツには字幕、台本または手話を提供しなければならないです。
マルチメディアに対する代替手段を提供しなければならないということです。代替手段は、字幕、台本、手話のいずれかを提供すれば良いです。
明確な指示事項提供
指示事項を感覚に依存してはいけません。例えば、必須項目の場合★だけ表示することです。この時には明確に★の項目は必須ですということを書かないといけないです。
それと、小さいボタンをクリックしてくださいみたいに大きさで依存してることと左のボタンをクリックしてくださいみたいに位置や方向で情報を提供することも良くないです。
上記の項目以外もユーザー入力の操作しやすさ、応答時間調節、光の点滅は危険、自動でコンテンツを切り替えないなどの多い項目があります。
まとめ
WEBアクセシビリティは単純に障害者向けではなく、全てのユーザーを含めることです。
また、WEBアクセシビリティを守るために、自動再生コンテンツなし、キーボードですべての機能にアクセス可能、非テキストコンテンツの代替テキストの提供、論理的なキーボードフォーカス移動の保証、マルチメディアコンテンツのキャプションと明確な指示を提供ことを紹介しました。
但し、この記事は単純な紹介なので、WEBアクセシビリティについて具体的な内容としてはデジタル庁のウェブアクセシビリティ導入ガイドブックをおすすめします。
WEB開発者として、便利はWEB環境構築ためにできることだと思います。より良い環境を作るために頑張りましょう。
今までの説明が皆さんにも分かりやすく説明できていればと嬉しいです。
Discussion