Como incorporar a acessibilidade ao processo da sua equipe.
Tornar seu site mais acessível pode ser um desafio. Se você está se aproximando da acessibilidade pela primeira vez, a grande variedade do tema pode deixar você se perguntando por onde começar. Afinal, trabalhar para acomodar uma ampla gama de habilidades significa que há uma gama correspondentemente diversificada de questões a serem consideradas.
Lembre-se, a acessibilidade é um esforço de equipe. Cada pessoa tem um papel a desempenhar. Este artigo descreve os critérios de cada uma das principais disciplinas (gerente de projeto, designer de UX e desenvolvedor) para que eles possam trabalhar para incorporar práticas recomendadas de acessibilidade ao processo.
Gerente de projeto
Uma meta importante para qualquer gerente de projeto é tentar incluir o trabalho de acessibilidade em todos os marcos, garantindo que seja uma prioridade igual a outros tópicos, como desempenho e experiência do usuário. Abaixo estão alguns itens da lista de verificação para ter em mente ao trabalhar no seu processo.
- Disponibilize o treinamento de acessibilidade para a equipe.
- Identifique jornadas ideais do usuário no site ou aplicativo.
- Tente incorporar uma lista de verificação de acessibilidade ao processo da equipe.
- Sempre que possível, avalie o site ou aplicativo com estudos de usuários.
Treinamento de acessibilidade
Há vários ótimos recursos sem custo financeiro para aprender sobre acessibilidade na Web. Reservar um tempo para sua equipe estudar o tópico pode facilitar a inclusão de acessibilidade no início do processo.
Estes são alguns recursos oferecidos pelo Google:
Web Accessibility by Google: um curso de treinamento interativo de várias semanas.
Conceitos básicos de acessibilidade: guias de acessibilidade escritos e práticas recomendadas.
Diretrizes do Material Design: acessibilidade (link em inglês): um conjunto de práticas recomendadas da UX para um design inclusivo.
Identificar jornadas ideais do usuário
Todo aplicativo tem uma ação principal que o usuário precisa realizar. Por exemplo, se você estiver criando um app de e-commerce, todos os usuários vão precisar ser capazes de adicionar um item ao carrinho de compras.
Algumas ações podem ser de importância secundária e talvez sejam realizadas apenas ocasionalmente. Por exemplo, mudar a foto do avatar é um bom recurso, mas pode não ser essencial para todas as experiências.
Identificar as ações primária e secundária no seu aplicativo ajuda você a priorizar o trabalho de acessibilidade. Mais tarde, você poderá combinar essas ações com uma lista de verificação de acessibilidade para acompanhar seu progresso e evitar regressões.
Incorporar uma lista de verificação de acessibilidade
O assunto da acessibilidade é bastante amplo, então ter uma lista de verificação de áreas importantes a serem consideradas pode ajudar a garantir que você está cobrindo todas as suas bases.
Existem várias listas de verificação de acessibilidade. Confira alguns exemplos do setor:
Lista de verificação das WCAG do WebAIM Diretrizes de acessibilidade da Vox
Com uma lista de verificação em mãos, é possível examinar suas ações primárias e secundárias para começar a fazer a triagem do trabalho que ainda precisa ser feito. Você pode ser bastante tático em relação a esse processo e até mesmo criar uma matriz de ações primárias e secundárias e determinar para cada etapa desses processos, se há algum detalhe de acessibilidade faltando.
Avaliar com estudos de usuários
Nada se compara a interagir com usuários reais e observá-los enquanto tentam usar o app. Se você estiver adaptando a acessibilidade a uma experiência já existente, esse processo poderá ajudar a identificar rapidamente as áreas que precisam ser melhoradas. Se você está iniciando um novo projeto, os primeiros estudos com usuários podem ajudar a evitar gastar muito tempo desenvolvendo um recurso difícil de usar.
Procure incorporar o feedback do maior número possível de usuários. Considere os usuários que navegam principalmente com o teclado ou que contam com tecnologia assistiva, como leitores de tela ou lupas de tela.
designer de UX
Como as pessoas tendem a projetar usando seus próprios vieses, se você não tem uma deficiência nem colegas, pode estar projetando involuntariamente apenas alguns de seus usuários. Enquanto trabalha, pergunte a si mesmo "Quais são os tipos de usuários que podem confiar nesse design?" Aqui estão algumas técnicas que você pode tentar para tornar seu processo mais inclusivo.
- O conteúdo tem contraste de cor suficiente.
- A ordem da tabulação está definida.
- Os controles têm marcadores acessíveis.
- Há várias maneiras de interagir com a interface.
O conteúdo tem um bom contraste de cores
O objetivo principal da maioria dos sites é transmitir informações ao usuário, seja por texto ou imagens. No entanto, se esse conteúdo for de baixo contraste, a leitura poderá ser difícil para alguns usuários, especialmente aqueles com deficiência visual. Isso pode afetar negativamente a experiência do usuário. Para resolver essa questão, tente que todos os textos e imagens tenham contraste de cor suficiente.
O contraste é medido pela comparação da luminância de uma cor de primeiro e de segundo plano. Para textos menores (abaixo de 18 pt ou 14 pt em negrito), recomendamos uma proporção mínima de 4,5:1. Para textos maiores, essa proporção pode ser ajustada para 3:1.
Na imagem abaixo, o texto do lado esquerdo atende a esses mínimos de contraste, enquanto o texto do lado direito está de baixo contraste.
Existem várias ferramentas para medir o contraste de cores, como a Material Color Tool do Google, o app Contrast Ratio da Lea Verou e o aXe do Deque.
A ordem da tabulação está definida
A ordem da tabulação é a ordem em que os elementos recebem foco conforme o usuário pressiona a tecla Tab. Para usuários que navegam principalmente com um teclado, a tecla Tab é o meio principal de acessar tudo na tela. Pense nisso como o cursor do mouse.
O ideal é que a ordem da tabulação siga a ordem de leitura e flua do topo da página para a parte inferior, com os itens mais importantes aparecendo mais acima na ordem. Isso torna mais eficiente para qualquer pessoa que use um teclado acessar rapidamente esses itens.
A interface simulada acima é numerada para mostrar a ordem da tabulação. Criar uma simulação como esta pode ajudar a identificar a ordem de tabulação pretendida. Isso pode ser compartilhado com os desenvolvedores e testadores de controle de qualidade para garantir que ele seja implementado e testado corretamente.
Os controles têm marcadores acessíveis
Para usuários de tecnologia assistiva, como leitores de tela, os marcadores fornecem informações que, de outra forma, seriam apenas visuais. Por exemplo, um botão de pesquisa que é apenas um ícone de lupa pode ter um rótulo acessível de "Pesquisa" para ajudar a preencher a affordance visual ausente.
Aqui estão algumas sugestões simples a serem seguidas ao projetar marcadores acessíveis:
- Ser conciso: pode ser tedioso ouvir descrições longas.
- Tente não incluir o tipo ou o estado do controle. Se o controle estiver codificado corretamente, um leitor de tela vai anunciar isso automaticamente.
- Concentre-se em verbos de ação: use "pesquisar" e não "lupa".
Você pode criar uma simulação com todos os controles rotulados. Isso pode ser compartilhado com as equipes de desenvolvimento e de controle de qualidade para implementação e teste.
Várias maneiras de entender e interagir com a interface
É fácil presumir que todos os usuários interagem com a página usando principalmente um mouse. Ao projetar, considere como alguém vai interagir com um controle usando um teclado.
Planeje seus estados de foco! Isso significa determinar a aparência de um controle quando o usuário o foca com a tecla Tab ou pressiona as teclas de seta. É útil planejar esses estados com antecedência, em vez de tentar colocá-los no design mais tarde.
Por fim, para qualquer ponto de interação, é importante garantir que o usuário tenha várias maneiras de entender o conteúdo. Tente não usar apenas a cor para transmitir informações, já que essas dicas sutis podem ser esquecidas por um usuário com deficiência na percepção de cores. Um exemplo clássico é um campo de texto inválido. Em vez de apenas um sublinhado vermelho para indicar um problema, adicione também um texto auxiliar. Dessa forma, você abrange mais bases e aumenta a probabilidade de um usuário perceber o problema.
Desenvolvedor
O papel do desenvolvedor é onde o gerenciamento de foco e a semântica se combinam para formar uma experiência do usuário robusta. Veja abaixo alguns itens que os desenvolvedores podem ter em mente enquanto trabalham no site ou aplicativo:
- A ordem da tabulação é lógica.
- O foco é gerenciado de maneira adequada e visível.
- Elementos interativos são compatíveis com teclado.
- Os papéis e atributos ARIA são aplicados conforme necessário.
- Os elementos estão rotulados corretamente.
- Os testes são automatizados.
Ordem lógica de tabulação
Elementos nativos, como input, button e select, são ativados para a ordem
de tabulação sem custo financeiro e são focalizáveis automaticamente com o teclado. Mas nem todos
os elementos recebem esse mesmo comportamento. Em particular, elementos genéricos, como div
e span, não estão ativados na ordem por tabulação. Isso significa que, se você usar um div para
criar um controle interativo, será necessário trabalhar mais para
torná-lo acessível pelo teclado.
Você tem duas opções:
- Atribua um
tabindex="0"ao controle. Isso pelo menos vai torná-lo focalizável, embora você provavelmente precise fazer mais trabalho para adicionar suporte a pressionamentos de tecla. - Sempre que possível, use um
buttonem vez de umadivouspanpara qualquer controle do tipo botão. O elementobuttonnativo é muito fácil de personalizar e oferece suporte sem custo financeiro ao teclado.
Gerenciamento de foco
Quando você muda o conteúdo da página, é importante direcionar a atenção do usuário movendo o foco. Um exemplo clássico de quando essa técnica é útil é ao abrir uma caixa de diálogo modal. Se um usuário que depende de um teclado pressionar um botão para abrir uma caixa de diálogo e o foco não for movido para o elemento da caixa de diálogo, a única ação dele será percorrer todo o site até encontrar o novo controle. Ao mudar o foco para o conteúdo novo assim que ele aparece, você melhora a eficiência das experiências desses usuários.
Suporte ao teclado para elementos interativos.
Se você estiver criando um controle personalizado, como um carrossel ou um menu suspenso, será necessário fazer mais algum trabalho para adicionar suporte ao teclado. O Guia de práticas de criação ARIA (link em inglês) é um recurso útil que identifica vários padrões de interface e os tipos de ações de teclado com suporte.
Para saber mais sobre como adicionar suporte ao teclado a um elemento, consulte a seção tabindex itinerante nos documentos de Fundamentos de acessibilidade do Google.
Os papéis e atributos ARIA são aplicados conforme necessário
Os controles personalizados não só precisam de suporte adequado ao teclado, como também precisam da semântica
adequada. Afinal, um div, semanticamente, é apenas um contêiner de agrupamento genérico. Se você estiver usando um div como base para o menu suspenso, vai precisar usar
ARIA
para adicionar outras semânticas de modo que o tipo de controle possa ser transmitido à
tecnologia assistiva. Novamente, o
Guia de práticas de criação ARIA (em inglês)
pode ajudar a identificar quais papéis, estados e propriedades precisam ser usados.
Como bônus, muitas das explicações no guia ARIA também vêm
com exemplos de código.
Como rotular elementos
Para rotular entradas nativas, você pode usar o
elemento <label>
integrado, conforme descrito no MDN. Isso não apenas ajudará você a criar uma affordance visual
na tela, como também fornecerá à entrada um nome acessível na árvore
de acessibilidade. Em seguida, esse nome é selecionado pela tecnologia adaptativa (como um leitor de tela)
e anunciado ao usuário.
Infelizmente, <label> não oferece suporte para dar um nome acessível a controles
personalizados (como os criados com elementos
personalizados
ou de divs e períodos simples). Para esses tipos de controle, você precisa usar
os atributos
aria-label e aria-labelledby.
Testes automatizados
Preguiça pode ser bom, especialmente quando se trata de testes. Sempre que possível, procure automatizar seus testes de acessibilidade para não ter que fazer tudo manualmente. Atualmente, existem várias ótimas ferramentas de teste do setor para facilitar e agilizar a verificação de problemas comuns de acessibilidade:
O aXe, criado pelos sistemas Deque, está disponível como uma extensão do Chrome e um módulo Node (bom para ambientes de integração contínua). Este breve A11ycast explica algumas maneiras diferentes de incorporar o aXe ao seu processo de desenvolvimento.
O Lighthouse é o projeto de código aberto do Google para auditar o desempenho dos Progressive Web Apps. Além de verificar se o PWA é compatível com recursos como o Service Worker e um manifesto de app da Web, o Lighthouse também executará uma série de testes de práticas recomendadas, incluindo testes de problemas de acessibilidade.
Conclusão
A acessibilidade é um esforço de equipe. Todos têm um papel a desempenhar. Neste guia, apresentamos alguns itens importantes que cada membro da equipe pode usar para avançar no assunto rapidamente e melhorar a experiência geral do app.
Para saber mais sobre acessibilidade, confira nosso curso sem custo financeiro da Udacity (em inglês) e consulte os documentos sobre acessibilidade (em inglês) disponíveis em web.dev.