Guia do designer para o básico do design de acessibilidade da Web

A web deve ser um lugar onde todos possam acessar o mesmo conteúdo de qualquer lugar do mundo. Técnicas responsivas percorreram um longo caminho projetos agnósticos. Mas e sobre projetos agnósticos em acessibilidade?

A acessibilidade na Web existe há anos, mas sua implementação requer novos avanços em tecnologia e desenvolvimento web. Muitos desenvolvedores querem ajudar, mas é difícil entender como projetar para acessibilidade, porque há muitas partes móveis. Isso inclui texto de alto contraste, páginas de áudio para mídias cegas e otimizadas e fallbacks para navegadores não-JS / CSS..

Neste post, abordarei as noções básicas de design de acessibilidade, o que é, o que ele visa solucionar e as etapas que você pode seguir para começar. Note que este é um assunto incrivelmente detalhado, e levará meses ou anos de prática para entender completamente. Mas os benefícios valem a pena, e todos os seus projetos na web deixarão cada visitante com uma impressão duradoura de conteúdo acessível..

Introdução à acessibilidade

De um modo geral, acessibilidade é a ideia de construir conteúdo para que pode ser consumido por qualquer um. Isso pode incluir pessoas cegas que não sabem ler, e pode incluir pessoas com deficiências físicas que não podem operar um mouse ou teclado (ou qualquer um).

Mas também pode incluir pessoas com deficiências leves em visão. Pode incluir pessoas com dislexia ou problemas de compreensão de leitura. Na verdade, a ideia de “acessibilidade na web” inclui todas as possíveis deficiências que possam afetar a forma como alguém interage ou consome um website.

Talvez o mais importante seja o que a acessibilidade na Web pode oferecer, conforme descrito aqui em uma definição da Wikipedia:

No entanto, Anne Gibson argumenta em seu post List Apart que a definição da Wikipedia é muito vaga, e não é somente sobre pessoas com deficiência. É realmente sobre todos Na internet de todo o mundo que pode não ter acesso ideal à Internet.

Muitos desenvolvedores acham que a acessibilidade é apenas para pessoas cegas que não sabem ler. Mas existem quatro categorias principais de acessibilidade na web:

Visual - baixa visão ou pobre / sem visão
Auditivo - deficiente auditivo ou surdo
Cognitivo - dificuldade em compreender ou consumir informações
Motor - problemas de acessibilidade física que podem exigir dispositivos de entrada especiais, como teclados ou programas de comando de voz

Cada uma destas categorias tem técnicas extensivas que são mudando tão rapidamente quanto os padrões web. Mas há uma sensação de estabilidade com esses padrões ratificados no WCAG (Web Content Accessibility Guidelines).

Alguns sites, como instituições governamentais são obrigadas por lei a seguir estas diretrizes. Eles se aplicam internacionalmente através do W3C.

Vamos dar uma olhada na burocracia por trás da acessibilidade na Web e, em seguida, mergulhar em algumas dicas de design aplicáveis.

O W3C e Design Acessível

Há muito poucos acrônimos relacionados à acessibilidade na web. Isso pode ser complicado se você for novato no assunto, mas, uma vez simplificado, espero que façam mais sentido.

W3C (World Wide Web Consortium) - Um grupo internacional que define padrões da web para protocolos, idiomas e regulamentos. Todas as diretrizes oficiais de acessibilidade se enquadram nessa organização.
WAI (Iniciativa de Acessibilidade na Web) - Um programa oficial que cobre tudo sobre acessibilidade. Este termo guarda-chuva contém todas as regras, diretrizes e técnicas para acessibilidade moderna.
WCAG (Diretrizes de Acessibilidade ao Conteúdo da Web) - Um grupo de padrões e regras para ajudar os projetistas a classificar seus sites com base no nível de acessibilidade.
ÁRIA (Aplicações Rich Internet acessíveis) - Um padrão específico que define como criar aplicativos avançados acessíveis que dependem de tecnologias JavaScript / Ajax e similares. Leia mais sobre isso neste post por Anna Monus.

Outras diretrizes existem sob o guarda-chuva da WAI, incluindo UAAG para agentes do usuário e UMA ETIQUETA para ferramentas de criação na web. Por enquanto, você deve estar mais interessado nas sugestões feitas pelo WAI e nas diretrizes apresentadas pelo conjunto de regras do WAI sob o nome WCAG..

Um ótimo recurso para aprender mais é este post do W3C sobre deficiências, compartilhando histórias de como as pessoas com deficiência acessam a Internet. Pode ser difícil entender todos os problemas complexos, quanto mais entender como resolvê-los. Mas a melhor fonte é de pessoas que enfrentam esses problemas diariamente.

Outro assunto importante que você deve entender é a conformidade das WCAG. Isto está relacionado o nível de acessibilidade de um site cobrindo uma ampla variedade de fatores. Os níveis são baseados na conformidade com um sistema de classificação de A, AA e AAA. Você pode verificar isso com uma ferramenta de verificação de acessibilidade da web. A melhor pontuação é AAA.

