Acessibilidade digital refere-se a práticas para criar conteúdo e aplicativos digitais adequados para uso por uma ampla gama de pessoas, incluindo pessoas que sofrem de deficiências visuais, motoras, auditivas, de fala ou cognitivas.
Existe uma crença falsa de que você pode tornar um site acessível apenas investindo muito esforço e dinheiro, mas isso não é necessário. Se você projetar um projeto desde o início, levando em consideração os requisitos relevantes, não precisará adicionar nenhuma função e conteúdo especial, o que significa que não haverá custos adicionais.
Se for uma questão de corrigir erros em um site existente, alguns esforços deverão ser feitos aqui. Quando trabalhei na Carbon Health, uma vez testamos o site quanto à acessibilidade usando uma
extensão especial no Chrome . Já na página principal, foram encontradas 28 violações que precisavam ser eliminadas. À primeira vista, parecia que seria um processo muito trabalhoso, mas logo ficou claro que fazer alterações não seria tão difícil - você só precisa investir tempo e entender o básico. Conseguimos reduzir o número de violações para zero em apenas alguns dias.
Quero compartilhar alguns passos simples que tomamos e que podem ajudá-lo. Esses princípios foram projetados principalmente para aplicativos móveis e da web. Mas antes de começarmos, vamos descobrir por que isso é necessário.
Por que lutar pela acessibilidade?
Nós, como designers, somos capazes e obrigados a fazer tudo ao nosso alcance para que todos os produtos criados por nós possam ser usados por todos, independentemente de capacidades, contexto ou situação. O bom é o desejo de acessibilidade - em última análise, fornece uma experiência mais positiva para todos.
O número de pessoas com deficiência atinge 56 milhões nos Estados Unidos (ou seja, pouco menos de um quinto da população) e cerca de um bilhão em todo o mundo. Em 2017,
814 ações foram
movidas para a acessibilidade do site. Esses dois fatos já demonstram de forma convincente a importância dessa questão.
Além disso, a acessibilidade acaba sendo benéfica
do ponto de vista comercial : estudos mostram que sites acessíveis ocupam posições mais altas nos resultados de pesquisa, têm bons indicadores de SEO, carregam mais rapidamente, estimulam a prática de escrever um código melhor e sempre se distinguem pela excelente usabilidade.
Essas sete regras são relativamente fáceis de seguir e permitirão que você leve o produto ao nível AA através do sistema WCAG 2.0 (
Web Content Accessibility Guidelines ), tornando-o compatível com dispositivos auxiliares básicos, incluindo leitores de tela, ampliadores de tela e ferramentas de reconhecimento de fala.
1. Faça as cores contrastarem o suficiente
O contraste de cores é um dos problemas de acessibilidade do site frequentemente esquecidos. As pessoas com deficiência visual provavelmente terão dificuldade em ler o texto se ele não contrastar suficientemente bem com o plano de fundo. De acordo com estimativas da Organização Mundial da Saúde (OMS)
em seu documento sobre deficiência visual e cegueira , a proporção entre o brilho do texto e o fundo deve ser de pelo menos 4,5: 1 (para corresponder ao nível AA). Para fontes maiores e em negrito, as permissões são permitidas - elas são mais fáceis de distinguir, mesmo com baixo contraste. Se o tamanho do texto for 14-18 pontos ou mais, o limite será reduzido para 3: 1.
Existem ferramentas que ajudam a verificar rapidamente o contraste. Para quem trabalha em um Mac, aconselho que você obtenha o aplicativo
Contrast - ele permite que você calcule instantaneamente a proporção usando uma pipeta. Se você deseja obter uma avaliação mais detalhada, recomendo que você insira os valores necessários na
ferramenta para verificar o contraste do WebAIM. Ele calculará a proporção para diferentes tamanhos de fonte e estabelecerá a correspondência para
diferentes níveis (A, AA, AAA). Alterando os valores, você pode obter o resultado em tempo real.
Fonte:
Contraste visual das WCAG2. Não confie apenas na cor para transmitir informações críticas
Ao tentar dizer algo importante ao usuário - para mostrar um exemplo de uma ação ou provocar uma reação, não faça da cor o único marcador visual. Pessoas com acuidade visual ou daltonismo terão dificuldade em perceber seu conteúdo.
Tente complementar a cor com outro indicador - por exemplo, uma assinatura ou textura. Ao exibir uma mensagem de erro na tela, não pare apenas de destacar o texto em cores - adicione um ícone ou um título à janela. Considere também usar uma fonte em negrito ou sublinhado para que os links no texto sejam imediatamente impressionantes.
Elementos com uma estrutura de informações mais complexa - digamos, gráficos - são especialmente difíceis de ler quando os tipos de dados são separados apenas por cor. Use outros aspectos visuais para transmitir informações - forma, tamanho e texto explicativo. Você pode adicionar padrões ao preenchimento para tornar a diferença mais óbvia.
A versão do Trello para daltônicos é um ótimo exemplo de aplicação desta regra. Se você alternar para esse modo, os atalhos se tornarão universalmente compreensíveis adicionando texturas.
Existe uma boa maneira: imprima o gráfico em uma impressora em preto e branco e veja se tudo ficará claro para você. Além disso, você pode usar aplicativos especiais, como o
Color Oracle , que em tempo real mostram como o conteúdo procurará pessoas com as deficiências mais comuns na percepção de cores. Tudo isso ajudará você a garantir que as informações do seu site não estejam muito ligadas à cor.
Fonte:
Contraste visual das WCAG sem cor3. Realçar elementos ativos
Notou uma moldura azul que às vezes aparece em torno de links, campos e botões? Esse quadro é chamado de indicador de foco. Os navegadores usam a pseudo classe CSS por padrão para exibi-la nos elementos quando são clicados. Talvez não pareça muito bonito e você prefira simplesmente removê-lo. No entanto, se você decidir se livrar do estilo padrão, certifique-se de fornecer algum tipo de substituição.
Os indicadores de foco ajudam as pessoas a entender com qual elemento você pode interagir com o teclado e onde elas estão na estrutura da página. Eles são úteis para pessoas cegas que usam leitores de tela, pessoas com deficiências físicas ou síndrome do túnel do carpo e usuários avançados que preferem esse tipo de navegação. Bem, além disso, muitos de nós, em princípio, preferimos praticar navegação na Internet pelo teclado!
Os elementos para os quais o estado ativo deve ser enfatizado visualmente incluem: links, campos de formulário, widgets, botões e itens de menu. Todos eles precisam de indicadores que os diferenciem dos elementos circundantes.
Você pode criar indicadores para que eles fiquem bem no estilo do seu site e sejam combinados com a imagem da marca. Torne os marcadores de status ativo facilmente visíveis, com alto contraste, para que sejam claramente visíveis entre outros conteúdos.
Fonte:
W3C Focus Visible4. Adicione legendas e instruções aos campos de entrada
Um dos erros mais graves ao criar formulários é deixar assinaturas explicativas nos próprios campos para que desapareçam ao inserir dados. Quando há pouco espaço na tela ou você deseja dar ao design uma aparência minimalista e moderna, a tentação é grande - mas não faça isso. O texto nos campos do formulário geralmente é cinza e não possui contraste suficiente, difícil de ler. Além disso, pessoas como eu esquecem a metade do que digitaram, de modo que a assinatura que desaparece nos priva de todas as chances de descobrir isso.
As pessoas que usam leitores de tela geralmente se movem em forma usando a tecla Tab, passando de um controlador para outro. Os elementos do rótulo são contados para cada um deles. O restante do texto que não se aplica a eles (os mesmos rótulos explicativos dentro dos campos) geralmente é ignorado.
Sempre verifique se as pessoas entendem o que fazer com o formulário e o que escrever nele. É melhor que as assinaturas permaneçam visíveis mesmo durante o processo de entrada - uma pessoa deve ter um contexto diante de seus olhos ao preencher os campos. Ao ocultar assinaturas e instruções para o formulário, os designers, em busca da simplicidade
, sacrificam a usabilidade .
Isso não significa que você precisa desordenar a tela com informações inúteis - apenas verifique se as dicas mais importantes estão disponíveis. Um excesso de dados pode trazer menos problemas do que a falta deles. Seu objetivo é fornecer informações em um volume que o usuário possa executar a operação sem problemas.
Fonte:
WebAIM Criando formulários acessíveis5. Escreva descrições alternativas informativas para imagens e outros elementos não textuais
Pessoas com deficiência visual costumam usar leitores de tela para "ouvir" a Internet. Eles transformam o texto em discurso, permitindo ouvir tudo o que está escrito no site.
Uma descrição alternativa pode ser representada de duas maneiras:
- No atributo alt do elemento picture
- No contexto imediato ou no texto que acompanha a imagem
Tente descrever o que está acontecendo na imagem e como ela se relaciona com o significado geral, e não saia apenas com um comentário como "foto". O contexto é crucial.
Se a imagem for adicionada apenas para beleza ou o que ela expressa estiver duplicado no texto, você poderá adicionar o atributo e deixá-lo em branco - nesse caso, o leitor de tela ignorará. Quando um texto alternativo não é escrito, alguns leitores de tela lêem o nome do arquivo. Você não pode imaginar algo pior para uma experiência do usuário.
Atualmente, o Google está trabalhando em uma
solução baseada em inteligência artificial que gera legendas de imagem com uma precisão de 94%. O código está no domínio público e ainda está em processo de finalização. Espero que em breve vejamos como essa solução será aplicada em vários produtos. Até lá, você deve registrar manualmente o significado e o objetivo das imagens no contexto do restante do conteúdo.
Fonte:
W3C Usando Atributos Alt6. Use a marcação corretamente
Os títulos marcam o início do bloco de conteúdo - esses são alguns tipos de tags que determinam o estilo e a finalidade do texto. Além disso, os cabeçalhos definem a hierarquia do conteúdo na página.
A fonte grande nos títulos permite ao usuário entender melhor a estrutura das informações. Os leitores de tela também contam com cabeçalhos ao ler o conteúdo. Assim, pessoas com baixa visão têm uma idéia da aparência geral da página ouvindo títulos em uma sequência hierárquica.
Ao desenvolver um site, você deve usar os elementos estruturais corretos: os elementos HTML transmitem informações ao navegador sobre o tipo de conteúdo que eles carregam e quais ações executar com ele. São os componentes e a estrutura da página que formam a árvore de acessibilidade do navegador com a qual os leitores de tela para o trabalho com deficiência visual.
A marcação incorreta afeta muito a acessibilidade. Não limite o uso de tags HTML a efeitos estilísticos. Os leitores de tela são guiados por uma página baseada na estrutura hierárquica dos títulos - títulos reais, e não apenas no texto que se torna maior e mais gordo. Com a ajuda deles, os usuários podem ouvir a lista completa de cabeçalhos, pular blocos de conteúdo, guiados pelo tipo de cabeçalho ou acessar a navegação pelos cabeçalhos do primeiro nível (h1).
Fonte:
Estrutura semântica do WebAIM7. Suporte ao controle de teclas
A capacidade de executar operações usando o teclado é um dos principais componentes da acessibilidade no design da web. Pessoas com coordenação prejudicada dos movimentos e tônus muscular, cegas, quem usa leitores de tela e até alguns usuários avançados confiam no teclado ao navegar no site.
Talvez você, como eu, use a tecla Tab para navegar até os elementos de página interativos desejados: links, botões, campos de entrada. O indicador do estado ativo, sobre o qual falamos acima, permite enfatizar visualmente o elemento que está selecionado no momento.
Ao percorrer a página, a sequência na qual o usuário interage com os elementos é extremamente importante, portanto a navegação deve ser lógica e intuitiva. A ordem de transição deve corresponder à direção do movimento do olhar: da esquerda para a direita, de cima para baixo, primeiro a navegação principal, depois os botões que ocultam o conteúdo, as formas e, finalmente, o rodapé.
É uma boa prática testar o site usando apenas o teclado. Vá de link para link e de campo para campo usando a tecla Tab. Verifique se é conveniente selecionar um elemento pressionando Enter. Verifique se todos os componentes estão alinhados na ordem correta e se a aparência é previsível. Se você pode percorrer todas as páginas sem tocar no mouse, está indo bem!
E mais uma coisa. Preste atenção aos volumes no sistema de navegação - refere-se ao número de links e ao tamanho do texto. A repetição de todos os itens de uma longa lista pode cansar pessoas com habilidades motoras limitadas, e as pessoas que usam um leitor de tela rapidamente se cansam de ouvir textos de links longos. Tente ser mais conciso. A adição de
marcadores ARIA ou elementos estruturais do HTML 5 (como main ou nav) também facilitará a navegação na página.
Fonte:
Teclado W3CO que mais pode ser feito
Essas regras são um bom ponto de partida, mas se você quiser fazer outra coisa para aumentar a acessibilidade, eu recomendaria:
- Realize uma auditoria sobre a disponibilidade. Use o serviço especial para descobrir se o seu produto está em conflito com dispositivos auxiliares e se atende aos requisitos do nível AA. Faça as alterações necessárias com base nos resultados e repita o teste.
- Nomear um auditor. Você pode instruir um dos funcionários a realizar tais auditorias regularmente - por exemplo, para alguém da equipe de teste. Se não houver pessoas com a experiência necessária, entre em contato com um especialista de terceiros.
- Considere os fatores de acessibilidade ao coletar informações. Ao realizar pesquisas, verifique se suas suposições sobre acessibilidade estão confirmadas e procure oportunidades para refinar alguma coisa. Envolver pessoas com deficiência é um pouco mais difícil. Sinta-se à vontade para entrar em contato com associações e comunidades - geralmente, é um prazer ajudar.
Conclusão
Bem, isso é tudo. Essas foram sete regras que ajudarão você a elevar seu site ao nível AA aproximado, de
acordo com as Diretrizes de acessibilidade de conteúdo da Web .
Ainda continuo trabalhando para tornar o design mais acessível e tento observar os princípios que prego para os outros. Anteriormente, parecia-me que isso é muito complicado e ainda não importa. Mas eu estava errado. Sugiro que você inicie o processo usando essas regras e continue a conversa sobre por que a acessibilidade é importante.
A promoção de práticas de acessibilidade é de responsabilidade dos designers. Com a ajuda deles, abrimos o caminho da tecnologia para todas as pessoas, independentemente de suas capacidades, padrão de vida, idade, educação e local de residência. Assuma a responsabilidade ao projetar. Obrigada
Referências
WebAIM - Artigos, Recursos e
Estudos de Caso sobre Acessibilidade em Web Design
“
7 coisas que um designer precisa saber sobre acessibilidade ” é um ótimo artigo do Salesforce com observações precisas
Programa de Computação e Deficiência da UCLA - o site, é claro, não é o mais bonito e moderno, mas é muito rico em recursos
Mitos do UX - Uma extensa lista de conceitos errados no design do UX com refutações; alguns deles abordam questões de acessibilidade
Fluxos de trabalho de acessibilidade de cores - aqui
Geri Coady demonstra como chegar ao ponto com a seleção de cores
W3C - a bíblia da acessibilidade em web design, você pode até ficar confuso com a abundância de materiais. Mas quando você entender a estrutura, encontrará ótimos exemplos, dicas e recursos.
Ferramentas úteis
Verificador de contraste de cores WebAIM - uma ferramenta inteligente para verificar o contraste, produz um resultado imediatamente após a entrada e para diferentes tamanhos de texto
Componentes inclusivos - uma biblioteca de texturas projetada como um blog. É dada especial atenção às questões de design acessível. Cada postagem analisa algum componente de interface comum e oferece uma versão mais confiável e acessível de seu design.
O Color Oracle é um simulador gratuito de daltônicos, adaptado para Windows, Mac e Linux. Em tempo real, mostra como as pessoas com distúrbios generalizados de percepção de cores veem.
Diretrizes de acessibilidade do produto Vox - lista completa de requisitos para designers, desenvolvedores e gerentes de projeto
AX Google Chrome Extension - verifique em qualquer site se há violações de acessibilidade com o Inspector for Chrome
O Contrast é um aplicativo para Mac que fornece acesso instantâneo às taxas de brilho do WGAG.