アスキーアートガイドライン

(published: May. 2, 2001)

アスキーアートとは

文字や記号を組み合わせて作られた絵をアスキーアートといいます。 所謂顔文字もアスキーアートの一種です。

例1

例えば(^_^)は典型的な顔文字の一種で、 笑い顔を表しています。

例2

次の図は正義の味方H-manが、 悪の刺客Mr. XをZ-beamで射殺しているところを表しています。 アスキーアートを飛ばして[余談]へ 

              Deaaaaad!
                  O
                 /
                /
               /
              /
 Q_ZZZZZZZZZZZZZZZZZZZZZZ
/H          /X
/|          //
#########################

余談

所謂全角文字を組み合わせて絵を作るという手法も勿論ありえます。 しかし全角文字はアスキー文字には含まれないので、 アスキーアートという呼び名はふさわしくなく、 文字絵、あるいはテキストアートと呼んだほうが良いという議論があります。

ここではこういった議論には深く立ち入りません。

アスキーアートの問題点

アスキーアートの一番の問題は、閲覧環境を限定してしまうことです。 音声出力や点字出力といった閲覧環境では全く意図が伝わりませんし、 GUI環境のブラウザでもフォント設定によってはまともに表示されないことがあります。

また、ロボット型の検索エンジンがアスキーアート内部の文字を拾ってしまい、 結果検索者に迷惑をかけるといった事態が起こり得ます。

その意味では画像や音楽、ムービーなどのマルチメディアよりもたちが悪いと言えます。

対策

という訳で、WWW上でアスキーアートを公開するには、

  1. アスキーアートを表示できない環境のために代替テキストを用意する
  2. アスキーアートで使っている文字列を拾ってしまわない為にエスケープの手段を用意しておく

という二つの問題を考える必要があります。

画像やPDF形式に変換する

一番安全なのはアスキーアートを画像やPDFなどの別形式に変換しておくことです。 あとはそのファイルを文書からリンクしたり、 img要素やobject要素で文書中に埋めこんだりすれば良いわけです。

これなら余計な文字列を拾うことはありませんし、 適当な代替テキストを置くことで画像やPDFを開けない環境でもその内容を伝えることが出来ます。

プレーンテキストとして公開する

別形式への変換が面倒だというのなら、 プレーンテキストとしてアスキーアートを公開するのも悪くありません。 検索ロボットの中にはプレーンテキストも検索してしまうものもあるので、 別形式に変換する場合程完全なエスケープは期待できませんが。

尚、プレーンテキストは文書からリンクするだけでなく object要素を使って文書中に埋めこむことも可能です。 例えば、z-beam.txtというプレーンテキストを文書中に埋めこむには次のようにします。 

<object data="z-beam.txt" type="text/plain">
 <a href="z-beam.txt">プレーンテキストを見る</a>
</object>

こうすると、object要素を知っているUAはプレーンテキストを文書中に埋めこみ、 そうでないUAはプレーンテキストへのアンカーを表示します。

代替テキストを用意する

もしやむを得ずHTML文書中でアスキーアートを使うならば、 代替テキストを予め用意し、 アスキーアートに代替テキストへのリンクを併設しておくと良いでしょう。

あるいはtitle属性を使って内容のヒントを与えるのも一ツの手です。 [アスキーアートをスキップできるようにする]へ 

<pre title="H-manがMr.XをZ-beamで射殺しているところ">
              Deaaaaad!
                  O
                 /
                /
               /
              /
 Q_ZZZZZZZZZZZZZZZZZZZZZZ
/H          /X
/|          //
#########################
</pre>

アスキーアートをスキップできるようにする

もしアスキーアートの内容がアイキャッチの様な意味の無いものならば、 アンカーを付け加えてアスキーアートを読み飛ばすことが出来るようにすると良いでしょう。 

<p>
 <a href="#tugi">次の段落へ</a>
</p>
<pre title="H-manがMr.XをZ-beamで射殺しているところ">
              Deaaaaad!
                  O
                 /
                /
               /
              /
 Q_ZZZZZZZZZZZZZZZZZZZZZZ
/H          /X
/|          //
#########################
</pre>
<p id="tugi">
次の段落（以下略）
</p>

こうすると、次の項目へがアスキーアートを読み飛ばし、 次の段落（以下略）へ移動するアンカーとなます。

代替テキストにアスキーアートは使わない

アスキーアートは代替テキストが必要な存在ですから、 代替テキストとしてアスキーアートを使ってしまってはいけません。 これでは本末転倒です。

例えばimg要素のalt属性の値がアスキーアートというのはいけません。 

<img src="smile.png" alt="(^_^)">

この他、title要素の内容にアスキーアートを使うのも良くありません。 title要素の内容はその文書の要約であり、 代替テキストを与えようが無いからです。

色付きのアスキーアートはやらない

時々pre要素内でフォント指定を行い、 色付きのアスキーアートを実現しているケースがあります。 

<pre title="H-manがMr.Xを赤いZ-beamで射殺しているところ">
              Deaaaaad!
                  O
                 /
                /
               /
              /
 Q_<font color="red">ZZZZZZZZZZZZZZZZZZZZZZ</font>
/H          /X
/|          //
#########################
</pre>

しかしpre要素内でフォント指定や画像など、 文書レイアウトに変化を及ぼす可能性のある「タグ」を使うことは禁止されています。 span要素を使い、スタイルシートで色を変えるようにするのは文法上許されていますが、 それでもソースからアスキーアートの内容を予想するのは至難の技です。

色付きのアスキーアートを公開するならば小手先の技は使わず、 始めから画像やPDFに変換すべきでしょう。

まとめ

画像やフラッシュ、スクリプトなど、特殊な技術を使う場合は、 それらを利用できない人の為に代替手段を用意しなければなりません。 アスキーアートも例外ではないということです。

参考資料

  1. ASCII art (Techniques for Web Content Accessibility Guidelines 1.0)
  2. ASCIIアート (ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書)
  3. TEXT ART museum

(May. 3 2001分に戻る[p]) (Short Communication目次[s]) (総合索引[t])

H-man AND NOW
作：Nishino Tatami (ainosato@vc-net.ne.jp)