アクセシビリティに配慮した顔文字、ASCIIアートの代替テキストの提供

 顔文字、ASCIIアートがスクリーンリーダーなどの読み上げで大変なことになることはお察しのとおりかと思いますが、これらをアクセシブルにするための代替テキストの提供方法がW3Cの以下のドキュメントにまとめられています。

 と、いいつつも、実はこれから紹介する方法はブラウザ、スクリーンリーダーなどの支援機器が充分にサポートしていないようです。現時点では、アクセシビリティを確保するためには、ASCIIアート、顔文字を使わないほうがよいようです。

 というわけですので、以下はあくまで参考情報として紹介します。

顔文字

例1 隣接する位置に説明するテキストを配置

 ASCIIアートや顔文字のすぐ隣にそれを説明するテキストを配置します。
[xml]
=8-0(恐怖)
[/xml]
 上の事例では、
 「=8-0」部分がそのまま読まれてしまいますので、この部分がユーザーの混乱を招く恐れもありそうですが、必要最低限の措置としては有効かもしれません。

例2 abbr要素のtitle属性を使用する

 省略語を表すabbr要素のtitle属性を使用します。
[xml]
=8-0
[/xml]
  title属性の読み上げに対応している機器やアプリケーションが十分でないようです。また、abbr要素は略語をマークアップするための要素なので、abbr要素の本来の使い方から外れてしまっている問題もあります。
 

