Voltar à matéria

Exemplo de uso de canvas com um texto alternativo.

As especificações para HTML5 estabelecem o seguinte:

Quando o elemento canvas é usado para apresentar um conteúdo incorporado o usuário deve ser capaz de dar o foco aos seus elementos descendentes (aqueles inseridos em canvas para prover uma alternativa acessível). Isso visa a permitir que os autores possam usar canvas fornecendo acesso ao conteúdo alternativo via teclado e foco: os autores devem prever regiões aptas a receber o foco nos conteúdos alternativos de canvas.

Traduzindo a palavra da especificação o conteúdo dentro do elemento canvas deve ser marcado como o exemplo geral mostrado a seguir:

<canvas> <p>conteúdo</p></canvas>

Se o conteúdo for interativo ele deverá ser acessível e manipulável via teclado. Todo o conteúdo deve ser acessável por tecnologias assistivas como leitores de tela. Assim, no exemplo a seguir o texto alternativo deve ser lido por leitores de tela e o link deve ser funcional e acessível via teclado.

Até hoje nenhum navegador, exceto o Internet Explorer 9, versão beta, implementou essas funcionalidades de suporte a conteúdos alternativos de canvas. Se você está usando o IE9 para navegar com o teclado você terá acesso ao link existente no conteúdo alternativo do elemento canvas constante dessa página exemplo que criamos para você testar o suporte. Se você está usando um leitor de tela, poderá também acessar o texto alternativo, ou seja, o conteúdo dentro do elemento canvas.

Exemplo de canvas

Um retângulo com uma borda preta. No fundo do retângulo um círculo na cor rosa. Um quadrado na cor verde e um triângulo na cor púrpura cobrem parcialmente o círculo e são semi-transparentes de modo que o círculo é visto por baixo deles.

Exemplo de canvas Marcação HTML:

<canvas id="example" width="260" height="200" role="img">
  <p>Um <a href="http://en.wikipedia.org/wiki/Rectangle">retângulo</a> com uma borda preta. 
  No fundo do retângulo um círculo na cor rosa. Um quadrado na cor verde e um triângulo na cor púrpura 
  cobrem parcialmente o círculo e são semi-transparentes de modo que o círculo é visto por baixo deles.
  </p>
</canvas>

HTML original desse exemplo de canvas