Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2018年9月 > ニュースサイトにおける画像の代替テキストについて

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。

ニュースサイトにおける画像の代替テキストについて

アクセシビリティ・エンジニア 辻

私がインターネットを通じて様々なデータにアクセスできるようになって最もうれしかったことの1つに、スクリーン・リーダーを使用してほとんどタイムラグなくニュース記事を読めるようになったことがあります。

近年、主要なニュースサイトのアクセシビリティも向上し、私自身も様々な選択肢の中から自分が読みたい記事を読むことができるようになりました。

たくさんの記事が読めるようになったことはとてもありがたいのですが、最近、ニュース記事に登場する画像の代替テキストが耳について困ることがあります。

本来、記事中に登場する画像の説明を提供する目的で使用してほしい代替テキストが、スクリーン・リーダーの利用者をはじめとした読み手の意図に反して使用されていることが多いからです。

今回はその一例をご紹介したいと思いますが、具体的な媒体名を挙げてその代替テキストの使い方を批判する目的ではなく、記事執筆に携わる方に、自社の記事を見直すきっかけにしていただければと考えています。

任意の文字列が代替テキストになっている例

記事中に画像が登場するたびに任意の文字列が代替テキストとして設定されている例によく遭遇します。

例えば、新商品を紹介するような記事には以下のような文章がよく登場します。

今回発表されたのはエントリーモデルからプロフェッショナルモデルの3機種で、それぞれの特徴は以下の通り。
ihhflWBCMFN1uopV.jpg
発売日: 9月9日
価格: 15,000円
WUqGxt616MbpY9ruXHxRIkVw7yI3ge1n.jpg
発売日: 9月9日
価格: 21,000円
XlCILCVL138gyRPrdWYlirohmOP4DqVy.jpg
発売日: 9月25日
価格: 75,000円

この例では、画像の代替テキストとして任意の長い文字列が読み上げられるのを待つか、その部分を読み飛ばして先に読み進めなければなりません。

記事を読み終えるまでに時間がかかることはもちろん、内容の理解に支障を来す場合もあります。

記事タイトルを代替テキストに設定している例

画像が登場するたびに記事タイトルが何度も読み上げられるニュースサイトも少なくありません。

記事のタイトルが長い場合、記事を読んでいるときに何度もその記事タイトルが読み上げられるので、本文の理解に支障を来す場合もあります。

「画像には代替テキストを設定しなければならないけど、何を設定したらいいのだろう?悩ましいけど締め切りが!そうだ、取り急ぎ記事タイトルなら間違いではないだろう。」と考えながら記事を書いている方がいらっしゃるかどうかはわかりませんが、もしその画像を説明する必要がある場合は適切な情報を設定していただけるともっと記事が読みやすくなるように思います。

画像の前後のテキストが重複して読み上げられる例

記事を読んでいるとき「あれっ、今の文、さっきも聴いたような気がする!」と気になることがあります。

代替テキストに本文と同じテキストが入っている場合、画面上では記事の本文を違和感なく読むことができるとしても、スクリーン・リーダーでは同じ文言が2度読み上げられてしまうのです。

記事が長くなればなるほど、2度読み上げられる文言が記事の理解を妨げてしまうことがあるので、このようなケースでは代替テキストは空(alt="")にしていただく方が良いと思います。

今回は、ニュースサイトで私がよく耳にする問題のありそうな代替テキストの例をご紹介しましたが、これらの多くは改善が難しいものではないと考えられます。

記事の内容がより多くの読者に過不足なく伝わるよう、記事を執筆・編集されている方、ニュースサイトを管理・運営されている方に改善をご検討いただけますと幸いです。

Pick Up