为ASCII艺术字、表情、脑残体提供替代文本_20160411


说明

在图像被广泛使用之前,ASCII字经常被用来组织图片和图形。尽管ASCII艺术字不再常用,但是应该被记住,一旦ASCII艺术字被使用,会给屏幕阅读器用户造成困扰。如果使用了ASCII图像,应该有替代文本来阐述ASCII图像是什么,并且建议添加一个链接跳过ASCII艺术字。

表情非常普遍。表情包含面部表情和其他交流感情的方式的ASCII码。表情将会给屏幕阅读器用户造成困扰。使用“微笑”这样的文本来替代表情会更好。但是如果表情应该有替代文本。在一些上下文、微博、论坛中,一些插件可以将ASCII字作为表情插入到HTML,需要带有替代文本。

脑残体使用广泛的ASCII组合来代替拉丁字母。脑残体已经成为网络文化和俚语的一部分。脑残体经常用来打文字和过滤文邮件。脑残体对视障用户理解内容是种障碍,需要提供替代文本满足成功标准。

注:该项技术有限制,建议开发者提供替代文本。


样例

样例1:以下是惊吓表情替代文本的三种方式。



效果

=8-0 (fright) =8-0 fright

样例2:下面是奥斯汀岩石的脑残体

效果

Au5t1N r0xx0rz

样例3:ASCII的例子,有一个跳过的链接

效果

Figure 1: ASCII 码的蝴蝶! 跳过ASCII图像
                              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
                ~~~~~~~~~

无障碍效果

各读屏、各浏览器的支持效果

测试人:雪怪、河马

争渡、IE11:

例(1):用光标访问,可切到3行,分别朗读为“=8-0 (fright)、=8-0、fright 图形”;
例(2):用光标访问,朗读为“Au5t1N r0xx0rz”;
例(3):用TAB键可访问到一个链接,朗读为“跳过ASCII图像 链接”,用光标访问有三行内容,分别是“Figure 1: ASCII 码的蝴蝶!、跳过ASCII图像 链接、LLLLLLLLLLL”;
永德、IE11:

例(1):用光标访问有三行内容,分别朗读为“=8-0 (fright)、fright =8-0、fright 图形”;
例(2):用光标访问,朗读为“奥斯汀岩石 Au5t1N r0xx0rz”;
例(3):按TAB访问,可切到一个链接,朗读为“跳过ASCII图像 链接”,用光标访问,分成三行,分别朗读为“Figure 1: ASCII 码的蝴蝶!、跳过ASCII图像 链接;
NVDA、IE11:

例(1):用光标访问,朗读为“=8-0 (fright) =8-0图形fright”;
永德、chrome:

例(1):用光标访问可切到三行,分别朗读为“=8-0 (fright)、=8-0、fright 图形”;
例(2):用光标访问,朗读为“Au5t1N r0xx0rz”;
例(3):按TAB访问,会切到一个链接,朗读为“跳过ASCII图像链接”,用光标访问,有三行内容,分别朗读为“Figure 1: ASCII 码的蝴蝶! 、跳过ASCII图像链接;
NVDA、chrome:

例(1):用光标访问,朗读为“=8-0 (fright) =8-0图形fright”;
例(2):用光标访问,朗读为“Au5t1N r0xx0rz”;
例(3):按TAB访问,可切到链接“跳过ASCII图像”,用光标朗读为显示出的文本“Figure 1: ASCII 码的蝴蝶! 跳过ASCII图像" ;
NVDA、Firefox:

例(1):用光标访问,朗读为“=8-0 (fright) =8-0 fright”;
例(2):用光标访问,朗读为“Au5t1N r0xx0rz”;
例(3):按TAB访问,可切到链接“跳过ASCII图像”,用光标朗读为显示出的文本“Figure 1: ASCII 码的蝴蝶! 跳过ASCII图像 ”;
voiceover、chrmoe:

例(1):分别朗读为=8-0(fright)、=8-0、fright,图像;
例(2):朗读为“Au5t1N r0xx0rz”;
例(3)分别朗读为Figure 1:ASC|| 码的蝴蝶!、内部,链接,跳过ASC||图像;
voiceover、Safari:

例(1):分别朗读为=8-0(fright)、=8-0、fright,图像;
例(2):朗读为“Au5t1N r0xx0rz”;
例(3)分别朗读为Figure 1:ASC|| 码的蝴蝶!、内部,链接,跳过ASC||图像;