アクセシビリティって何？ハッシー先生に聞いてみた

アクセシビリティってなぜ大事？

Webサイトを見る方法は、人によってさまざまです。画面の文字を読み上げるソフトで聞いている方、マウスを使わずキーボードだけで操作する方、文字を大きくして見ている方もいます。

たとえば、画像に説明の文章（代替テキスト）がないと、読み上げソフトではその画像が何なのか伝わりません。ボタンに名前がないと、「ボタン」としか読まれず、押していいのか分かりません。見た目には何の問題もないページでも、使えない人がいるんです。

僕は行政や福祉、教育の現場のサイトをつくることが多いので、このことをいつも意識しています。窓口や施設の情報は、本当に必要としている方にこそ届いてほしいからです。そして、こうした配慮は特別な人のためだけではなく、スマホで見る人や年配の方など、みんなの使いやすさにもつながっています。

たとえば、文字と背景の色の差が小さいと、明るい屋外でスマホを見る人にも読みにくくなります。押す場所が小さすぎるボタンは、手が不自由な方だけでなく、電車で揺られながら操作する人も押し間違えます。アクセシビリティを整えることは、だれかのためであり、同時に自分のためでもあるんです。

ツールの使い方

アクセシビリティ簡易チェッカーは、URLを入れるだけで、ページの使いにくさにつながる主な問題を自動でチェックするツールです。

1. URLを入れてチェックする
   調べたいページのURLを入力して「チェック」を押します。試しに、問題の多い見本ページ（W3C）で動きを確かめることもできます。
2. 見つかった問題を見る
   ページをPCとスマホの2つの幅で調べ、見つかった問題を「重大」「重要」「中程度」「軽微」の順に並べて表示します。それぞれ「何が問題か」「だれが困るか」「どう直すか」が日本語で書かれています。
3. 該当箇所を開いて直す
   問題ごとに該当箇所の数が出て、開くとどのHTMLの、どの場所かが分かります。制作会社やサイトの担当者に伝えるときにも、そのまま役立ちます。

入力したURLのページはサーバーから一度だけ読み込み、チェックはお使いのブラウザの中で行われます。結果は保存されません。

このツールのよいところは、専門用語の羅列ではなく、「画面読み上げソフトを使う方が困る」「キーボードで操作する方が困る」というように、困る人の姿が見える書き方になっていることです。サイトの担当者が制作会社と話すときも、「何のために直すのか」を共有しやすくなります。WCAGの必須基準ではない推奨項目には、その旨も添えられているので、優先順位をつけるときの参考になります。

ここがポイント

• 「重大」から順に直す
  全部を一度に直そうとすると大変です。まずは重大・重要の項目から手をつけると、困る人を早く減らせます。
• よく見つかるのは画像・リンク・入力欄
  画像の代替テキストがない、アイコンだけのリンクやボタンに名前がない、入力欄に項目名（label）が結び付いていない。この3つは見つかりやすく、直し方もはっきりしています。
• 見出しは順番どおりに
  見出しは h1、h2、h3 と順に使います。文字の大きさを変えたいだけなら、見出しの階層ではなくデザイン側で調整しましょう。
• 自動チェックは入口と考える
  自動で分かるのは問題全体の一部で、ツールでは目安3〜4割と案内しています。キーボードだけで操作できるかなどは、人の目で確かめる必要があります。ログインが必要なページや、あとから表示される内容もチェックできません。

まとめ

アクセシビリティは、一度で完璧にするものではなく、少しずつ育てていくものだと僕は思っています。まずは今のサイトの状態を知ること。それだけでも、次にやるべきことがはっきり見えてきます。

サイトを新しくするときや、お知らせのページを追加したときなど、節目ごとにチェックする習慣をつけておくと、問題が積み重なるのを防げます。直した後にもう一度チェックすると、件数が減っていくのが目に見えて分かるので、担当者の励みにもなりますよ。

アクセシビリティ簡易チェッカーを使ってみる

自分のチラシやサイトに当てはめるとどうなるか迷ったら、気軽にお問い合わせください。結果の読み方や、どこから直すかの優先順位づけもお手伝いします。