# Acessibilidade na Zoox
Na Zoox, levamos a sério o processo de inclusão e diversidade dentro da empresa e em nossos produtos. Por isso pensar na acessibilidade é essencial. Tanto o time de UX quanto os times de produtos devem sempre ter isso em mente, trabalhando juntos para promover a acessibilidade nos projetos e incluir o máximo possível de usuários facilitando o uso de nossos produtos.
Consulte as diretrizes de acessibilidade para conteúdo Web (WCAG) 2.1: https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/ (opens new window)
A seguir alguns princípios e diretrizes, presentes nas WCAG, que devemos seguir:
- Fornecer alternativas textuais para qualquer conteúdo não textual (tabelas, gráficos, fotos, captcha);
- Fazer com que todas as funcionalidades estejam disponíveis no teclado;
- Dar tempo suficiente para os usuários lerem e usarem o conteúdo;
- Tornar o conteúdo de texto legível e compreensível;
- Fazer com que as páginas apareçam e funcionem de modo previsível;
- Maximizar a compatibilidade entre as interfaces utilizadas pelos usuários, incluindo os recursos de tecnologia assistiva (ou seja, ele deve ser criado para ser acessado perfeitamente de qualquer dispositivo e navegador, tanto agora, quanto no futuro).
- Se o usuário aumentar a visualização com 200% de zoom, a página deve continuar usável
- Tamanho mínimo de elementos interativos: 22px no desktop e 44px no mobile.
- Tratamento de links: ao menos duas características gráficas que diferenciam o link dos outros elementos.
- Tipografia: texto com, pelo menos, 14px de tamanho.
- Design responsivo sempre deve ser privilegiado
Muitas dessas diretrizes já estão presentes em nossos componentes do Design System, mas ainda assim, algumas regras precisam ser levadas em consideração na hora de desenvolver telas quando a nossa biblioteca for utilizada para confecção de telas em projetos.
# Cores
# Contraste
Tanto o texto quando os componentes em uma página devem atender a especificação mínima de contraste para passar nas normas padrão AA da WCAG 2.1. Nossos componentes e biblioteca de cores já atendem essas necessidades e devem sempre serem usadas. Mesmo assim, ao usar combinações de cores fora do padrão estabelecido nos layouts e exemplos definidos nos times de UX tenha em mente essas recomendações.
# Porque?
Pessoas com baixa visão podem ter problemas ao ler informações importantes na tela. Dependendo do nível de contraste, usuários podem nem ver os itens. Além de poderem ser confundidos com itens desativados, isso dificulta ações como selecionar opções corretas por exemplo.
# Uso de cores
Um dos principais pontos do guia WCAG, diz que a cor não deve ser o único meio de transmitir informação, ou de distinguir um elemento visual. Devemos usar a cor para ressaltar ou complementar o que já é visível. Em um exemplo de formulário onde temos uma caixa de erro, esse deve retornar além de cor, um texto de apoio evidenciando o erro, ou até mesmo o uso de um ícone para apoiar a informação.
# Porque?
Cores vermelhas e verdes podem ser afetadas por deficiências de visão de cores. Essas cores, podem ser difíceis para pessoas com deuteranopia ou protanopia, que vão perceber essas cores, como uma outra cor, muito similar, e pode resultar no usuário tendo dificuldades de entendimento ao consumir as informações na tela.
# Tipografia
# Links
As tecnologias assistivas ajudam a usuários a navegar pelas páginas de forma mais fácil. Para isso, tenha certeza que os textos de links são únicos e importantes. Deve-se ter o mínimo de referências duplicadas para evitar confusão.
# Alt-Text
Sempre use o atributo html “alt” quando colocar um rótulo em imagens. Se a imagem já possui uma descrição, você deve incluir o atributo alt=“ ”. Isso previne que o leitor de tela fale sobre a imagem diversas vezes para o usuário.
# Porque?
Leitores de tela, ao passar por imagens, gráficos e ícones, por padrão vai ditar o nome do arquivo, o que pode ser ruim na maioria das vezes e dificultar o entendimento do usuário. (Por exemplo: imagem-final-final-2.jpg).
# Conteúdos flutuantes no foco
Cards e tooltips que abrem quando existe a ação “hover” precisam ter atenção. Para estarem acessíveis, elas devem corresponder a algumas regras:
- Dispensável: ser capaz de dispensar dicas sem mover o mouse ou o foco do teclado (a menos que seja um erro de entrada ou não cubra outro conteúdo).
- Visível: O ponteiro deve poder mover sobre o conteúdo sem que ele desapareça.
- Persistente: A janela de dica por exemplo, não deve sumir sem que haja uma ação do usuário.
# Acessibilidade no teclado
Todos os elementos interativos devem ser acessíveis e ativáveis somente por uso de teclado.
- O uso da tecla “tab” deve poder ser usável para acessar controles como botões, links, e teclas direcionais devem ser usáveis para navegar dentro de um grupo de controle como uma lista de caixas de seleção.
- Algumas tecnologias assistivas têm combinações de teclado que substituem as de uma página da web, portanto, não conte com os atalhos do teclado como a única alternativa para as ações do mouse.