O alto contraste facilita a leitura e a compreensão do conteúdo para pessoas com dificuldades visuais, como daltonismo ou visão embaçada. Quando as cores de fundo e texto têm um contraste forte, é mais fácil para essas pessoas distinguir as informações, tornando o site mais inclusivo e acessível para todos. Isso ajuda a garantir que mais pessoas possam navegar de forma eficiente e sem barreiras. [1]
2. Ampliação da tela
O conteúdo permaneça claro e organizado, ao aumentar a tela com zoom em até 200%.
Ao aumentar a tela com o zoom do navegador em até 200%, o conteúdo precisa continuar claro e organizado, sem que nenhuma informação desapareça ou fique sobreposta. [2]
3. Áreas de clique
Áreas clicáveis com no mínimo 44px (pixels) de altura e 44px de largura.
Os botões e áreas de clique de uma página devem ter um tamanho suficiente para que qualquer pessoa consiga usar com facilidade e segurança. Em computadores, o tamanho mínimo recomendado é de 24x24px, e em celulares é 48x48px. Mesmo que o ícone ou botão em si seja menor, como por exemplo 40px ou 20px de largura. Porém, não tão grandes a ponto de invadirem o espaço de outros botões ou elementos próximos. Ainda mais em telas menores para não ocorrer cliques acidentais. [3]
4. Design responsivo
Certifique-se que o design seja responsivo.
O design responsivo é muito importante para a acessibilidade, pois permite que a interface se adapte às necessidades de quem está navegando.
Uma dica é começar a criar o design para celular e, depois, ajustar para computadores. Isso facilita o desenvolvimento e garante que o conteúdo fique bem organizado em telas de todos os tamanhos. [4]
5. Foco visível
Tenha algum tipo de destaque ao redor do elemento, como borda, moldura ou brilho.
Garantir que o foco esteja visível na tela é essencial. O foco é como um destaque ao redor do elemento em que o usuário está interagindo, como uma borda ou moldura. Quando o foco não aparece ou simplesmente não existe, fica muito difícil navegar usando apenas o teclado.
Para resolver isso, use recursos visuais para mostrar claramente onde está o foco. [5]
6. Navegação 100% por teclado
Permite/visa a navegação por meio de Atalhos de teclado como o TAB.
Todas as funções de uma página web precisam funcionar usando apenas o teclado. Por isso, é importante evitar efeitos visuais que dependem somente do movimento do mouse, como quando passamos o cursor sobre algo (mouseover) para revelar informações. Uma boa alternativa é fazer com que as ações também sejam ativadas com um clique, permitindo que pessoas que usam leitores de tela consigam acessar tudo usando o teclado. [6]
7. Pausar, parar ou ocultar conteúdo
Conteúdos que se movem, permita opções para pausar, reduzir movimento e avançar e voltar.
Para conteúdos que se movem, como carrosseis, é essencial permitir que o usuário possa pausar, esconder ou parar. Movimentos automáticos sem controle podem prejudicar a experiência de pessoas com condições neurodiversas ou que usam leitores de tela. Isso acontece porque esses conteúdos podem gerar sobrecarga mental, distrair do restante da página ou dificultar a navegação.
Por isso, evite usar movimentos automáticos sempre que possível. Se for realmente necessário mantê-los, ofereça opções de pausar, reduzir o movimento, além de botões para avançar e voltar. [7]
8. Tamanho da fonte
Tenha ferramentas que aumentem ou diminuiam a fonte para o leitor.
Botões para ajuste do tamanho das letras, embora não sejam obrigatórios para garantir a acessibilidade, podem ser úteis para os usuários. Isso ocorre porque muitas pessoas com deficiência já utilizam essas funções diretamente em seus navegadores ou por meio de atalhos no teclado. No entanto, é fundamental que o site seja bem elaborado e compatível com essas ferramentas. Assim, esses botões podem oferecer mais conforto durante a navegação. [8]
9. Uso da cor
Use informações além da cor, como forma ou texto, para transmitir significado.
A cor não é utilizada como o único meio visual de transmitir informações, indicar uma ação, pedir uma resposta ou distinguir um elemento visual. [9]