ブログでも最低限守ってほしいWebアクセシビリティ４つ

こんにちは！「Web Accessibility Advent Calendar 2016」の2日目は、北海道でフリーランスのWeb屋をしているNorth-Geekの記事になります。見ていただいている方、ありがとうございます。
www.adventar.org

まずは、Webアクセシビリティについてゆるりと解説し、ブログで対応してほしいWebアクセシビリティを紹介していきます。

さて、本日はWebアクセシビリティについてのお話になります。

ぼくは今までWebアクセシビリティに準拠するWeb制作に多く携わってきましたので、ブログでもぜひ取り入れてほしいWebアクセシビリティのノウハウを紹介していきたいと思います。

Webアクセシビリティとは？

今更ですが一応、Webアクセシビリティについて解説します。

Webアクセシビリティとは？端的に言いますと、様々なユーザーがWebを利用しているため、色んな人に配慮してWebサイトを作成しましょう。という概念のもとにJISによって規格化されたものです。
waic.jp

現代の社会においては、「様々なユーザー」が「様々なデバイスやツール」で「様々な利用状況」で、Webを利用しているため、Webアクセシビリティはこれからもっと必要になってくるのではと思います。

様々なユーザーとは

では、様々なユーザーとはどういった方を対象にしているのか。

一般的には障害者への配慮と紹介されている方が多いようですが、障害者だけではなく高齢者はもちろん、健常者にとっても配慮をする必要があります。

• 障害者（手、目、耳、etc...）
• こども
• 高齢者
• 機械、ロボット
• etc...etc...

あれ？機械やロボットも？と思いますよね。例えば、目が聞こえない方は「音声読み上げソフト」などを利用して、Webページを閲覧することがあります。そのため、障害者だけではなく、様々なユーザーのためにWebアクセシビリティに準拠したWebサイト制作が重要というわけです。

様々なデバイスやツール

様々なデバイスとは一般的にPCとスマホ、そしてタブレットを利用して、Webブラウザで閲覧している方が多いですが、そのほかにもいくつかデバイスやツールがあります。

• タッチスクリーン
• 音声読み上げソフト
• キーボードがないデバイス
• マウスがないデバイス
• 多様なディスプレイサイズ
• etc...etc...

様々な利用状況

単純に電波が悪いなどもそうですが、利用状況は本当にたくさんありますね。

• 屋外で日差しが眩しいとき
• 眼鏡やコンタクトをしていないとき
• 怪我をして上手くマウス操作ができないとき
• etc...etc...

すべての状況に配慮をすることは難しいですが、様々な利用状況があるということにも配慮しなくてはなりません。

「利用者」✕「デバイス」✕「利用状況」

すべてに配慮することは不可能に近いですが、この３つのことに配慮してWebサイトを制作し、このような利用環境下でどれだけ利用できる度合いが高いかということが重要というわけです。つまりそれがWebアクセシビリティに準拠したWebサイトになります。

【本題】最低限実践してほしい4つの項目

ブログでも最低限Webアクセシビリティを実践してほしい項目を紹介致します。

画像のalt

altは画像が表示されない場合の代替テキストになります。

Webアクセシビリティにおいてのaltは、音声読み上げソフトが読み上げてくれたり、画像を表示しない設定でWebを閲覧している方のために必要と言われています。そのため、以下のことに配慮する必要があります。

• 画像に含まれている文字はすべてaltにも代入する
• 意味のない画像（装飾アイコンなど）は、altを空にする（alt=""）
• 写真なのか、ロゴなのか、グラフなのか明確に記載する
• グラフの画像には、その後にテキストでも同様の情報を記載し、altはその場所を示すようにする。例えば「◯◯のグラフ。詳細は直後の表を参照」など。

音声読み上げソフトを利用されているユーザーにとっては、画像のaltを正しく入力するだけでも世界が変わると言われているほど重要なことなのです。

ついaltは適当に入れてしまいがちですが、画像と同等の情報を入れてあげる必要があります。アイキャッチ画像など意味の持たない画像は空で良いと思いますが、グラフ等にはしっかり入力することをオススメします。

文字色

色についてのお話です。

色弱の方にとっては画像のような文字色が薄い場合に、読めない方が多くいます。例えば、色々なブログで見るこのような赤文字は（テキストテキストテキストテキスト）非常に読みづらいです。目になにかしらの障害がある方は、見づらいどころか見えないことがあります。

画像の色はブログ等でよく見かける糸ですが、すべてWebアクセシビリティでは準拠していない文字色とされるため使用しないようにしましょう。

それに、色弱でなくてとも、一般的に読みづらいですよね。もし赤文字を仕様したいのであれば最低限これくらいの色（テキストテキストテキストテキスト）にしましょう。

以前、赤文字についての記事を書きましたので、気になる方はぜひ下記の記事をを読んでみてほしいです。
www.north-geek.com

文字間の空白

文字間の空白に空白が含まれていると、音声読み上げソフトを利用時は正しく読み上げることができません。

画像のように、「住　所」「電　話」と、真ん中にスペースが入っていることがよく見かけますね。このような場合、音声では下記のように読まれてしまうことがあります。

• 「住　所」→「じゅう　ところ」
• 「電　話」→「でん　はなし」

と、読まれてしまう可能性があります。伝えたいことが伝わらない恐れがあるため、文字の間に空白を挿れず、CSSでバランスをとって表示させましょう。

letter-spacing: 10px;

見出しタグ

ブログに見出しを使いすぎると「見苦しい」といったことを聞いたことがありますが、それば全くの逆です。適宜見出しを使わばければ、ツールやソフト、またgoogleのクローラーにとってはページの構造を把握することができなくなってしまいます。

例えば音声読み上げソフトは、ページの一番上から一番下まで音声をひたすら読み上げますが、見出しがあると、最初に見出しだけを読んで、ユーザーにページの構成を伝えたりする機能があります。

また、好きな見出しにジャンプして、そこから読み上げることができるため、ユーザーが常にページの一番上から読むことを防ぐことができます。

以前、見出しと目次の重要性という記事を書いたので、興味がある方はぜひ読んでみてください。
www.north-geek.com

さいごに

いかがでしたでしょうか。

今回紹介した項目くらいは、最低限行うとそれなりにWebアクセシビリティ配慮したWebページになるかと思います。また、googleのクローラーにとっても良いため、SEOに強くなるとも言えるでしょう。

すべて対応できなくても、少しでも対応してくださる方が増えたら何よりです。