Por Reinaldo Ferraz*
O documento base que orienta desenvolvedores a tornar suas páginas e aplicações web mais acessíveis está prestes a ganhar uma atualização. As WCAG (Web Content Accessibility Guidelines) versão 2.1 tiveram seu primeiro rascunho (W3C Working Draft) divulgado em abril de 2017 (e atualizado em agosto de 2017) e traz algumas novidades importantes para garantirmos aplicações mais acessíveis para todas as pessoas.
Apesar de ainda ser um rascunho (W3C Working Draft), é um documento que ainda pode sofrer mudanças como inclusões, edições ou retirada de conteúdo . Essa atualização vem em um bom momento, já que a primeira versão do documento é de 1998 e a versão 2.0 se tornou recomendação em 2008 (um ano depois do primeiro IPhone ser lançado no mercado).
A documentação WCAG é “device agnostic”, ou seja, não foi feita com foco apenas em computadores e notebooks. Por isso, as diretrizes continuam atuais, mas já era hora de acrescentar novas orientações, já que a forma como usamos a web tem mudado e evoluído muito (especialmente em relação aos dispositivos móveis).
Vou apresentar aqui somente as recomendações que estão nos primeiros níveis de compliance das WCAG, sendo eles nível A e AA. Os detalhes de cada novo critério de sucesso estão no link do GitHub (disponível logo depois do breve resumo sobre cada um deles)
Zoom no conteúdo (Nível AA)
Critério de sucesso 1.4.10
Este critério define que o conteúdo pode ser redimensionado em 320 pixels em CSS sem perda de conteúdo ou funcionalidade e sem exigir rolagem bidimensional.
Esse tipo de preocupação é importante porque algumas pessoas com baixa visão podem precisar de zoom para ler determinados conteúdos na página, ou mesmo pessoas que enxergam bem, mas têm uma visão de túnel, que podem preferir a diminuição do zoom para conseguir ler o conteúdo da página.
Isso mostra o quanto o design responsivo tem um papel maior e mais importante do que apenas ajustar a tela para dispositivos móveis. Ele possibilita que as pessoas consigam enxergar, independente do tamanho da tela, um conteúdo de forma adequada.
Contraste em gráficos (Nível AA)
Critério de sucesso 1.4.11
Já existia uma recomendação sobre contraste de cores entre o texto e o fundo de uma página web. Esse critério veio para expandir essa preocupação com contraste, considerando seu uso também em textos que estão em imagens.
Basicamente ele define que o contraste da cor do texto e da cor do fundo deve ser de 4,5: 1 contra a (s) cor(es) adjacente(s). Há também algumas exceções, como contraste em logotipos e experiências sensoriais, mas a premissa de garantir um contraste adequado permanece – tanto em texto na página quanto em textos que fazem parte de uma imagem.
Contraste do componente de interface do usuário (mínimo) (Nível AA)
Critério de sucesso 1.4.12
Baseado no mesmo princípio da recomendação anterior referente ao contraste, esse critério de sucesso aponta que os componentes de interface do usuário também devem ter uma taxa de contraste de 4,5:1 com relação às cores de fundo ou que estão em sua volta.
Adaptando texto (Nível AA)
Critério de sucesso 1.4.13
Esse critério de sucesso visa garantir que pessoas com baixa visão que usam navegadores web possam adaptar as propriedades de estilo do texto sem nenhuma perda de conteúdo ou funcionalidade essencial quando essa mudança ocorre. Um exemplo: Usuários com baixa visão muitas vezes necessitam substituir as configurações do CSS do autor (como tipos de fonte) para conseguir enxergar melhor.
Conteúdo sobre o mouse (hover) ou foco (focus) (Nível AA)
Critério de sucesso 1.4.14
Quando algum elemento interativo recebe foco via teclado (focus) ou quando o usuário passa o ponteiro do mouse sobre ele (hover) é importante garantir que, ao acessar esse conteúdo, o elemento que dispara o conteúdo interativo esteja visível. Caso exista conteúdo adicional ao passar o mouse ou fazer o foco, esse conteúdo deve permanecer visível enquanto o foco ou o mouse estejam sobre o conteúdo complementar.
Interrupções (Nível AA)
Critério de sucesso 2.2.6
Quantas vezes você não acessou uma página e uma janela de chat ou vídeo aparece de repente e atrapalha sua navegação? Pois bem. É exatamente por isso que esse critério é importante. Ele exige que exista um mecanismo facilmente disponível para adiar e suprimir interrupções e mudanças no conteúdo a menos que sejam iniciadas pelo usuário ou envolvam uma emergência.
Essa técnica é extremamente importante especialmente para pessoas com deficiência de atenção e memória poderem completar uma tarefa. Quando os usuários são interrompidos, eles podem esquecer o que estão fazendo e abandonar a tarefa. Isso pode acontecer mesmo quando a tarefa original é extremamente importante. Por exemplo, um usuário está fazendo uma consulta médica, mas as interrupções fazem com que o usuário se esqueça do que estava fazendo e a consulta acaba não sendo feita.
Autenticação acessível (Nível A)
Critério de sucesso 2.2.7
Garantir que qualquer autenticação de usuário não tenha barreiras de acesso para usuários com deficiência. Alguns tipos de autenticação requerem uma habilidade específica do usuário ou uma forma alternativa de operação de interface, o que pode ser complicado para pessoas com deficiência.
Atalhos de teclas de caracteres (Nível A)
Critério de sucesso 2.4.11
Caso exista algum atalho de teclado na interface Web da página o usuário deve ser capaz de desligar ou desabilitar essa função, especialmente quando é um atalho relacionado a uma única tecla do teclado (single key shortcut). Isso é importante porque sistemas de comandos de voz têm problemas para lidar com ações de teclas únicas, que pode confundir a ação exigida pelo website com o digitar de um caractere.
Tamanho do alvo (Nível AA)
Critério de sucesso 2.5.1
Neste critério são definidos os tamanhos mínimos para regiões interativas de uma aplicação web considerando o acesso por toque ou ponteiro. Existem algumas exceções, como no caso de regiões customizáveis ou agrupadas, mas a via de regra, uma área sensível ao toque deve ter pelo menos 44 por 44 pixels (em CSS) para as entradas de ponteiro/toque.
Orientação (Nível AA)
Critério de sucesso 2.6.1
O conteúdo não está bloqueado para uma orientação de exibição específica e a funcionalidade do conteúdo é operável em todas as orientações de exibição, exceto quando a orientação da exibição é essencial para o uso do conteúdo. Isso significa que o usuário pode mudar a orientação de visualização do seu dispositivo, como tablet ou smartphone, para usar a aplicação.
Nome acessível (Nível A)
Critério de sucesso 2.7.1
O nome acessível é o nome de um elemento de interface do usuário. Quando um controle ativo possui um rótulo visível, o nome acessível para o controle inclui a sequência de texto usada para o rótulo visível. Os programas de entrada de fala às vezes permitem aos usuários falar rótulos que não são vistos na página. Os usuários de programas de entrada de fala podem acidentalmente dizer uma palavra em um rótulo oculto e serem levados para esse link sem saber o que aconteceu.
Ativação acidental (Nível A)
Critério de sucesso 3.2.6
Na minha opinião, este critério foi a maior contribuição para o documento. Ele define que ativações de ponteiro único (single pointer activation) estejam presentes no evento up (up event) na aplicação. Explico.
Evento Up é a ativação de um componente quando o usuário tira o dedo do componente selecionado. Em vez de ativar o elemento interativo ao toque, ele só é ativado quando o usuário tira o dedo/mouse do elemento selecionado.
Em diferentes plataformas, o “Evento Up pode ser chamado de formas diferentes, como “touchend” ou “mouseup”.
Isso evita ativações acidentais especialmente para pessoas com mobilidade reduzida. Isso pode permitir que a pessoa mova o dedo/mouse para fora do elemento sem que ele seja acionado de forma acidental.
Apesar de existirem algumas exceções dessa recomendação, vale a pena considerar em suas aplicações interativas o acionamento somente pelo evento Up. Por padrão, todos os componentes interativos do HTML já utilizam esse recurso. Perceba como os componentes nativos de links e botões já se comportam dessa forma.
Mudança de conteúdo (Nível AA)
Critério de sucesso 3.2.7
É fornecida uma notificação programática para cada alteração no conteúdo da página, a menos que uma ou mais das seguintes condições sejam verdadeiras:
- Existe uma relação programável determinável entre o novo conteúdo exibido e o controle que o desencadeia;
- O usuário foi avisado do comportamento antes de usar o controle;
- A alteração no conteúdo não é resultado de uma ação do usuário e não está relacionada à finalidade principal da página.
Este critério de sucesso destina-se a ajudar os usuários da tecnologia assistiva a estar atento às mudanças que muitos usuários podem facilmente ver e entender.
Vale lembrar que esse é um rascunho do documento e que ele pode sofrer alterações e/ou inclusões. De qualquer forma, esses são tópicos extremamente relevantes e que, independente de fazer parte de uma recomendação, o mínimo de empatia com o usuário é o necessário para saber que essas técnicas deveriam ser consideradas desde o início do projeto.
O documento completo está disponível no site do W3C.
________________________________________
*Reinaldo Ferraz é especialista em Desenvolvimento Web do Ceweb.br. Formado em desenho e computação gráfica e pós graduado em design de hipermídia pela Universidade Anhembi Morumbi em São Paulo. Trabalha com desenvolvimento web desde 1998. Coordena as iniciativas de acessibilidade na Web do NIC.br e projetos relacionados a Open Web Platform, Digital Publishing e Web das Coisas. Representante do NIC.br em grupos de trabalho do W3C internacional em Acessibilidade na Web, Digital Publishing e Web das Coisas. Apaixonado por acessibilidade, usabilidade, padrões web, HTML, CSS, Star Wars e café sem açúcar.