要約

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

テクニック

例

例 1 — 代替テキスト付きのアスキーアート

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 — 説明付きのアスキーアート

aria-describedby属性は、アスキーアートの説明を提供するために使用されます。

<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の文字コードセットの印刷可能な文字のみで構成されているとは限りません。最新のコンピューターではUnicodeがサポートされており、Unicodeのすべての印刷可能な文字が使用できることを意味します。

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

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

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

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

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

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

関連リンク