Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Acessibilidade à canvas da HTML5 no IE

Publicado em: 2010-09-21 — 22.741 visualizacoes

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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2010-09-21 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2010/09/21/acessibilidade-a-canvas-da-html5-no-ie/trackback no seu site.

11 comentários na matéria: “Acessibilidade à canvas da HTML5 no IE”

  1. mart roisNo Gravatar disse:

    obrigado pelas informações, gostei muito do site, vou voltar aq mais vezes

    livre mudanças

  2. Rezende MudançasNo Gravatar disse:

    Mudou bastante coisa, mas não tive muitos problemas. parabéns ótimo post.

  3. Mudanças GoiâniaNo Gravatar disse:

    É muita coisa mudou.. Lembro que tive problemas na instalação.

  4. pauloNo Gravatar disse:

    Uso o XP e não tenho como testar. Gostaria de saber como o IE9 trata a chamada para o excanvas.js.

    Estou chamando assim:

    Essa é a dúvida que mais me atormenta no momento…

    Abraço

  5. mudançasNo Gravatar disse:

    Aqui na empresa também não deixaram instalar ainda.

  6. pablo redesNo Gravatar disse:

    muito boa tradução
    obrigado.

  7. Carlos RommellNo Gravatar disse:

    O HTML 5 vai melhorar muito nossas vidas na web, pelomenos eu acho!

  8. AlexandreNo Gravatar disse:

    Aqui na agencia ainda não permitiram instalar o 9,
    mais espero que as coisas caminhem para que todos os browsers se unam para uma renderização de codigo uniforme!!
    Abrass

  9. Sérgio RodriguesNo Gravatar disse:

    Muito bom, valeu pela tradução..

  10. Lucas CoradiniNo Gravatar disse:

    Pessoal, pra quem não entendeu direito ainda como vai funcionar o HTML 5, aqui tem um infográfico bem legal. http://www.focus.com/images/view/11905/ – Abraços!

  11. Michel MartinsNo Gravatar disse:

    Enfim o IE9 parece se adequar a normas de acessibilidade e padrões web. Será o fim da incompatibilidade dos browsers ou ainda teremos problemas com o IE?

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo