Acessibilidade
A RD Station é formada por uma comunidade muito diversa e temos muito orgulho disso.
Os seus produtos devem ser desenvolvidos considerando as necessidades de todos esses grupos, e para isso buscamos entender a maneira como as pessoas veem, ouvem, locomovem-se e aprendem, bem como comunicam-se, entendem e processam informações.
Para que o conteúdo dos produtos seja acessível, seguimos as normas Web Content Accessibility Guidelines (WCAG) 2.1. Referencias
Veja a seguir algumas técnicas para tornar o conteúdo perceptível, funcional e compreensível.
Hierarquia e Consistência
- Crie uma navegação consistente pelos produtos, com interfaces lineares e lógicas
- Quebre o conteúdo em níveis de importância com títulos, subtítulos e agrupamentos
- Faça código semântico
- Dessa maneira, as pessoas conseguem perceber a estrutura e seções dos produtos, isso facilita a localização e não faz com que elas tenham que procurar muito pelo que precisam
Cores e Contrastes
Cores e seus contrastes são fundamentais para acessibilidade em interfaces.
Utilize as paletas de cores primárias definidas no Tangram, e verifique sempre os requisitos de contraste entre os elementos, para que as pessoas com baixa visão possam ver e usar nossos produtos.
Relação de Contraste
O WCAG 2 (WCAG Success Criterion 1.4.3) recomenda que a relação de contraste entre cores adjacentes ou sobrepostas seja de pelo menos 4,5:1 para garantir que a representação visual de textos e imagens seja legível, com exceção para textos grandes (18pt ou 14pt com bold), incidental (estado inativo, decorativo, invisível, parte de imagem com conteúdo visual significativo) e logotipos, no qual o contraste mínimo é de 3:1. Esse valor também vale para ícones e outras representações gráficas. Referencias
Texto e Legibilidade
O texto simples ainda é o formato ideal para qualquer parte do conteúdo, por atender aos mais diferentes formatos de deficiências. Portanto, é importante fornecer um formato alternativo de texto, sem formatação, para todo o conteúdo informativo, ou seja, não apenas decorativo.
Algumas formas de garantir que o texto seja o mais inclusivo possível é usar sentenças simples e claras. Disponibilize o conteúdo num nível de leitura mais básico. Isso significa que pessoas com idades entre 11 e 14 anos devem ser capazes de entender o conteúdo.
Para elementos de tela, como botões, eles precisam ser bem descritivos e poderão ter dicas de utilização. Além disso, em vídeos utilize sempre legendas ou transcrições.
Alt-text
- Um texto alternativo, ou alt-text, é uma descrição de uma imagem que é mostrada para pessoas que não podem ver a imagem, ou pessoas que por algum motivo não conseguem renderizar a imagem
- Descreva a imagem com precisão. Inclua no texto apenas o que for necessário para compreensão rápida
- Leitores de tela conseguem identificar que aquele elemento é uma imagem, então não escreva "imagem de" ou "foto de“
- Use ponto final no alt-text para que os leitores de tela façam uma pausa criando uma conversa mais agradável
- Evite a utilização da barra, por exemplo: figura 1 / figura 2. Opte por utilizar traço ou vírgula: figura 1 - figura 2, ou ainda, figura 1, figura 2
Controle por teclado
Certifique-se de que todas as funções e tarefas que possam ser executadas usando um mouse, também sejam acessíveis utilizando outros dispositivos de entrada, como o teclado, assim como softwares de rastreio de olhos e leitores de tela.
Para isso, configure corretamente os estados de foco dos elementos tornando possível a navegação apenas com a tecla Tab.
Tempo
Pessoas com deficiência podem precisar de mais tempo para concluir tarefas: elas podem demorar mais para responder fisicamente, podem demorar mais para ler as coisas, podem ter baixa visão e levar mais tempo para encontrar ou lê-las, ou elas podem estar acessando o conteúdo por meio de uma tecnologia de assistência que requer mais tempo.
Por isso, dê o tempo necessário para completar uma tarefa. Se possível, não trabalhe com questão de tempo para conclusão de tarefas, como por exemplo: 5 minutos para configurar o agendamento de envio de e-mail.
Elementos que tenham movimento também precisam ter um tempo adequado para serem percebidos pelos leitores de tela.
Além disso, tente manter as notificações e alertas ao mínimo que for realmente necessário para a melhor experiência de pessoas com limitações cognitivas ou transtornos de déficit de atenção, e pessoas cegas ou com baixa visão.
Boas práticas
Para pessoas com ansiedade
- Dê o tempo necessário para completar uma tarefa
- Explique o que vai acontecer após uma determinada ação
- Dê clareza às informações importantes
- Dê o suporte que as pessoas precisam para completar uma tarefa
- Permita que as pessoas confiram as informações antes de enviá-las
Para pessoas com autismo
- Use cores e layouts simples e consistentes
- Use linguagem e sentenças simples
- Dê destaque aos pontos principais com bullet points, por exemplo
- Faça botões descritivos. Ex.: "Anexar arquivo"
Para pessoas com dificuldades auditivas
- Escreva em linguagem simples
- Utilize legendas ou transcrições para vídeos
- Use layouts lineares e lógicos
- Quebre o conteúdo com subtítulos, imagens e vídeos
- Deixe as pessoas escolherem a forma de comunicação que querem utilizar
Para pessoas com dislexia
- Use imagens e diagramas como suporte ao texto
- Alinhe os textos à esquerda e mantenha consistência no layout
- Considere produzir conteúdo em outros formatos, como áudio ou vídeo
- Utilize conteúdos curtos, claros e simples
- Permita que as pessoas mudem o contraste entre o fundo e os textos
Para pessoas com baixa visão
- Use imagens e diagramas como suporte ao texto
- Alinhe os textos à esquerda e mantenha consistência no layout
- Considere produzir conteúdo em outros formatos (Ex.: áudio ou vídeo)
- Utilize conteúdos curtos, claros e simples
- Permita que as pessoas mudem o contraste entre o fundo e os textos
- Permita que as pessoas mudem o tamanho de fonte, se possível
Para pessoas cegas
- Descreva todas as imagens, porém sem ser verboso
- Não seja detalhista em imagens que não tenham necessidade, exemplo: imagens apenas decorativas
- Permita a navegabilidade por teclado em todas as funcionalidades
- Utilize dicas ocultas para dar mais contexto às pessoas, exemplo: um botão "voltar" com dica oculta "voltar para etapa - anterior", mesmo que visivelmente esteja clara a ação
- Utilize dicas ocultas para descrever sua aplicação, exemplo: feedback de ações realizadas pela pessoa como: "Configuração - Salva"
- Seja fiel ao visual utilizando recursos semânticos
- Se possível, coloque áudio-descrição em vídeos
- Caso não seja possível colocar áudio-descrição em vídeos, seja descritivo, evitando, por exemplo, apontar ou mencionar conteúdos sem falar sobre eles
Para pessoas com deficiência física
- Procure fazer componentes considerando as seguintes dificuldades: Coordenação motora, Tremores, agilidade