おすすめ情報

おすすめ情報

2016年12月20日

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

accessibility-that-web-designers-should-be-aware-of

アクセシビリティとは?

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

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

SEOでの利点

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

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

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

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

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

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

文字色と背景のコントラストの差を
大きくすると良いと思います。
視力の弱い人や高齢者は、
明度差が小さいほど読みにくくなります。フ
ォントサイズはブラウザの設定で文字を大きく表示されるように
設定できるが、CSSでフォントサイズを絶対指定すると
文字サイズの変更が効かなくなるので
弱視者や高齢者が文字を読み上げれない。

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

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

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

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

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

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

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

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

その他

・対応している言語
日本の人だけがwebサイトを見ているわけではないので、
文章がなくても内容がわかるように気を配りたいですね。
イラストや写真などを使用し、
言葉がわからなくても伝わるようにすることも必要だと思います。

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

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

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

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

まとめ

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

このエントリーをはてなブックマークに追加
メルマガ登録