Acessibilidade à canvas da HTML5 no IE

A recém lançada versão beta do navegador Internet Explorer 9 implementou suporte para o conteúdo alternativo do elemento canvas da HTML5. Isso significa que os conteúdos inseridos entre as tags de abertura e fechamento do elemento canvas são acessados pelos usuários navegando com tecnologias assistivas embora o navegador suporte o elemento canvas. Em consequência qualquer elemento interativo inserido como conteúdo do elemento canvas, tais como links ou controles de formulários serão normalmente incluídos na ordem de tabulação padrão da página mesmo que o navegador suporte canvas.

Canvas no IE9 constrói um sub DOM navegável

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, nessa página exemplo que ilustra o uso do elemento canvas 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.

Página exemplo mostrando um elemento canvas com conteúdo alternativo.

Nota: Usamos ARIA role=”img” para identificar o objeto canvas.

...
...
<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>
...
...

Questões potencialmente relevantes

• Conteúdos alternativos em canvas são acessados por tecnologias assistivas apenas em navegadores que dão suporte a essa funcionalidade e atualmente somente o IE9 pode beneficiar usuários com aquelas tecnologias.
• Autores continuarão a fornecer conteúdo alternativo inútil (para leitores de tela) se não se conscientizarem que o conceito de “conteúdo alternativo”, segundo a especificação para HTML5, prevê acesso àquele conteúdo não só via teclado como também para usuários com tecnologias assistivas.
• Não há uma indicação de onde se encontra o foco quando ele é dado a um elemento que se encontra em um elemento interativo dentro de canvas.

Nota: Este artigo é uma tradução de: HTML5 Canvas Accessibility in Internet Explorer 9 de autoria de Steve Faulkner.