テキストの代替手段/Text Alternatives

Page Top

Table of Contents

はじめに

非テキストコンテンツ、つまり、画像やボタン、動画、ログイン時に表示されるキャプチャ(CAPTCHA)などをいいます。

目の不自由な人はスクリーンリーダーを使ってWebを見ます。
ただし、スクリーンリーダーはテキストしか読み上げません。

ハワイの写真を表示したあと、「休みはここで遊びます」と書いたところで、画像が見れないため「どこで遊ぶのか」わかりません。
ハワイの写真に「青い海が一面に広がったハワイの風景」と書かれていれば、目が見えない人も情景が浮かびます。

ここでよくある失敗が、ハワイの写真の代替テキスト文章を「ハワイのイメージ」など、短絡的な文章で終わってしまうことです。

代替テキストを書いた前後に続く文章と意味がつながるように、代替テキストを書くにもスキルが必要です。
またalt属性に書く文字は、125文字以下にします。一般的なスクリーンリーダーはそれ以上の長さになると、読み上げを停止します。

代替テキストの力

テキストの重要な特徴の1つは、適応性です。テキストは画像を検索可能にし、検索エンジンが画像の代替テキストにインデックスを付けます。

  • スクリーンリーダーはテキストをオーディオに変換する
  • スクリーンリーダーはテキストを点字に変換する
  • テキスト読み上げソフトウェアはテキストを音声に変換する
  • テキストは音声認識ソフトウェアを使い、話したりアクセスしたりできる
  • 翻訳ソフトを使用して翻訳できる
  • ツールを使用し、テキストを簡略化して読みやすくすることができる
  • テキストは外観を失うことなく拡大できる
  • テキストの色を変更して読みやすくすることができる

このように、目の不自由な人も、そうでない人も、意識的に、無意識に便利に使えるようになります。

HTMLの<img>タグ

<img>タグには、テキスト属性があります。テキスト属性の詳しい解説は、W3Schoolsのimgタグのリンクを見てください。

現在よく使われているのがalt属性です。他にも画像についての詳細説明用URLリンクを記述できるlongdesc属性もありますが、まだ各種ブラウザで対応されていないようなので省略します。

alt属性

例：
見出しタイトルにアイコンがついているイメージ
<h1>
　<img src="maru.png" alt="">
　はじめに
</h1>

見出しのアイコンは、装飾です。意味をなさないのでalt属性は空欄にします。

PDF画像リンクへのイメージ
<a href="music.pdf">
　クラシック音楽祭プログラム
　<img src="pdficon.gif" alt="PDF形式" />
</a>

リンクテキストの内容をalt属性に書き込むのではなく、”画像の意味”を書きます。

縦棒グラフのイメージ
縦棒グラフ。出典：国連、世界人口の見通し。
<img src = "chart.png" alt = "1950年以来、発展途上国の人口増加は先進国の5倍の速度で増加しています。下記参照" />
<p>
1950年には、発展途上国と先進国の人口増加率は約2.5：1でした。それ以来、比率は着実に増加しています。今日、その比率は約6：1です。2050年までに、その比率は9：1に増加すると予想され、先進国はほぼゼロの人口増加を維持しますが、発展途上国では600％近く増加します。
<p>

グラフやチャートをイメージで表現するときは注意が必要です。alt属性は125文字以内に収める必要があるため、画像の下に、”補足説明”がある親切です。

画像のalt属性にはグラフの概要を、そして続きとして”下記参照”というテキストを追加し、続けて付け足すような文章を追加します。

ASCIIアートとリートスピーク(leetspeak)

ASCIIアートは、文字や記号を使ってグラフィックを表現する手法です。
顔文字や、メールの署名、掲示板で感情や状況を文字のみで伝えるために、現在でも世界中で使われています。

リートスピーク(leetspeat)は英単語の一部に数字や特殊文字を含ませ、標準の英単語から置き換えて使用します。
たとえば、youをuに。applesをapplezに。Warezという単語をW@rezやW4r3zに。

英語に韻を踏んだり、似た発音のアルファベットに変え、遊び心であったり、入力スピードを上げる目的であったり、IT初心者のWebサイト訪問を避けるための検索エンジン回避を目的になど、今も使われています。

しかし、目の不自由な人がスクリーンリーダーでアクセスした場合、非常に混乱をしてしまいます。

必須ではありませんが、巨大なアスキーアートを掲載するときなどは、スキップリンクを挿入することをお勧めします。

絵文字

　(^▽^)　(#｀Д´)　(Ｔ▽Ｔ)　Σ(゜Д゜ノ)ノ

メール署名

::::::／＼::::::　　郵便番号　000-0000
::::／／＼＼::::　　住所　　　〇〇〇県〇〇〇市〇〇〇〇〇〇
::／／田田＼＼::　　電話番号　000-000-0000
／／┌─┬┐＼＼　　名前　　　〇〇〇〇〇〇〇〇〇〇〇〇〇〇
￣││ o││∥￣　　メール　　aaa4aaa.aaaa
爻││_ ││∥彡 　
""'""'""'""'""'"'""" '" '" "

ASCIIアート使用例

※下の例では、実際のASCIIアートを画像化しています

図1：城のASCIIアート画像。

<a href = “＃skip-castle”> ASCII画像をスキップ</a>　

引用：最終更新 2021年5月18日 (火) 18:31 Wikipedia

CAPTCHAとスパムボット

「スパムボット」がWebサイトへ侵入するのを防ぐための一般的な手法として、 CAPTCHA があります。
表示された画像に書かれたテキストを入力する、これは人間だけが実行できます。

CAPTCHAはスパムボットを撃退するのに効果的ですが、目の不自由な人には障壁です。

CHAPTCHAと書かれたキャプチャイメージ

CAPTCHA はスパムボットを撃退するのに効果的ですが、一部のユーザーには障壁です。
目の不自由な人は、CAPTCHA画像の文字を見ることができないため、目の見える人の助けがなければ入力ができません。

またセキュリティ上、CAPTCHA画像に代替テキストを含めることはできません。
そこでこの問題を回避するため、音声出力を利用できるようには設定可能です。

目の見えない人のために、音声ファイルを用意し、音声でCAPTCHA画像のテキストの意味を聞きます。

キャプチャ画像を文字と音声データで入力する方法をcaptchas.netから引用したスクリーンショット
引用：captchas.net

ここで、今度は耳の不自由な人はアクセスできなくなります。
そのため、目と耳が不自由な人から連絡を取れる手段を提供する必要があります。
例えば、Webサイト管理者へ直接メールで連絡を取る、などの手法を記載しておくことです。

CAPTCHAの進化

この記事で紹介した、画像を読み取る手法はすでに古い技術です。
技術の進化で、今ではこの画像文字をOCRで読み込むことができるようになりました。そこでより複雑なテキストを表示するようにしたところ、今度はOCRで読めないようなCAPTCHA画像は人間が読めなかったりしたため、今ではreCAPTCHAという手法が主流です。

reCAPTCHAの入力画面のイメージ

2021年度現在、すでにこの手法もセキュリティが弱くなってきているようですが、安全に、簡単にWebサイトにアクセスできるよう考慮しながら技術も革新し、すべての人がWebサイトの情報を取得できるような手法を提供していくようにします。

補足：Google reCAPTCHA技術のページへのリンク

google 広告