Acessibilidade na Web: por que os padrões W3C são frequentemente ignorados

Publicados: 2022-03-11

O termo du jour é acessibilidade na web — na minha opinião, um dos aspectos mais frequentemente mal compreendidos e mal aplicados do web design. O equívoco comum é que a acessibilidade é projetada exclusivamente para pessoas com deficiência. Na verdade, todos se beneficiam do conteúdo acessível , e seu público aumentará ao obter acesso ao conteúdo acessível em diferentes plataformas ou de maneiras diferentes, pois podem usar seu conteúdo com menos restrições.

Infelizmente, muitos desenvolvedores da web não tornam seu conteúdo acessível e não seguem as diretrizes de acessibilidade da web; assim, muitas pessoas experimentam dificuldades desnecessárias ao usar seus designs e desfrutar do conteúdo. Em casos extremos, certos grupos de usuários não podem usar esse site de forma eficaz.

Construir conteúdo acessível deve ser uma segunda natureza para qualquer desenvolvedor, designer ou criador de conteúdo, da mesma forma que a consideração de rampas, escadas e elevadores é para um arquiteto que projeta um novo edifício.

Vamos dar uma olhada no que está nos bastidores e por que tantos desenvolvedores parecem ignorar os padrões de acessibilidade da web sem uma boa razão.

1. O que significa “Design Acessível”?

O conteúdo acessível é o conteúdo que todos podem usar . Não conhecemos todos os aspectos de como os usuários estão acessando nosso conteúdo, por isso precisamos projetar com a acessibilidade em mente com antecedência.

Como destaquei anteriormente, isso não diz respeito às pessoas com deficiência, que representam cerca de 15% da população mundial. Na vida real, os usuários muitas vezes acabam não consumindo conteúdo e interagindo com os dispositivos exatamente da mesma forma que imaginavam durante o desenvolvimento. O conteúdo acessível também é necessário por motivos legais em muitas jurisdições. Leia “Fatores legais e de política no desenvolvimento de um caso de negócios de acessibilidade da Web para sua organização” para obter informações adicionais sobre conformidade de acessibilidade.

Considere os seguintes cenários ao pensar em conteúdo acessível para usuários que podem ser:

Incapaz de ouvir bem. 360 milhões de pessoas em todo o mundo têm deficiência auditiva. O conteúdo de áudio deve ter transcrições e o vídeo deve ter legendas.
Incapaz de ver bem. Estima-se que 285 milhões de pessoas sejam deficientes visuais em todo o mundo: 39 milhões são cegos e 246 têm baixa visão. Os usuários com deficiência visual usam leitores de tela (que leem o conteúdo usando fala sintetizada), telas em braille atualizáveis (o conteúdo da tela aparece na tela em braille e o usuário pode navegar e interagir com o dispositivo usando as teclas na tela) ou alta -modo de contraste.
Afetado pela dislexia. As pessoas com dislexia encontram dificuldade em ler e compreender o conteúdo, especialmente, por exemplo, texto justificado ou em maiúsculas.
Sofrendo de limitações físicas. Nem todas as pessoas podem usar todos os dispositivos. Por exemplo, a navegação pelo conteúdo deve estar disponível não apenas para usuários de mouse, mas também para usuários que não podem usar um mouse.
Usando dispositivos móveis. Adapte seu conteúdo para telas pequenas. Permitir que o usuário amplie ou aumente o tamanho da fonte.

2. Como garantir uma boa acessibilidade na Web

As pessoas usam formas muito diferentes de navegar e consumir conteúdo. Há usuários que precisam ser apoiados por ferramentas de software adicionais que os ajudem a acessar o conteúdo com mais facilidade. Essas ferramentas, conhecidas como tecnologias assistivas, variam de leitores de tela a telas sensíveis ao toque e ponteiros de cabeça.

No entanto, seu aplicativo e a tecnologia assistiva precisam conversar entre si. Nem tudo que está escrito em HTML é totalmente compreensível para tecnologias assistivas. Para ajudar a “traduzir” o conteúdo de “linguagem técnica” para uma linguagem mais legível, foram criados padrões de API de acessibilidade adicionais.

Este diagrama básico de acessibilidade da Web deve fornecer uma ideia melhor de como as tecnologias assistivas funcionam.

