Acessibilidade

5 jan, 2016

Melhorando a acessibilidade no canvas

Publicidade

Acessibilidade vai muito além de marcações semânticas no HTML. É possível garantir que aplicações dentro de elementos <canvas> transmitam informação a usuários de tecnologia assistiva ou até permitam o controle de uma aplicação complexa. O objetivo deste texto é mostrar como pequenas intervenções no código podem melhorar a acessibilidade de aplicações dentro do <canvas>.

O elemento <canvas> é um container que pode ser usado para renderizar gráficos de jogos, artes, ou outras imagens visuais em tempo real. Além da simples renderização de bitmaps, controles da aplicação atuam dentro desse container. E esses controles podem (e devem) ser acessíveis ao usuário.

Vamos usar como exemplo uma aplicação simples com <canvas> que permite desenhar uma estrela ao clicar no elemento. A princípio, sua marcação no HTML (excluindo os scripts para fazê-lo funcionar) funcionaria desta forma:

<canvas id=”x” ></canvas>

Uma das principais diretrizes de acessibilidade é possibilitar o acesso via teclado ao conteúdo da página. Sendo assim, um texto descrevendo o que a aplicação vai executar dentro de um elemento de âncora (que pode executar a mesma função do clique do mouse) pode melhorar a acessibilidade desse elemento da seguinte forma:

<canvas id=”x” >
<a href=”#“> Desenho de uma estrela amarela feita ao clicar no elemento </a>
</canvas>

A acessibilidade no <canvas> também pode explorar muito mais do que uma simples descrição da aplicação. É possível fazer com que a aplicação seja controlada por ações baseadas na navegação por teclado.

No segundo exemplo, consideramos o desenvolvimento de um jogo ou aplicação no qual o usuário deve mover objetos no <canvas>. Todo esse controle pode ser feito na camada por trás do meu container, possibilitando a navegação via teclado e especialmente o acesso à tecnologia assistiva.

<canvas id=”x” >
<h2>Controles</h2>
<a href=“#” id=“up”>Para cima</a>
< a href=“#” id=“down”>Para baixo</a>
</canvas>

Dessa forma, os controles da aplicação não ficam visíveis para o usuário, mas estão disponíveis para a navegação via teclado. A aplicação continua sendo acessível por mouse/toque no container, e também via teclado/movimentos.

Podemos também fazer com que conteúdo atualizado dentro do <canvas> seja exposto ao usuário de tecnologia assistiva. Nesse caso, utilizamos WAI-ARIA para garantir que as atualizações de status sejam informadas ao usuário, mesmo que seja fora do <canvas>, como no exemplo a seguir:

<canvas id=”x” >
<h2>Controles</h2>
<a href=“#” id=“up”>Para cima</a>
< a href=“#” id=“down”>Para baixo</a>
</canvas>

<p aria-live=”polite”>Posição: movendo para <span id=“position”>cima</span></p>

Assim, quando ocorrer uma atualização de status, o usuário de tecnologia assistiva será informado imediatamente, e poderá continuar utilizando a aplicação devidamente informado sobre as notificações anteriores.

O ponto mais importante dos exemplos mostrados é a simplicidade da sua implementação em aplicações mais complexas e elaboradas. Vale lembrar que garantir acessibilidade a uma aplicação vai muito além de filantropia. A Web está evoluindo da mesma forma que nossos sentidos, e não podemos ser impedidos de acessar um conteúdo por não utilizar um computador de última geração ou por alguma limitação física. Não precisamos de muito para fazer a Web ser inclusiva. Precisamos, antes de qualquer conhecimento técnico, de vontade de fazer a diferença.