ウェブアクセシビリティとは？人にやさしいウェブデザインを目指そう！
ウェブアクセシビリティは英語でWeb Accessibilityとなります。
ウェブサイトへのアクセス性ということになりますね。
エコロジーはウェブデザインからも測ることができるのです。
でも一体どういうこと？
自分も最初エコロジーとウェブデザインは一体どうつながるのだろうと思いました。
自然をイメージした緑色を基調にしたウェブサイトということなのだろうか？
数年前ウェブデザインのセミナーに参加した時にこのウェブアクセシビリティの話がでて、というかそこで初めてウェブアクセシビリティという単語を知り、そういうことかと合点がいったわけなんです。
ここではウェブアクセシビリティとは一体何なのかということについて具体例と共にお伝えしたいと思います。
目次
ウェブアクセシビリティってなに？
ウェブアクセシビリティとは高齢者や身体に不自由がある人でも、誰もがウェブサイトにアクセスして利用できる利便性を指します。
ウェブアクセシビリティには基準が定められており、国際基準であるWCAG 2.0と日本工業規格の基準であるJIS X 8341-3があります。
インターネットは誰もが利用できますが、その人の年齢や身体的条件によって利便性にどうしても差が出てしまいます。
例えば高齢になると、目の老化により小さな文字など見えにくくなります。
ウェブサイト内の文字が小さいと読むのがとても大変です。
目が見えない人はどうでしょうか？
そもそも使わないのでしょうか？
実際自分はウェブセミナーに参加するまで想像することができませんでした。
けれど、目に見えない人も使います。
音声読み上げソフトをインストールしたり、音声読み上げブラウザを使用することで、ウェブサイト内の文字を読み上げて聞くことができるのです。
また、身体に不自由のない人でも誰もが使いやすいウェブサイトをデザインする必要があります。
すらすら読める、読みやすい、疲れない等、読み手に負担をかけないデザインにする必要があるのです。
具体例
では実際にどのような点に注意すればよいのでしょうか？
いくつか具体例をお伝えしたいと思います。
文字の大きさと行間
文字が小さいと高齢ではなくとも、読むのが大変です。
画面に毎回顔を近づけたり、拡大していちいち読まなければならないというのは、閲覧者に余計な手間と大きなストレスを与えます。
文字の行間も詰まっていると読みづらく、見ていて疲れてしまいます。
ひたすら5行6行と文が続いていても疲れるので、2行3行等ある程度の所で改行を入れる必要もあります。
自分で一度ざっと全体の文章を見てみて、ストレスがかからないか、読みづらくないか確認してみるとよいかもしれません。
文字の色
少し前まで自分は、文字色は全て黒だと思っていました。
なので実際文字の色は黒を使っていました。
けれど白の背景色に真っ黒というのは、コントラストが強くて目が疲れるのです。
実際他のウェブサイトも調べてみると、同じ黒でも少し淡かったり、少しグレーに近かったりするのです。
そして、こちらの方が確かに気持ち読みやすいです。
現在このウェブサイトも使っている黒は2段階弱めの少しだけグレーよりの黒色に変更してあります。
ボタン・リンクの大きさ
文字と同様に、クリックできるボタンやリンクも小さいと操作が大変です。
何度も押したり、間違えて隣のボタンやリンクをクリックしてしまうこともあります。
手先が不自由な人は正確な場所をピンポイントで押すことが難しいので余計に大変です。
誰が操作しても、しっかり押すことのできるサイズのボタン・リンクにする必要があります。
リンク
リンクを貼る際に、”詳細はこちら”と、この”詳細はこちら”自体がリンクになってしまっているケースがあります。
聴覚に不自由のある人が使用する、リンクだけ読み上げて抽出するブラウザでは、”詳細はこちら”という言葉単体ではそれが何なのか理解することができません。
”こちら”だけでなく”こちらの～”等、しっかりと固有名詞等も一緒に記載してリンクにする必要があるのです。
デザイン
トップページを見た瞬間に一目で何のウェブサイトかが分かるようにする必要があります。
ナビゲーションバーがあり、カテゴリー等もしっかりと分けられ、色の配色もテーマにマッチしている。
見やすいデザイン、操作がしやすいデザインで閲覧する側もフラストレーションなくコンテンツを楽しむことができます。
キーボードでの操作性
手が不自由な人はマウスを使わずキーボードのみで操作します。
身体に不自由がなくてもキーボードのみで操作する人はいると思います。
その時にタブキーや矢印のキーのみでも操作ができるようなデザインにする必要があります。
マウスがなくても操作ができるウェブデザインで利用者の負担も軽減することができます。
写真の代替テキスト(alt属性)
写真のaltタグには名前を入れることができます。
名前を入れても最終的には写真しか表示されないのだから意味がないのでは？
と思うかもしれません。
けれど文字読み上げソフトを使用する目が不自由な人は、altタグに名前が入っていると何の写真か認識することができるのです。
また、何かのトラブルで写真が上手く反映されなかった場合にも、ここにタイトルを入れておけばその文字が反映するので、言葉で反映されなかった写真を理解することができます
Google自体もこの代替テキストは推奨しており、実際に写真のタイトルを認識します。
画像文字
文字が直接文字として記載されているのではなく、画像として載っている場合があります。
確かに画像としての文字は、通常の文字より目立つかもしれません。
ですが、これは目が不自由な人が利用する場合、文字読み上げソフトで認識することができません。
本当に画像に置き換えてまで文字を表現する必要があるのか、通常の文字ではダメなのかという部分を再度検討する必要があります。
色
文字色は強調したい部分を黄色や赤等、色を変えて目立たせることができます。
ですが、5色も6色も多様しすぎると、閲覧する側にとっても一体どの色がどのような意味で強調されているのか等理解に苦しむことになります。
色に注意をそらされ、集中力を奪うことにもなってしまいます。
デザインという面でもまとまりがなくなります。
また、白の背景に黄色等も見にくく、明るすぎるので目の負担にもなります。
色はウェブサイトのテーマに合わせて、また閲覧する側に立って配色を考える必要があります。
専門用語・長い言い回し
誰でも理解しやすいというのがウェブアクセシビリティです。
自分が理解しやすいということではありません。
専門用語は自分が理解できるのであって、一般の人には”？”な言葉になってしまうことがあります。
誰もが理解ができる言葉に置き換えたり、その言葉の説明書きを加える必要があります。
また、やたらと長かったり、回りくどい表現になってしまい、最終的に要点がつかめない文章になってしまうケースもあります。
一度文を見直してみて、一番言いたいこと・伝えたいことは何なのかを考え、無駄な文は省き、すっきりと読み手に伝えられる文章に改善する必要があります。
動画字幕
今はYouTubeにたくさんの人が動画をアップロードしていますね。
動画の埋め込まれたウェブサイトやブログもたくさん見ることができます。
これが一体どうウェブアクセシビリティに関係するのでしょう？
普通に動画を見るだけな気がしますが。
けれど聴覚が不自由な人が見る場合、音声を聞くことが難しいです。
人が話していても何を話しているのか理解できません。
ですが、YouTube等の動画には字幕を入れることができます。
字幕を入れることで、音が理解できなくても、文字を追って内容を理解することができるのです。
スマートフォンでの表示
文字・ボタン・リンク等、パソコンでは見やすい大きさになっていても、スマートフォンで見るととても小さくなってしまう場合があります。
今はパソコンよりもスマートフォンで見る人の方が多いのです。
スマートフォンのサイズに合わせて、文字の大きさとボタンの大きさを変え、場合によってはデザインも変えたりして、閲覧者が負担を感じないウェブサイトにする必要があります。
パソコンからだけでなく、スマートフォンからも見やすさを確認する必要があります。
まとめ
ウェブアクセシビリティにおいていろいろな気を付けるべきを書いてみましたが、実際自分がこれ全てできているかというとできていません。
偉そうに書いておきながら申し訳ないです。
どうしても、改善するのが難しかったりする部分もあったりします。
とりわけ、読みやすさや誤字脱字等、見直してもどこか抜けていたり、周りくどかったりする部分があったりします。
デザインや操作性だけでなく、自分自身の文章も改善・向上させていかなくてはです。
日常にバリアフリーがあるようにウェブにはウェブアクセシビリティがあります。
誰にとっても見やすい、使いやすいブログを目指して、日々少しずつでも改善していければと思います。