[粗訳] 目の見えない私が日々直面する「ちょっと困ったWeb」の特徴ワースト5。

※このエントリーは「5 most annoying website features I face as a blind person every single day | The Big Hack」をざっくり翻訳したものです。

私のような目の不自由な人々にとって、Webにアクセスできるか、それとも排除されるかは、アクセシビリティによって決定されます。

ここで、スクリーンリーダーユーザーである私が日々直面しているアクセスできない迷惑なWebにみられる5つの特徴と、それらを修正するための方法を提案します。

スクリーンリーダーって何？

スクリーンリーダーを使えば、目の不自由な人が誰の助けも借りずにコンピュータやスマートフォン、タブレットを操作できるようになります。ほとんどのスクリーンリーダーは、TTS（Text to Speech）エンジンによって画面上のテキストを目の見えないユーザーが理解できる形式に変換します。

ユーザーがタッチジェスチャーやショートカットキーを用いて画面をナビゲートすれば、すべてのテキストが音声で読み上げられます。また点字ディスプレイなど、外部出力デバイスと連携させたりもできます。

では、以下にスクリーンリーダーユーザーとして、私が日常的に遭遇している最も一般的な問題を示します。

1. ラベルのないリンクやボタン

スクリーンリーダーユーザーは、Webサイトをナビゲートしたり必要な情報を見つけるため、ラベルに頼ラざるをえません。

リンクやボタンが正しくラベル付けされていない、あるいは全くラベル付けされていない場合スクリーンリーダーユーザーは必要な情報を見つけることが難しくなります。つまりラベルの付いていないリンクやボタンは、Webをすばやく簡単に、そして独立してナビゲートすることを妨げるのです。

例えば会社概要ページへのリンクのラベルが「ここをクリック」だけではどこにつながっているのか、手がかりが得られません。この場合、「当社についてもっと知りたい」とラベル付けされていれば明確です。

ラベルが適切に設定されていれば、スクリーンリーダーユーザーはリンクやボタンを押す前に音声で内容を確認することができます。つまり目の不自由な人が行き先がわからないリンクやボタンを無駄に押す必要がなくなるということです。

ラベルがつけられていない要素と同様に、説明が明確ではないリンクやボタンにもイライラさせられます。リンクやボタンは「ここをクリック」ではなく、押されたときにどこにつながるのか、明確に説明されなければなりません。

これを押したらどこに飛ばされるのか、ユーザーに推測させたり試行錯誤させないでください。このような体験は訪問者を本当にうんざりさせるのです。

2. 一切の説明がなされないイメージ。

おそらくこれは私がWebを閲覧する際最もよく遭遇する問題です。

画像説明文は「alt text（代替テキスト）」としても知られており、画像に説明を加えることはWebアクセシビリティを向上させるうえで不可欠な要素の一つです。

スクリーンリーダーは、画像の代替テキストを音声で読み上げます。これにより目の不自由な人が画像の内容を適切な形で理解することができます。もし画像に代替テキストがない場合、スクリーンリーダーは単に「image」や「figure」と読み上げるだけで、一切の文脈や意味を伝えません。

画像は多くの場合、貴重な情報を含みます。それゆえ、視覚障害者がこの情報にもアクセスできるようにすることが重要なのです。代替テキストは明確に書かれ、性格な説明が与えられなければなりません。

画像を完全にアクセシブルにすることを確認し、より良い代替テキストを書くためのヒントをご覧ください。

3. 適切につけられていない見出しラベル。

多くのスクリーンリーダーユーザーは、Webを素早くナビゲートするため、見出しなどさまざまなページ上の要素を活用します。特に見出しは素早く効果的に必要な情報を見つけるために最適な要素です。論理的な見出し構造に沿って設定されたH1、H2、H3…タグは、コンテンツの優先順位を決定するために役立ちます。

Webサイトが見出しタグを持っていないということは、スクリーンリーダーユーザーがキーボードショートカットを使った見出しジャンプなどのナビゲーション機能を利用することができないことを意味します。そうなると長いWebページから必要な情報を見つけるため、、タブキーを何度も押したり矢印キーを連打して移動しなければなりません。

見出しはまた、Webコンテンツを視覚的に分割し読みやすさを向上させるためにも役立ちます。

スクリーンリーダーユーザーがWebページをナビゲートするために使用する要素には、他にもリンク、リスト、ランドマークなどがあります。

4. アクセスできないWebフォーム

多くのWebサイトは何らかの目的でフォームを使用しています。それが商品を検索するものであっても、問合せメッセージを送信するものであっても、これらのフォームに正しいラベルがつけられていない、もしくは全くラベルがつけられていなければ、フォームを使用することはできません。

たとえば検索ボックスにラベルが付けられていない場合、スクリーンリーダーのユーザーはそのボックスの目的を理解することはできません。つまりスクリーンリーダーを使用している人は、それを使わない人と同じ機能にアクセスできないということです。

コンタクトフォームは、顧客があなたのブランドやビジネスに連絡を取るための効果的な手段です。しかしスクリーンリーダーユーザーにとって、これらのフォームに誤ったラベルが付けられていることほどイライラすることはありません。

CAPTCHAなど、画像認証のチェックアウトは特に問題です。

音声を聞くオプションが用意されていなければ、手も足も出ません。独立してフォームに記入することができないということです。私はしばしば目の見える人に助けを求めますが、それは誰にでもできることではありません。

5. 読み上げ音声をかき消すメディアの自動再生。

多くの人々は突然再生され始める騒がしい広告を含むウェブページを読み込むことが、どれほど迷惑なことかを知っています。

しかしスクリーンリーダーのユーザーにとって、これはさらに憂慮すべき事態なのです。

ビデオやオーディオが自動的に再生されると、スクリーンリーダーの音声がかき消されてしまい、一時停止や停止ボタンを見つけることが難しくなります。その上これらのボタンにラベルがつけられていなければ、この余計なイライラを生むビデオをすぐに止めることはほぼ不可能です。

このような状況に陥ると、私は大抵そのページから離れます。

どうすれば良いのか。あなたのWebに自動再生されるビデオやオーディオが含まれていないことを確認してください。どうしてもビデオを使いたい場合は、音声をミュートし、簡単にユーザーがメディアをコントロールできるよう配慮してください。

──────────

視力のあるユーザーにとって、これらは些細なことのように見えるかもしれません。

しかし私にとっては誰の助けも借りずにWebにアクセスできるかどうかの問題なのです。

そして、正しく実装されることで大きな違いが生まれるのです。

おまけ。

翻訳はここまで。

スクリーンリーダーユーザーには「あるある」なお話でした。

せっかくなので筆者が普段感じているスクリーンリーダーユーザーを悩ませるWeb要素（というかコンテンツ構造）を思いつくまま並べて見ることにしましょう。

主にニュース系サイトで観察されるものです。

• 記事タイトルと本文の間に共有ボタンや広告などがてんこ盛り

• 記事タイトルと本文が離れ離れ

• さほど長文でもない記事が複数ページに分割されている

• 本文中に広告が挿入される場合、記事の続きがあることが不明確

• 記事の基本情報（掲載日など）がタイトルの前にある。

• 無意味なリンクが多い

Webよ、もっとスクリーンリーダーユーザーに優しくあれ。