webデザイナーが気をつけるべきアクセシビリティ

アクセシビリティとは？

アクセシビリティとは、そのまま訳せば『どれだけアクセスしやすいか』という意味です。
webサイトに関するアクセシビリティとは、障害者や高齢者、または使用するブラウザやOSなどのどんな利用環境でも問題なく利用できるかということです。

またそのようなWebサイトを”アクセシブルなWeb”といったりします。

SEOでの利点

アクセシビリティという言葉はSEOというよりはIT全般の言葉として使われますが、あらゆる環境やユーザーに配慮されたサイトであることは検索エンジンも評価の対象として使用します。
例えば、画像などにalt属性を設定し代替えテキストを設置すると、音声ブラウザでの読み上げによってページの内容が理解できるようにようにするなどのユーザーに対するアクセシビリティですが、検索エンジンに対しても正確な情報を伝えることになります。

ユーザーに対するアクセシビリティですが結果として検索エンジンの評価にもつながりSEOの向上にもつながります。

視覚障害者に対するアクセシビリティとは？

音声ブラウザを使用すると『/』は分数で読み上げられてしまいます。
そのため日付などの『2016/12/20』などの日付は『年』『月』『日』の漢字を使用し、『2016年12月20日』と記述すると良いです。
また期間などを『12月20日-12月22日』と表記すると『-』の部分を『から』と呼んでくれないこともあるので『12月20日〜12月22日』のように『〜』を使用した方が良いです。

英単語は全角で書くとアルファベットを１つ１つよみあげられてしまう可能性があります。
また1km、1g、などは単位ではなくアルファベットとして認識して読み上げられる可能性があるので1キロメートル、1グラムのようにカタカナでの表記が良いと思います。
見出しタグはとても大切です。音声ブラウザでは、読み飛ばし機能のための目印になるのでSEOの基本ルールを守って利用するようにしましょう。
音声ブラウザは、ページの全体を読み上げますが、見出しタグがあると、最初に見出しだけを読んで、ユーザーにページの構成を伝えたりする機能があります。

また、見出しタグを適切に使用することは検索エンジンにとってもページの構造を把握するために必要なことです。
単語の中にスペースが入ると音声ブラウザが読み間違えることがあり性格な情報が伝わらない可能性があるので単語ないにスペースが入らないよう気をつけましょう。
機種依存文字を使用すると文字化けを起こして、音声ブラウザに理解されず呼んでもらえないことがあります。
アスタリスク『＊』や米印『※』などは音声ブラウザが認識できないことがあるので『注』で記述すると良い。
画像やリンクにある『戻る』という言葉だけではどこに戻るのかがわかりずらいので、『前のページに戻る』『トップページに戻る』など戻る場所がが明確になるようにすると良い。

同様に『詳しくみる』なども『〇〇について詳しくみる』などの表記をするとわかりやすい。
タイトルが未記入だと音声ブラウザのユーザーにはURLが表示されてしまい内容が把握できないので、タイトルは本文の内容がわかりやすいものを使用する。

Webで表示するイメージ画像は、その画像の内容を説明する代理のテキストをつけるべきです。
音声ブラウザはalt属性を読み上げるので、代替えテキストがないと音声ブラウザが
読み上げることができず読み飛ばしてしまい視覚障害者に内容が伝わりません。
altテキストをつけることによって、音声ブラウザが読み上げてくれるようになるので画像のaltには画像の内容を記述することが必要です。

文字色と背景のコントラストの差を大きくすると良いと思います。
視力の弱い人や高齢者は、明度差が小さいほど読みにくくなります。

フォントサイズはブラウザの設定で文字を大きく表示されるように設定できるが、CSSでフォントサイズを絶対指定すると文字サイズの変更が効かなくなるので弱視者や高齢者が文字を読み上げれない。

視覚障害者は右クリックを禁止されていることを把握しにくいので右クリックを禁止しない。
色覚障害者は色の区別が苦手・困難です。
色をはっきり区別するために柄をつけたり色の名前をつけて区別しやすいようにすることが必要です。

聴覚・身体障害者に対してのアクセシビリティ

手が不自由だったりするとスクロールが困難になります。
スクロールが長くなりすぎないようにコンテンツの内容を改善したり、「上矢印」「下矢印」キーによる画面スクロール操作できるようにするなども必要です。
小さいクリックボタンなども不便なので押しやすいボタンにするためクリック範囲を広げる必要があります。

フォームの入力は、障害者だけではなく初心者、
高齢者には困難なものです。そのため、入力時間などを
制限したりするのはやめたほうが良いでしょう。
入力エラーなどがでたときに前画面に
戻れるようにしておくことも大切です。

入力済みの内容が消去されてまた一から入力するのは大変です。
障害者の多くはフォームの入力が困難な場合が多いです。

また入力についての指定ですが半角・全角などの指定はしない方がいいかなと思います。初心者・高齢者・障害者は入力種をまちがうことがあるので自由入力が親切です。

初心者・外国人・認知症などの人にわかりにくいコンテンツを作成する場合、イラストや図・動画や音声などを使い直感的に内容を理解できるようにすると良い。
言葉がわからなくてもイラストや動画などでなんとなく伝わることもあると思います。

先ほど視覚障害者に対するアクセシビリティでは画像にalt属性で代替えテキストを入れ音声ブラウザで認識してもらうというものがありましたが、
聴覚障害者の方はその音が認識できないため、音声情報にはテキストをつけるなどが必要になってきます。

その他

・対応している言語
日本の人だけがwebサイトを見ているわけではないので、文章がなくても内容がわかるように気を配りたいですね。

イラストや写真などを使用し、言葉がわからなくても伝わるようにすることも必要だと思います。

・リンクを別タブで開かない
リンクを別タブで開くとキーボードで『前のページに戻る』動作ができません。
別ウィンドウで開くものはある程度サイト内でルール化する方が良いでしょう。（広告やPDFのみ別ウィンドウで開くなど）

・通信速度
高速回線が普及していますがすべての人が利用しているわけではありません。
通信速度が遅い環境ではサイトの読み込み自体が困難になったりするので、画像やファイルなどの容量をできるだけ軽く必要があります。

アクセシビリティ適合をチェックする

アクセシビリティの適合度合いをチェックできるツールがいろいろあります。
チェックしたいページのURLを入力するだけで改善した方が良いテキストやHTMLの行数なのを教えてくれて、altが設定されていない場合やフォントの大きさなども適切かどうか調べられます。
興味があれば一度チェックしてみてはどうでしょうか？

まとめ

今回調べながらこの記事を書いていましたが自分ができていない部分もたくさんあるし、初心者や高齢者、障害によっても必要なことが
違うということがわかりました。
すべてのことに配慮することはむずかしいですが、できるかぎり配慮する必要があると思います。
webアクセシビリティの改善を行うことにより検索エンジンによっての評価も高くなるため、少しでも対応できたら良いなと思いました。

マーケティングでお悩みでしたら、
Bigmacにお任せください。