アクセシビリティ：原稿作成時にもできること

小森です。

昨年、株式会社NTTデータからリリースされたHARELというサービスを試してみました。
URLを入れると、オンラインでアクセシビリティチェックを行ってくれるツールです。
http://harel.nttdata.co.jp/

画面は、アクセシビリティWikiのもの。診断結果はお恥ずかしいものですが、こんな感じで「良い」「悪い」「要確認」の項目を、「晴れ」「雨」「曇り」のメタファで表現しています。
（PukiWikiというツールの特性でしかたない部分もあるのですが、できるところから少しずつ直しています...。）

さて今回の記事では、このとき出たチェック項目のいくつかが面白いと思ったので、紹介したいと思います。たとえば以下。

• 見出しテキストの文頭（10文字）が重複しています（解説）
• 見出しテキストが長すぎます（解説）
• リンクテキストが短い（全角2文字以下）です（解説）
• リンクテキストが長い（全角30文字以上）です（解説）
• リストに8つ以上の項目（li要素）があります（解説）
• 読み上げ不可能な記号ですが、意味を伝える必要がないか確認して下さい（解説）

詳しくはリンク先を参照いただくとして、私のほうでも簡単に解説を加えますと、下記のような背景があります。

• 視覚障害者の方は見出しやリンクのみを飛ばし読みをするので、文頭が重複していたり長いテキストだと瞬時に区別がつきにくい
• また極端に短いと、リンクの場合はリンク操作する前に読み上げが終わってしまうので、リンクであることに気づかなかったり、リンク操作そのものができなかったりする
• 俗にマジックナンバー7と言われますが、人間が短期的に覚えていられる項目数は7つ程度まで、という説があります。つまり、それ以上になるとグルーピングを再考したり、階層化したほうがよい
• 「○」「×」「※」などの記号はHomePageReaderのデフォルト状態では読み上げられません。記号に意味を与えている場合は、別の手段を考える必要があります

アクセシビリティ対応にはHTMLマークアップを改善すればよい、と単純に考えがちですが、それ以前の、こういったラベリング設定、原稿作成時にもできること・改善できることが案外重要だったりします。

音声ブラウザで聞いてみて、すーっと情報が入ってくるのかどうか？認識しやすいのかどうか？
今一度そういった視点で自分のWebサイトを見直してみるとよいかもしれません。

余談：
あと文脈から外れるので余談扱いですが、下記も面白いと思いました。20px未満って、アイコンとかでよく使うのでデザイナーからすると結構微妙ですね...。もう少し大きくしたほうがいいのかも。

• リンク画像が小さい（20px×20px未満）です（解説）