Pular para o conteúdo principal

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

Referências​

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.