参考
<ul>
  • アクセシビリティ・サポーテッド(AS)情報:H086-1(H086-1: ASCIIアート、顔文字、及びリート語に代替テキストを提供する–顔文字)
  • 例3 画像化し、img要素のalt属性を使用する

     顔文字を画像化してしまい、img要素のalt属性を使用する事例です。
    [xml]
    恐怖
    [/xml]
     画像化してしまっては、あえてテキストで絵的に表現する意味が失われてしまいますが、alt属性をサポートするブラウザやアプリケーションは多いため、有効な方法です。
     

    ASCIIアート

    事例4 スキップリンク

    コード例

    
     さし絵:蝶のASCIIアート
     <a href="#skipbutterfly">ASCIIアートをスキップ</a>
                                                                    LLLLLLLLLLL
                                                                __LLLLLLLLLLLLLL
                                                               LLLLLLLLLLLLLLLLL
                                                             _LLLLLLLLLLLLLLLLLL
                                                            LLLLLLLLLLLLLLLLLLLL
                                                          _LLLLLLLLLLLLLLLLLLLLL
                                                          LLLLLLLLLLLLLLLLLLLLLL
                                                  L     _LLLLLLLLLLLLLLLLLLLLLLL
                                                 LL     LLLLLL~~~LLLLLLLLLLLLLL
                                                _L    _LLLLL      LLLLLLLLLLLLL
                                                L~    LLL~        LLLLLLLLLLLLL
                                               LL   _LLL        _LL   LLLLLLLL
                                              LL    LL~         ~~     ~LLLLLL
                                              L   _LLL_LLLL___         _LLLLLL
                                             LL  LLLLLLLLLLLLLL      LLLLLLLL
                                             L  LLLLLLLLLLLLLLL        LLLLLL
                                            LL LLLLLLLLLLLLLLLL        LLLLL~
                      LLLLLLLL_______       L _LLLLLLLLLLLLLLLL     LLLLLLLL
                             ~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~       LLLLLL
                           ______________LLL  LLLLLLLLLLLLLL ______LLLLLLLLL_
                       LLLLLLLLLLLLLLLLLLLL  LLLLLLLL~~LLLLLLL~~~~~~   ~LLLLLL
                 ___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____       _LLLLLL_
              LLLLLLLLLLL~~   LLLLLLLLLLLLLLL   LLLLLLLLLLLLLLLLLL     ~~~LLLLL
          __LLLLLLLLLLL     _LLLLLLLLLLLLLLLLL_  LLLLLLLLLLLLLLLLLL_       LLLLL
         LLLLLLLLLLL~       LLLLLLLLLLLLLLLLLLL   ~L ~~LLLLLLLLLLLLL      LLLLLL
       _LLLLLLLLLLLL       LLLLLLLLLLLLLLLLLLLLL_  LL      LLLLLLLLL   LLLLLLLLL
      LLLLLLLLLLLLL        LLLLLLLLLLLLL~LLLLLL~L   LL       ~~~~~       ~LLLLLL
     LLLLLLLLLLLLLLL__L    LLLLLLLLLLLL_LLLLLLL LL_  LL_            _     LLLLLL
    LLLLLLLLLLLLLLLLL~     ~LLLLLLLL~~LLLLLLLL   ~L  ~LLLL          ~L   LLLLLL~
    LLLLLLLLLLLLLLLL               _LLLLLLLLLL    LL  LLLLLLL___     LLLLLLLLLL
    LLLLLLLLLLLLLLLL              LL~LLLLLLLL~     LL  LLLLLLLLLLLL   LLLLLLL~
    LLLLLLLLLLLLLLLL_  __L       _L  LLLLLLLL      LLL_ LLLLLLLLLLLLLLLLLLLLL
     LLLLLLLLLLLLLLLLLLLL        L~  LLLLLLLL      LLLLLLL~LLLLLLLLLLLLLLLL~
      LLLLLLLLLLLLLLLLLLLL___L_ LL   LLLLLLL       LLLL     LLLLLLLLLLLLLL
       ~~LLLLLLLLLLLLLLLLLLLLLLLL     LLLLL~      LLLLL        ~~~~~~~~~
               LLLLLLLLLLLLLLLLLL_ _   LLL       _LLLLL
                   ~~~~~~LLLLLLLLLL~             LLLLLL
                             LLLLL              _LLLLLL
                             LLLLL    L     L   LLLLLLL
                              LLLLL__LL    _L__LLLLLLLL
                              LLLLLLLLLL  LLLLLLLLLLLL
                               LLLLLLLLLLLLLLLLLLLLLL
                                ~LLLLLLLLLLLLLLLLL~~
                                   LLLLLLLLLLLLL
                                     ~~~~~~~~~
    <a name="skipbutterfly></a>            

     
     こういうやる夫系はどうするんだろう・・・・。

           ____
         /      \
       /  _ノ  ヽ、_  \
      / o゚((●)) ((●))゚o \  ほんとはVIPでやりたいんだお…
      |     (__人__)    |
      \     ` ⌒´     /
           ____
         /      \
       /  _ノ  ヽ、_  \
      /  o゚⌒   ⌒゚o  \  でもVIPPERはクオリティ高いスレしか相手してくれないお・・・
      |     (__人__)    |  
      \     ` ⌒´     /
           ____
         /⌒  ⌒\
       /( ●)  (●)\
      /::::::⌒(__人__)⌒::::: \   だからニュー速でやるお!
      |     |r┬-|     |
      \      `ー'´     /
    

     

    参考
    <ul>
    
  • アクセシビリティ・サポーテッド(AS)情報:H086-2 (H086-2: ASCIIアート、顔文字、及びリート語に代替テキストを提供–スキップリンク)
  • 例5 画像化し、img要素のalt属性を使用する

     ASCIIアートを画像化してしまい、img要素のalt属性を使用する事例です。
    [xml]
    だからニュー速でやるお!と言っているやる夫
    [/xml]
     画像化してしまっては、あえてテキストで絵的に表現する意味が失われてしまいますが、alt属性をサポートするブラウザやアプリケーションは多いため、有効な方法です。
     

    (2014/12/6追記)例6 figure要素とWAI-ARIAのrole属性を使う

    WAI-ARIAのrole属性を解釈できるユーザーエージェントであれば、ASCIIアートを画像に相当するものであると、解釈させることもできるようです。
     詳細は、@momdo_ さんの以下のブログをご参照ください。

    関連エントリ

    ウェブアクセシビリティガイドラインについて
    代替テキスト
    リンクのはり方