Para saber mais sobre essas diretrizes, confira o artigo Introdução ao Understanding WCAG 2.0 da W3C. Também dê uma olhada nestes links relacionados para mais detalhes:

WCAG 2.0 simplificado
Seção 508 Desempenho das WCAG

Passos para Design Acessível

Eu recomendo fortemente visitar o site do projeto A11Y para dicas práticas de acessibilidade. A11Y (que também é um numeronimo) é um projeto de código aberto gratuito hospedado no GitHub, oferecendo técnicas para web design acessível.

Você pode navegar em sua lista de itens de acessibilidade, ou até mesmo um monte de padrões de design para elementos como dropdowns, guias, acordeões, botões e janelas modais (entre outros itens).

É difícil aprender tudo isso e implementá-lo ao mesmo tempo. Leve-o passo a passo e esteja disposto a pesquisar mais se ficar confuso.

Confira as instruções do A11Y e dicas rápidas para começar. Você encontrará sugestões específicas, como links de salto para conteúdo e esquemas de cores de alto contraste. Cada uma dessas técnicas tem seu próprio nível de detalhamento, então a implementação é principalmente sobre testes para ver o que funciona.

Considere usuários cegos que possam estar usando um leitor de conteúdo automatizado. Eles também podem ter um tradutor de áudio ou até mesmo um teclado especial para navegar na web com chaves em vez de um mouse. Isso é por que HTML semântico adequado (dê uma olhada neste artigo) é tão importante com propriedades como tabindex e chave de acesso.

Se você quiser mergulhar, considere escolher um tema pronto para acessibilidade. Você pode estudar a arquitetura e personalizar o design para se adequar ao seu projeto.

Ferramentas de teste de acessibilidade

Se você quiser começar, escolha uma área de acessibilidade e experimente. Então você pode usar ferramentas de teste para avaliar seu nível de sucesso.

Vale ressaltar que esse processo pode ser frustrante. Há muito a considerar, e as diretrizes das WCAG são tão difíceis de entender que você pode acabar com sobrecarga de informações.

O importante é apenas seguir em frente. Escolha uma área de acessibilidade e torne-a seu foco. Em seguida, use essas ferramentas para ajudá-lo a ajustar e melhorar seu trabalho.

Por exemplo, você pode tentar trabalhar com as especificações de contraste das WCAG para melhorar a legibilidade. Depois de escolher suas cores, basta usar este verificador de relação de contraste livre para ver se eles funcionam juntos.

Infelizmente, as diretrizes da WCAG 2.0 são tão confusas que você pode ter dificuldade em entender os requisitos. Mas quanto mais você tentar, mais você aprenderá e mais você entenderá.

Para testar um site que já está on-line, confira WAVE. É um verificador visual gratuito que exibe erros, alertas, problemas de contraste e outras especificidades de um site. Você terá uma visão visual e uma lista de problemas na barra lateral.

Há outro aplicativo gratuito no site da Cynthia Says, que pode verificar sites para classificações de sucesso WCAG de A, AA, AAA, e seção 508 para conformidade do governo.

E se você gosta de código aberto, dê uma olhada nestes ferramentas de teste de acessibilidade gratuitas no GitHub.

HTML CodeSniffer
Ferramenta de teste de acessibilidade automatizada
Validador das WCAG

Complementos do navegador

Os complementos do navegador provavelmente fornecem os métodos mais rápidos e fáceis para testes de acessibilidade. Você pode executá-los a partir de qualquer computador em qualquer site para obter resultados realmente úteis.

O AInspector for Firefox é considerado um must-have para acessibilidade. Isso verifica tudo, e é muito mais completo do que o testador WAVE.

Os usuários do Mozilla também podem gostar do WCAG Contrast Checker, que também é um add-on gratuito.

Os usuários do Chrome não têm o AInspector, mas eles têm as Ferramentas do desenvolvedor de acessibilidade criadas oficialmente pelo Google. Isso adiciona ferramentas extras à janela do inspetor para verificar as diretrizes de acessibilidade.

Os usuários do Chrome também têm verificadores de luminosidade para contraste de cores e algumas outras extensões gratuitas.

Infelizmente não consegui encontrar muito para os usuários do Safari, mas encontrei uma extensão para o Opera que verifica a conformidade com WCAG 2.0. Se você estiver disposto a pesquisar bastante no Google, talvez encontre mais ferramentas por aí.

Leitura Adicional

Se você é sério sobre a aprendizagem da acessibilidade na web, então esteja preparado para um longo caminho. Não é fácil, mas é muito gratificante.

Agora você deve entender mais sobre a real definição de acessibilidade na Web, por que ela existe e pequenos detalhes sobre o que os desenvolvedores devem fazer para melhorar seus sites. O próximo passo é aprofundar a pesquisa e a prática para incorporar esses princípios ao seu fluxo de trabalho.

Confira os posts a seguir para mais informações, e não se esqueça de consultar as diretrizes das WCAGs se você quer saber diretamente da fonte.

Como melhorar a acessibilidade da tabela HTML com marcação
Design Acessível para Usuários com Deficiências
6 dicas para melhorar a acessibilidade do site
Garantir que o seu site seja acessível aos deficientes visuais