Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

H86: Fornecer alternativas em texto para arte ASCII, emoticons e leetspeak

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Descrição

Antes de os gráficos serem largamente utilizados na Internet, os caracteres ASCII eram, muitas vezes, dispostos de modo a formar imagens ou gráficos. Embora a arte ASCII já não seja frequentemente utilizada na Internet, convém lembrar que, quando é utilizada, torna-se muito confusa para as pessoas cegas e que acedem à Internet através de leitores de ecrã. Se for utilizada, também deverá incluir uma explicação em texto sobre a imagem. Também é recomendado que exista um link para ignorar a arte ASCII (embora não seja obrigatório).

Os emoticons são muito populares. Incluem caracteres ASCII que formam expressões faciais e outras formas de comunicar uma emoção. Podem ser confusos para utilizadores de leitores de ecrã. Sempre que possível, é melhor utilizar simplesmente uma palavra como, por exemplo, "sorriso", em vez de um emoticon. Mas se os emoticons forem utilizados, deverão ter uma alternativa em texto. Em alguns contextos como, por exemplo, em blogues ou em fóruns, estão disponíveis plug-ins que convertem automaticamente caracteres ASCII utilizados como emoticons em imagens HTML com alternativas em texto.

O leetspeak utiliza várias combinações de caracteres ASCII para substituir as letras latinas. O leetspeak tornou-se parte do calão e da cultura na Internet e é frequentemente utilizado para substituir o texto e os filtros de spam. É muitas vezes imperceptível para pessoas cegas que utilizam leitores de ecrã e, por conseguinte, necessita de uma alternativa em texto para estar em conformidade com o Critério de Sucesso 1.1.1.

Nota: Uma vez que o suporte para esta técnica é limitado, é recomendado aos autores que forneçam a alternativa em texto no próprio texto.

Exemplos

Exemplo 1

O exemplo seguinte mostra três opções para fornecer alternativas para um emoticon que represente "medo", que consiste num sinal de igual, seguido do número oito, de um hífen e do número zero.

Código Exemplo:

=8-0 (fright)

<abbr title="fright">=8-0</abbr>

<img src="fright.gif" alt="fright"/> 

Exemplo 2

Arte ASCII com uma explicação da imagem que a precede. Inclui um link para ignorar a arte ASCII. Ignorar exemplo ASCII.

Código Exemplo:

                         Figure 1: ASCII art picture of a butterfly. 
 <a href="#skipbutterfly">Skip ASCII image</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> 

Exemplo 3

O exemplo seguinte é Leetspeak para "Austin Rocks".

Código Exemplo:

<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr> 

Testes

Procedimento

  1. Abra a página num browser comum.

  2. Verifique se o conteúdo inclui arte ASCII, emoticons e/ou leetspeak.

  3. Verifique se existe uma alternativa em texto imediatamente antes ou depois da arte ASCII, dos emoticons e/ou do Leetspeak.

Resultados Esperados