要約

テキストベースの画像を識別して説明することで、その中に含まれるテキストを支援技術が無視したり読み上げようとしたりしないようにします。

テクニック

例

例 1 — 代替テキスト付きの ASCII 描画

aria-label属性は代替テキストの説明を提供します。この属性は、 img要素でのみ許可されるalt属性と同じ目的を果たします。

<pre
    role="img"
    aria-label="Winnie the Pooh with Hunny pot">
    _
 __( )_
(      (o____
 |          |
 |      (__/
   \     /   ___
   /     \  \___/
 /    ^    /     \
|   |  |__|_HUNNY |
|    \______)____/
 \         /
   \     /_
    |  ( __)
    (____)
</pre>
例 2 — 代替テキスト付きの絵文字
<span role="img" aria-label="shrug">¯\_(ツ)_/¯<span>
例 3 — 編集テキスト
<p>In the case of
   <span
         class="redacted"
         role="img"
         aria-label="redacted text">_____<span>
   it is clear that the crime of
   <span
         class="redacted"
         role="img"
         aria-label="redacted text">_____<span>
   …
<p>
例 4 — 説明付きのASCII描画

aria-describedby属性は、ASCII 画像の説明を提供するために使用されます。

<pre
    role="img"
    aria-label="Skeleton in graveyard"
    aria-describedby="skeleton-desc">
           _..--""---.
          /           ".
          `            l
          |'._  ,._ l/"\
          |  _J<__/.v._/
           \( ,~._,,,,-)
            `-\' \`,,j|
               \_,____J
          .--.__)--(__.--.
         /  `-----..--'. j
         '.- '`--` `--' \\
        //  '`---'`  `-' \\
       //   '`----'`.-.-' \\
     _//     `--- -'   \' | \________
    |  |         ) (      `.__.---- -'\
     \7          \`-(               74\\\
     ||       _  /`-(               l|//7__
     |l    ('  `-)-/_.--.          f''` -.-"|
     |\     l\_  `-'    .'         |     |  |
     llJ   _ _)J--._.-('           |     |  l
     |||( ( '_)_  .l   ". _    ..__I     |  L
     ^\\\||`'   "   '"-. " )''`'---'     L.-'`-.._
          \ |           ) /.              ``'`-.._``-.
          l l          / / |                      |''|
           " \        / /   "-..__                |  |
           | |       / /          1       ,- t-...J_.'
           | |      / /           |       |  |
           J  \  /"  (            l       |  |
           | ().'`-()/            |       |  |
          _.-"_.____/             l       l.-l
      _.-"_.+"|                  /        \.  \
/"\.-"_.-"  | |                 /          \   \
\_   "      | |                1            | `'|
  |ll       | |                |            i   |
  \\\       |-\               \j ..          L,,'. `/
 __\\\     ( .-\           .--'    ``--../..'      '-..
   `'''`----`\\\\ .....--'''
              \\\\                           -nabis  ''

</pre>
<p id="skeleton-desc" hidden="">
   A skeleton is posing next to a grave marker …
</p>

よくある質問

空欄を埋めるフィールドはテキストベースの画像ですか?

はい、回答を記入する場所を示すために下線を使用するのは、テキストベースの画像の一種です。これらのフィールドが識別されていない場合、通常、回答が必要であることや回答の長さがユーザーにはわかりません。

フィールドの代替テキストを使用して、予想される入力内容を説明できます。

たとえば、自由形式の入力フィールドは次のように表現できます。

<p>The US capital
   <span role="img" aria-label="answer field">__________<span>
   is located on the Potomac River.</p>

特定の文字数を期待するフィールドは次のように表現できます。

<p>The quick brown 
   <span role="img" aria-label="answer field - 3 letters">_ _ _<span>
   jumped over the lazy dog.</p>

理想的には、出版社はテキスト入力にネイティブ HTML フォーム フィールドを使用すべきですが、デジタル版で印刷版を正確に複製する必要がある場合に、これが常に可能であるとは限りません。

解説

「ASCII アート」という名前は、一般的にテキストベースの画像を表すために使用されますが、そのようなアートワークが ASCII セットの印刷可能な文字のみで構成されているわけではありません。最新のコンピューターで Unicode がサポートされているということは、Unicode プレーンのすべての印刷可能な文字が使用可能になっていることを意味します。

テキストベースの画像の要件は、ラスター画像やベクター画像とほぼ同じですが、実装が若干異なります。重要な違いの 1 つは、テキストベースの画像は、デフォルトでは周囲のテキストと区別できないことです（つまり、JPEG や SVG のように、別の形式ではなく、固有のタグもありません）。

一連の文字がテキストベースの画像を表すことを識別するには、画像の周囲のタグに、値が「 img 」である ARIA role属性を追加します（例 1を参照）。テキストベースの画像は、レイアウトを維持するためにpreタグで囲まれることがよくありますが、たとえば、1 行の画像はspanタグで囲まれることがあります。

テキストベースの画像をロールで識別しない場合、支援技術は画像に含まれるテキストを読み上げようとします。句読点で構成される画像の場合、ユーザーには何も読み上げられない可能性があります（一時停止のみが聞こえる場合があります）。英数字を含む画像の場合、文字が読み上げられるときにユーザーには意味不明な内容が聞こえる場合があります。

画像が特定されると、要件は他の画像の場合と同様になります。代替テキストは通常必須ですが、 img elementsでのみ許可されるため、 alt属性で指定することはできません。テキストベースの画像の場合、 aria-labelまたはaria-labelledby属性を使用して代替テキストを指定できます（例 1を参照）。

複雑な画像の場合、 aria-describedbyまたはaria-details属性を使用して説明を提供できます（例 4を参照）。画像の説明の詳細については、画像の説明ページを参照してください。

テキストベースの画像のコントラストの問題を考慮することも重要です。WCAG では画像に十分なコントラストがあることは厳密には要求されていませんが（画像に実際の文字が含まれている場合を除く）、テキスト文字を使用すると、画像の作成に使用されたテキストと画像が表示される背景とのコントラストを、製作者が制御できます。十分なコントラストを使用することで、読者が画像を認識できるようになります。

関連リンク