Para ilustrar como funciona, vejamos um exemplo de código simples:

 <a href="#” class=”button”>Delete</a>

Esse código simples, para quem usa o leitor de tela, não significa muito. É até enganador e lê apenas como um link com o texto “ Excluir ”. Para ajudar os usuários a entender que tipo de método é usado para executar a ação, podemos usar atributos ARIA (Assistive Rich Internet Applications) (especificados em https://www.w3.org/TR/wai-aria/) para substituir a função original. Alteramos o significado de um link para um botão adicionando o atributo role="button" . Dessa forma, os leitores de tela o lerão como um botão, não como um link. O que é mais apropriado.

Resumindo, atribua ARIA:

Dá ou melhora a semântica de elementos não semânticos ou outros elementos semânticos,
Garante que o conteúdo dinâmico (ao vivo) ainda esteja acessível.
Fornece a função para descrever o tipo de widget definido (menu, item de árvore, controle deslizante, medidor de progresso, etc.).
Fornece a função para descrever a estrutura da página da Web (títulos, regiões e tabelas).
Fornece o estado dos widgets (marcado, tem popup, etc.).
Fornece propriedades para arrastar e soltar que descrevem origens de arrastar e destinos de soltar.

O que é acessibilidade em Web Design?

Sempre que você projetar um conteúdo, pense em duas coisas: como o conteúdo é perceptível e como é operável . Vamos examinar alguns exemplos para ilustrar a acessibilidade no web design.

Digamos que você vá criar um elemento suspenso de seleção personalizado. Aqui estão as coisas a serem consideradas ao projetar o elemento:

Marcar diferentes estados: ativado, desativado, somente leitura.
Marque o elemento quando ele obtiver o estado de foco/hover.
Marque cada elemento de opção quando estiver em estado de foco/passagem.
Certifique-se de que o conteúdo ainda esteja legível quando apenas o texto for ampliado até o nível de 200%.
Certifique-se de que haja contraste suficiente entre o texto e seu plano de fundo. Ele ajuda pessoas com visão moderadamente baixa ou em dispositivos em condições extremas de iluminação, por exemplo, expostas à luz solar direta ou em uma tela com baixo brilho, a ler o conteúdo.

Outro exemplo poderia ser selecionar uma cor para descrever um estado. Aqui estão as coisas a serem consideradas ao projetar uma seção onde o usuário poderá escolher uma cor:

Há pessoas que têm dificuldade em distinguir certas cores. Portanto, verde não significa verde para todos os seus visitantes. Para corrigi-lo, adicione uma descrição para cada cor que descreva a finalidade.
Marque cada elemento quando ele obtiver o estado de foco/passagem.
Certifique-se de que haja espaço suficiente entre os elementos para que cada elemento possa ser facilmente ativado, por exemplo, em dispositivos com uma janela de visualização menor.

3. Teste de acessibilidade: por onde começar?

Não há uma maneira de verificar e ter certeza de que o conteúdo da web está totalmente acessível. Várias técnicas precisam ser usadas para verificar e corrigir os problemas de acessibilidade. Você pode começar definindo questões , soluções e prioridades .

Definindo problemas

Ao trabalhar em questões de acessibilidade, sempre tente criar um ticket por problema com um título claro. Isso deve simplificar a compreensão do problema e ajudar a definir uma prioridade.

Mau exemplo: o usuário não pode usar o teclado na página.

Bom exemplo: Não é possível usar a navegação do teclado no menu principal.

O mau exemplo leva a um caso que será bastante difícil de fechar em pouco tempo. As discussões sobre vários tópicos também podem começar na seção de comentários, pois o título do ticket é muito genérico.

O bom exemplo aponta exatamente para o problema e se concentra apenas em uma coisa: navegação pelo teclado no menu principal.

Priorize problemas de acessibilidade na Web

As prioridades são importantes porque definem quais problemas devem ser corrigidos primeiro. Por exemplo, WCAG é dividido por três níveis de conformidade: A, AA, AAA, o que significa que você deve começar de um nível mínimo A, mas isso não significa automaticamente que os níveis AA e AAA são apenas “bom ter”. Todos os níveis são importantes, e é importante não priorizar assumindo que o nível A sozinho é suficiente.

No entanto, os níveis WCAG (ou quaisquer outras diretrizes) podem ser bastante difíceis de entender às vezes e, para simplificar um pouco, você também pode considerar as seguintes definições de prioridade:

Crítico – Problemas que impedem os usuários de usar um aplicativo. Nenhuma solução alternativa disponível.
Major – Problemas que dificultam e/ou desorientam o uso de um aplicativo, mas não bloqueiam a capacidade do usuário de concluir a operação.
Menor – Problemas que incomodam, mas não impedem o uso ou aprimoramentos que podem ser feitos no aplicativo.
Info – Não adere às melhores práticas. Recomendações gerais para melhorias.

Soluções

Nenhuma das diretrizes - com as quais quero dizer WCAG, Seção 508 ou ADA - fornecerá uma solução direta em termos de código técnico de como um problema específico deve ser corrigido. Eles apenas definem o comportamento esperado. No entanto, WCAG também definiu procedimentos de teste que devem ajudar a entender como reproduzir o problema e há um grupo da comunidade Automated WCAG Monitoring, uma comunidade W3C com foco no desenvolvimento de regras confiáveis para testes de acessibilidade na web, automatizados e semi-automatizados.

Um exemplo para a técnica WCAG G4 (“Permitir que o conteúdo seja pausado e reiniciado de onde foi pausado”):

Procedimento de teste

Em uma página com conteúdo móvel ou rolante,

Use o mecanismo fornecido na página da Web ou pelo agente do usuário para pausar o conteúdo em movimento ou rolagem.
Verifique se a movimentação ou rolagem parou e não reinicia sozinha.
Use o mecanismo fornecido para reiniciar o conteúdo em movimento.
Verifique se o movimento ou rolagem foi retomado a partir do ponto em que foi interrompido.

resultados esperados

Os números 2 e 4 são verdadeiros.

Como podemos ver não existem soluções técnicas, mas sim um comportamento esperado definido. Como os desenvolvedores web implementam isso é com eles.

Diretrizes de Acessibilidade da Web e Padrões W3C

Seguir os padrões básicos da web deve ser seu ponto de partida:

O mais comum é o Web Content Accessibility Guidelines conhecido como WCAG. WCAG 2.0 é “um padrão técnico estável e referencial. Possui 12 diretrizes organizadas sob 4 princípios: perceptível, operável, compreensível e robusto. Para cada diretriz, existem critérios de sucesso testáveis, que estão em três níveis: A, AA e AAA.”
Técnicas para WCAG 2.0 é um guia completo para autores de conteúdo da web.
Requisitos do usuário de acessibilidade de mídia do W3C — Este documento apresenta os requisitos de acessibilidade que os usuários com deficiência têm em relação a áudio e vídeo na web.
Lei de Acessibilidade de Vídeo e Comunicações do Século XXI — O CVAA é dividido em dois grandes títulos ou seções. O Título I aborda o acesso às comunicações para tornar os produtos e serviços que utilizam Banda Larga totalmente acessíveis a pessoas com deficiência. O Título II da Lei de Acessibilidade abre novos caminhos para tornar mais fácil para pessoas com deficiência assistir a programação de vídeo na televisão e na internet.
Seção 508 — requisitos de acessibilidade para tecnologia da informação e comunicação (TIC) que se aplica a todas as agências federais quando desenvolvem, adquirem, mantêm ou usam tecnologia eletrônica e da informação.
Acessibilidade do site sob o Título II da Lei de Americanos Portadores de Deficiência (ADA) — Lá, você aprenderá como os requisitos de não discriminação do Título II da ADA se aplicam a sites de governos estaduais e locais.

Teste de Acessibilidade na Web: Como saber se meu conteúdo está acessível ou não?

Aqui estão os pontos de verificação básicos e fundamentais que devem ajudá-lo a tornar seu conteúdo da Web mais acessível desde a primeira etapa:

Valide seu HTML. Certifique-se de que a estrutura HTML não tenha erros, pois as tecnologias assistivas podem ter problemas para interpretar o conteúdo da página.
Teste com um teclado sozinho. Certifique-se de que todos os elementos acionáveis sejam acessíveis usando apenas o teclado. Além disso, você também deve ser capaz de executar todas as ações usando um teclado, por exemplo, enviar um formulário.
Teste com ferramentas de teste de acessibilidade e validadores. Use ferramentas que verificam e verificam possíveis erros de acessibilidade.
Conteúdo dinâmico. Notifique os usuários do leitor de tela sobre alterações dinâmicas, por exemplo, quando os resultados da pesquisa forem alterados.
Não confie nas cores para descrever o significado. Use cores junto com a descrição, por exemplo, aviso [caixa amarela].
Não remova o contorno no foco. Este é um recurso comumente removido usando o outline: 0; Não faça isso, pois os usuários de teclado perderão a orientação na página. Você pode considerar remover o contorno de foco para usuários que não usam teclado, mas sempre forneça um contorno de foco para usuários de teclado.
Mensagens de erro. Sempre diga ao usuário como corrigir um erro. Não basta declarar que os dados são inválidos.
Ordem de tabulação. Certifique-se de que a navegação baseada em guias siga as convenções estabelecidas na interface gráfica do usuário. No mínimo, deve seguir a direção de leitura do idioma padrão do aplicativo. Em inglês, por exemplo, a ordem de leitura é de cima para baixo, da esquerda para a direita; em árabe é de cima para baixo, da direita para a esquerda.
Ampliação. Certifique-se de que o conteúdo da página ainda seja legível ao ampliar o texto em até 200%.
Desligue as imagens. Você ainda consegue usar a página de maneira confortável? Existem textos alternativos para todas as imagens?
Leitor de tela. Teste para ver se você pode ler e navegar pelo conteúdo usando pelo menos um leitor de tela, por exemplo, VoiceOver, Windows Narrator ou NVDA.
Modo de alto contraste. Verifique se o conteúdo ainda é legível ao alternar para o modo de alto contraste.
Tamanho da fonte. Certifique-se de que o tamanho da fonte na página não seja menor que 10px.

4. Erros Comuns na Acessibilidade da Web

O erro mais comum é não identificar os requisitos de acessibilidade antes do desenvolvimento . Infelizmente, quanto mais tarde a acessibilidade fizer parte do desenvolvimento, mais difícil será implementar soluções.

Aqui está uma lista com alguns dos erros mais comuns que os desenvolvedores cometem ao implementar a acessibilidade:

Nenhuma capacidade de navegar pelo conteúdo usando apenas um teclado .
Uso indevido da propriedade de contorno CSS. Na maioria dos casos, outline: 0; é usado, o que significa que o contorno em torno de cada elemento acionável não é mais visível. Não use outline: 0; ou outline: 0 !important; . O usuário perderá a capacidade de ver o elemento atualmente em foco enquanto navega pelo conteúdo, a menos que haja outra alternativa para isso, por exemplo, usando a propriedade CSS border .
Perder o foco do elemento atual, por exemplo, devido a manipulações do DOM ou usando o método blur() . Isso geralmente acontece para aplicativos de página única.
Nenhuma notificação para os usuários do leitor de tela de que algo mudou, por exemplo, o conteúdo foi baixado usando a API XMLHttpRequest e novas alterações na interface do usuário foram renderizadas, mas o usuário não foi notificado. Isso geralmente acontece com aplicativos de página única.
Seletor de data inacessível. Em muitos casos, são usados seletores de data inacessíveis. Os usuários não podem navegar pelas opções de calendário usando o teclado.
Usando extensões que alegam corrigir automaticamente problemas de acessibilidade . Use-os com cuidado e verifique os resultados. O uso indevido deles pode criar mais problemas do que soluções.
Adicionando ao elemento tabindex o atributo com um número de índice maior que 0. O propósito de usar tabindex com um índice maior que 0 é principalmente para “corrigir” o caminho de navegação. No entanto, considere alterar a estrutura HTML para obter o caminho natural de navegação. Manipulá-lo usando tabindex pode levar a problemas de manutenção e um caminho de navegação imprevisível.
Hierarquia de títulos errada. Infelizmente, ainda é visto com bastante frequência, mas a hierarquia do cabeçalho não é construída corretamente, por exemplo, <h1> , <h5> e <h2> . Os usuários do leitor de tela estão usando cabeçalhos para navegar pelas seções e a estrutura inadequada é confusa, pois é difícil entender o contexto.
Falta suporte de alto contraste. Há pessoas que estão usando seu software no modo de alto contraste. Certifique-se de que seu conteúdo ainda seja perceptível.
Usando uma solução CAPTCHA inacessível. Infelizmente, todos os CAPTCHAs conhecidos por mim são inacessíveis ou muito difíceis de usar.
Excesso de animações e/ou não-pausáveis. Vídeos de reprodução automática, anúncios ou carrosséis de imagens são muito distrativos.
Grandes pedaços de texto. Texto condensado em um único bloco muito grande, sem espaços, vírgulas ou pontos. Muito difícil de ler. Dividir em partes menores, mais parágrafos e subtítulos ajuda a organizar melhor o conteúdo do texto.
Problemas de zoom. Verifique se o conteúdo ainda é legível e navegável quando ampliado em até 200%.
Baseando-se nas cores. Muitas vezes, o estado de um elemento é marcado apenas por uma cor, por exemplo, um estado de aviso é marcado apenas por um marcador amarelo; esta cor não é percebida da mesma forma para os daltônicos.
Pequenos alvos clicáveis/tocáveis. As áreas clicáveis/tocáveis geralmente são muito pequenas. Torná-lo maior permite que os usuários os ativem mais facilmente.

Mas como melhorar a acessibilidade na Web?

Definir os problemas é uma coisa. Consertá-lo é bem diferente e muitas vezes não é tão fácil quanto parece. Isso porque as implementações da API de acessibilidade não são consistentes e às vezes precisamos encontrar soluções alternativas ou até mesmo aceitar o fato de que algo não funcionará quando estivermos tentando corrigir o problema.

Em termos de ferramentas, não existe uma ferramenta única que possa verificar todas as combinações possíveis, mas como um bom começo, essas ferramentas devem ajudar:

Serviço de validação de marcação W3C — Só para ter certeza de que o conteúdo HTML não contém erros. Se a estrutura HTML tiver erros, a saída será imprevisível e não poderá ser processada adequadamente, especialmente por diferentes tecnologias assistivas.
https://www.w3.org/WAI/ER/tools/ — Uma lista de programas ou serviços online que ajudam a determinar se o conteúdo da web atende às diretrizes de acessibilidade.
E minha ferramenta, ASLint https://www.aslint.org/, ajuda você a encontrar problemas de acessibilidade.

Tenha sempre em mente que nenhuma ferramenta de acessibilidade pode substituir o teste manual , pois nem todos os cenários podem ser totalmente ou totalmente automatizados, por exemplo, verificar a relação de contraste de luminância em elementos com position: fixed; .

Concentre-se em problemas que bloqueiam o uso de seu aplicativo, por exemplo, o usuário não consegue navegar pelo menu usando o teclado.

Por que é importante tornar o conteúdo acessível

Todo mundo quer espalhar seu conteúdo o mais amplamente possível. A acessibilidade ajuda nessa área, em vários níveis, desde atingir um público maior até melhorar a experiência do usuário para todos os usuários. Além disso, a acessibilidade não é apenas para o que você tradicionalmente considera pessoas com deficiência. Seja um indivíduo que está envelhecendo e passando pelas mudanças físicas que o acompanham, alguém correndo em um dia ensolarado que precisa de ajuste automático de contraste em seu telefone ou um pai com as mãos cheias de sacolas de compras querendo enviar uma mensagem de texto por voz, acessível tecnologia é a tecnologia que todos os usuários podem usar de tempos em tempos.

Como um bônus adicional, o efeito positivo é que o conteúdo acessível que atende totalmente aos padrões WCAG 2.0 é mais fácil de rastrear e entender pelos mecanismos de pesquisa, e isso pode ter um efeito significativo na classificação de um site. Assim, o design acessível pode direcionar tráfego adicional para o site.

Por fim, aqui estão algumas estatísticas que você precisa considerar:

Mais de um bilhão de pessoas em todo o mundo experimentam algum tipo de deficiência.
Envelhecimento da população. Entre 2015 e 2030, o número de idosos – aqueles com 60 anos ou mais – no mundo deverá crescer 56%, de 901 milhões para mais de 1,4 bilhão.
O design universal é fundamental. O design universal refere-se a um amplo espectro de ideias e práticas para a produção de serviços, produtos e ambientes que são inerentemente acessíveis e utilizáveis por pessoas de todas as habilidades.
Tipos de deficiências: Existem cinco grandes categorias de deficiências, incluindo visual, mobilidade, fala, cognição e audição.

Todos nós exigimos serviços de alta qualidade. Vamos entregá-los também .