ウェブアクセシビリティのNG対応
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
ミヤです。よろしくお願いします。
今回は、ウェブアクセシビリティに関する雑談会です。テーマを一つ取り上げて、アクセシビリティについて考えたことや感じたことなどを、自由にお話ししていきます。
はい。お願いします。
今回のテーマは、やってしまいがちなウェブアクセシビリティのNG対応です。
はい。これは結構、初学者だったりとか、アクセシビリティとかは全く対応してないですよっていうところだと、割とありがちだなって思うのは、オルトに画像1とか画像2って入ってるとか、あとファイル名をそのまま入れちゃうみたいな感じですかね。
ありますね。すごく。
そうですね。オルトイコール、例えばフラワードットをPNGみたいな。
はい。
そういうのをたまに見るんですけど、これはアクセシビリティとしてはやっぱりオルトの役目を果たせてないので。
そうですね。
そうですね。NG対応ではありますけど、ただやってしまう気持ちもわかります。
確かに。そもそものオルトがどういうものかっていうのをあまり考えないでやると、とりあえずファイル名とかにしてしまいがちなんですよね。
そうですね。とか、あとはなんか画像1、画像2とか、図1とか、あとグラフ1とかもありますよね。
そうですね。
実際問題、何の画像なのかを詳しくわかるようにしなきゃいけないんですけど、何の画像なのかのその判断基準が人によってさまざまというか。
確かに。
本来であればどういう状況なのかが伝わるのがオルトとして必要なんですけど、グラフ1っていうことはグラフっていうことが伝わってるからOKっていうことだったりとか、そういうのもあるかなと思いますね。
そうですね。とりあえずこれは画像ですよというのだけ伝える意味で画像1というふうにも、確かにそれはそうなんですが、その画像は一体何を表現しているのかというところがある方がオルトとしてはいいかなと思いますよね。
そうですね。あとはもうその装飾の画像とかにも全部画像1、画像2って入れちゃうとか、アイコン1、アイコン2ってやっちゃうとか。
そうですね。これもよくやりやすくて、オルトにはすべて何かを入れなければならないと思ってしまって、すべてに適用してしまう。
はい。これはやりがちだと思いますね。
ありそうですね。昔の話なんですが、その採用目的で、キーワードを入れたくて、そのような感じで、すべての画像にキーワードを詰め込むっていうことも昔あったので、
そうするとテキストリーダーで読んでいる方にとっては、突然意味不明な言葉がいっぱい出てきてしまうっていうことになるので、ページの内容を理解することをちょっと妨げてしまうことになってしまうんですよね、これは。
そうですね。これは結構注意必要な部分だなと思います。
画像とテキストのアクセス問題
そうですね。基本的にはオルトは画像であるとか、図が何を示しているのかを伝えることで、理解してもらうっていう位置づけですね。
そうですね。これとちょっと関わってくるんですけど、反対にこう、なんか長い文章とかをバーって打ったものをスクリーンショットとかで画像化したやつですね。それをベタっとサイトに貼って、オルトが入ってないとかも割とあるなと思います。
ありますね。
視覚的に情報が得られる人はその文章の内容がわかるけれど、スクリーンリーダーとかだと画像があることしかわからないとか。
そうですね。よくありがちなのはランディングページとかで、ぱっと見デザインはきれいなんだが、全てが画像でできているのでテキストリーダーで読み込んでいる方にはわからないっていうやつですね。
そうですね。それこそファーストビューとか割とあるかもしれないです。何とかのサービス業界ナンバーワンみたいなバッジとかが画像化されてて、そこにオルト入ってないとその情報はスクリーンリーダーでは欠けちゃうっていう。
はい、そうですね。
これはあると思います。キャッチコピーもありますね。
ありますよね。ここも。
ロゴとかもですね。
そうですね。
こういう文章を画像化してて、オルト入ってない、アリアラベル入ってないってなると、なんかアリアラベルとかアリアディスクリプションとかがないと、やっぱりそのスクリーンリーダーでは情報を得られないので。
はい、確かに。
これはすごいやりがちではあるんですけど、NG対応だなと思ってます。
デザインとアクセシビリティの両立
そうですね。おそらくかつては画像でしかデザイン性を再現できなかった時代の名残も少しあって、なので古いサイトに結構多いんですが、最近だともうコードでいろんなデザイン性も再現できるようになったので、できればコードでCSSで決めるとか、そういったことをすると綺麗に見えるんですが。
そうですね。
全部画像で作ってしまって、ついでにそこの文字も画像にしてしまうという状況ですね。
そうですね。あとデザインっていうお話出てたので、ちょっとデザインつながりなんですけど、結構デザインが綺麗であることを優先してフォーカスインジケーター消しちゃうっていうのもあるかなって思いますね。
ありますね。
出てくるとカッコ悪いとか、そういう理由で見えない、非表示にしちゃう。
そうですね。この枠が邪魔ですとかいうやつですよね。
そうですね。例えばですけど、あの枠の見え方、フォーカスインジケーターの見え方って多分何を使ってるかによって違うと思うんですよ。そのChrome使ってるのかとか、Firefox使ってるのかとか。
そういうブラウザとかでも表示の仕方違うので、なんかそういうブラウザ間での表現の揺れが嫌で消しちゃったりとか、あとは全体的にカッコいいサイトなのに水色の枠が出るのがちょっとカッコよくないからっていうので消しちゃったりみたいのはあるかなっていうんで。
そうですね。
そうですね。チャコウェブも一応デザイン的な意味で消してはいるんですね。
ただ、JavaScriptとかCSSを組み合わせて、黒い枠とか白い枠とかで全体のサイトとあまりデザインが乖離してないものを表示させるようにしてるんですよ。独自のフォーカスインジケーターを作ってるみたいな感じで。
デザインに配慮して消してしまうで止まるとNG対応で、消したのであれば何か代替になるもの、代わりになるものを作るっていうのが必要だなと思います。
そうですね。ある程度見せ方を工夫することもできるよということで、こちらの方面に行ってもらえるとフォーカスインジケーターの機能を残したまま再現できるっていうことになりますね。
そうですね。それだと結構ブラウザ違っても同じように表示されたりするので。
確かにそうですよね。統一もさせられて見るデバイスとかブラウザが変わっても同じように見える。
ここはデザイン綺麗にしたいっていうのはもちろんどこのサイトでもあると思うので、それがダメっていうわけじゃなくてデザインを担保しながらアクセシビリティも担保してっていう方法を取るっていうのが大事かなと思います。
確かにそうですね。さっきほどの2つとやっぱりちょっと繋がりますよね。見せ方を優先してウェブアクセシビリティは排除しがちだけれども、本当はプログラムで今技術的に解消できる方法があるので、その道を探していくといろんな人が使えるサイトが出来上がるっていうことですよね。おそらく。
はい、そうだと思います。いかがですかゆみこさん。何かこれっていうのとかは。
そうですね。これもちょっとデザイン的なところなんですけど、状態とか意味とかを色だけで表現する。
よく分かりやすいのが、最近だとエラー系は赤でオウ系は緑とかあるんですが、赤と緑って実は色格の特性によっては判別がしにくかったりするので、違いが分かりにくいっていうこともあるんですよね。
そうですね。
なので、色だけで区別するというのではなくて、色プラス、例えば点線と実線にするとか、形ですね、丸と三角にするとか、そういった組み合わせがあると、よりいろんな人が判別しやすくなるっていうことになるんじゃないかなと思うんですよね。
そうですね。それは確かに赤と緑の組み合わせって、隙格特性で分かりづらい、見分けづらいみたいなのは言われてると思うんですけど、ただエラーですよみたいな、ダメですよこれっていうその赤とオッケーですよの緑って結構セットで使われるんですよね。
使われてますね。
フォームとかでも、例えばなんですけど、最初フォームの色が全部枠線赤色になってて、入力していくとそれがオッケーっていうことで緑色になってて、全部のフォームの枠線が緑色に変わったら送信できるとかあるんですけど、あれは人によっては本当にどっちも同じ色にしか見えないっていう場合もあると思うので、判断がつかないっていう。
そうですね。そうなんですよね。この辺り、その方の気持ちにならないとなかなか気づくことが難しいところなんですけど、知っておくと、これは分からない人がいるんだっていうふうに気づけるので、この辺りをちょっと配慮できるといいんじゃないかなと思ってます。
はい、その通りだと思います。
これ全部結構あるあるなので。
そうですね。テーマ通りやってしまいがちっていうところで。
そうですね。なので、これはまだありますし、なんか気をつけていかなきゃなっていうのが、私たちもついやってしまうところなので、ちょっとずつでも直していけるといいなっていうところがありますね。
はい。
では、今日はこの辺で終わりましょうか。
はい、ありがとうございます。
はい、お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグチャコウェブラジオをつけて、ぜひXで投稿してください。また概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方はお気軽にメッセージをお寄せください。
次回もお楽しみに。
