Acessibilidade

Permitir que as páginas respondam a diferentes tamanhos de tela é apenas uma maneira de garantir que seu site seja acessível ao maior número possível de pessoas. Considere alguns destes outros fatores que você precisa ter em mente.

Deficiência na visão das cores

As pessoas percebem as cores de maneiras diferentes. Pessoas com protanopia não percebem o vermelho como uma cor distinta. Na deuteranopia, o verde está ausente. Para pessoas com tritanopia, é o azul.

Algumas ferramentas podem dar uma ideia geral de como seus esquemas de cores aparecem para pessoas com diferentes tipos de visão de cores.

A guia "Acessibilidade" do Firefox inclui um menu suspenso chamado Simular com uma lista de opções.

No Chrome DevTools, a guia "Renderização" permite emular deficiências visuais.

Essas são ferramentas específicas do navegador. Também é possível emular diferentes tipos de visão no nível do sistema operacional.

No Mac, acesse:

1. Preferências do sistema
2. Acessibilidade
3. Tela
4. Filtros de cor
5. Ativar filtros de cor

Selecione uma das opções.

Em geral, não é uma boa ideia confiar apenas na cor para diferenciar elementos. Por exemplo, você pode e deve deixar seus links com uma cor diferente do texto ao redor. Mas também é necessário aplicar algum outro indicador de estilo, como sublinhar ou deixar os links em negrito.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Contraste de cor

Algumas combinações de cores podem causar problemas. Se não houver contraste suficiente entre a cor do primeiro plano e a do plano de fundo, o texto fica difícil de ler. O contraste de cor ruim é um dos problemas de acessibilidade mais comuns na Web, mas, felizmente, é possível detectá-lo no início do processo de design.

Confira algumas ferramentas que você pode usar para testar a proporção de contraste das cores do texto e do plano de fundo:

• VisBug é uma extensão do navegador disponível para todos os principais navegadores de computador.
• O inspetor de acessibilidade do Firefox pode verificar problemas de contraste visual.
• Também é possível descobrir e corrigir textos de baixo contraste com o Chrome DevTools.
• No navegador Edge da Microsoft, você pode testar o contraste da cor do texto usando o seletor de cores.

É uma boa ideia sempre declarar color e background-color juntos no CSS. Não suponha que a cor do plano de fundo será a padrão do navegador. As pessoas podem mudar as cores usadas pelo navegador.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Alto contraste

Algumas pessoas definem os sistemas operacionais para usar um modo de alto contraste. Você pode tentar isso no seu sistema operacional.

No Mac, acesse:

1. Preferências do sistema
2. Acessibilidade
3. Tela

Selecione a opção para aumentar o contraste.

Há um recurso de mídia para detectar se alguém ativou o modo de alto contraste. O recurso de mídia prefers-contrast pode ser consultado para três valores: no-preference, less e more. Você pode usar essas informações para ajustar a paleta de cores do seu site.

As pessoas também podem definir uma preferência no sistema operacional para usar cores invertidas.

No Mac, acesse:

1. Preferências do sistema
2. Acessibilidade
3. Tela

Selecione a opção para inverter as cores.

Verifique se o site ainda faz sentido para alguém que navega com cores invertidas. Preste atenção às sombras de caixa, que podem precisar de ajuste quando as cores são invertidas.

Tamanho da fonte

A cor não é a única coisa que as pessoas podem ajustar no navegador. Elas também podem ajustar o tamanho da fonte padrão. À medida que a visão diminui, elas podem ajustar o tamanho da fonte padrão nos navegadores ou sistemas operacionais, aumentando os números com o passar dos anos.

Você pode responder a essas configurações usando tamanhos de fonte relativos. Evite usar unidades como px. Use unidades relativas como rem ou ch.

Tente mudar a configuração de tamanho de texto padrão no navegador. Você pode fazer isso nas preferências do navegador. Ou pode fazer isso enquanto visita uma página da Web, aumentando o zoom. Seu site ainda funciona se o tamanho da fonte padrão for aumentado em 200%? E em 400%?

Alguém que visita seu site em um computador com o tamanho da fonte aumentado para 400% deve ter o mesmo layout de alguém que visita seu site em um dispositivo de tela pequena.

Navegação pelo teclado

Nem todo mundo usa um mouse ou um trackpad para navegar em páginas da Web. Um teclado é outra maneira de navegar em uma página, sendo a tecla tab particularmente útil. Os usuários podem se mover rapidamente de um link ou campo de formulário para o próximo.

Os links estilizados com as :hover e :focus pseudoclasses, vão mostrar esses estilos, independentemente de alguém estar usando um mouse, um trackpad ou um teclado. Use a :focus-visible pseudoclasse para estilizar seus links apenas para navegação pelo teclado. Você pode deixar esses estilos mais perceptíveis.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

À medida que o usuário passa de link para link ou de campo de formulário para campo de formulário, esses elementos são focados na ordem em que aparecem na estrutura do documento. Isso também precisa corresponder à ordem visual.

Tenha cuidado com a propriedade order do CSS. Você pode usar isso em combinação com o flexbox e a grade para colocar elementos em uma ordem visual diferente da ordem no HTML. Esse é um recurso avançado, mas pode confundir as pessoas que navegam com um teclado.

Teste suas páginas da Web usando a tecla tab no teclado para garantir que a ordem de tabulação faça sentido.

No painel Acessibilidade das ferramentas para desenvolvedores do navegador Firefox, há uma opção para Mostrar ordem de tabulação. Ativar essa opção vai sobrepor números em cada elemento focalizável.

Movimento reduzido

Animação e movimento são maneiras maravilhosas de dar vida aos designs da Web. Mas, para algumas pessoas, esses movimentos podem ser muito desorientadores e até causar náuseas.

Há uma consulta de recursos que comunica se o usuário prefere menos movimento. Ela é chamada de prefers-reduced-motion. Inclua-a sempre que estiver usando transições ou animações CSS.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

A consulta de mídia prefers-reduced-motion é especificamente para movimento na tela. Se você estiver usando transições na cor de um elemento que não deve ser afetado por prefers-reduced-motion. Também é possível fazer a transição de opacidade e o crossfade. O movimento reduzido não precisa significar nenhuma animação.

Voz

As pessoas têm experiências diferentes na Web. Nem todo mundo está vendo seu site em uma tela. Tecnologias assistivas, como leitores de tela, convertem as informações exibidas em uma tela em palavras faladas.

Os leitores de tela funcionam com todos os tipos de aplicativos, incluindo navegadores da Web. Para que um navegador da Web se comunique de maneira útil com um leitor de tela, é necessário que haja informações semânticas úteis na página da Web acessada.

Anteriormente, você aprendeu como os botões somente com ícones precisam incluir um atributo para especificar a finalidade do botão para usuários não videntes. Esse é apenas um exemplo da importância de um HTML fundamental forte.

Títulos

Use títulos como <h1>, <h2>, <h3> etc. de maneira sensata. Os leitores de tela usam esses títulos para gerar uma estrutura de tópicos do documento que pode ser navegada com atalhos do teclado.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Estrutura

Use elementos de marco, como <main>, <nav>, <aside>, <header> e <footer>, para estruturar o conteúdo da página. Os usuários de leitores de tela podem pular diretamente para esses marcos.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Formulários

Verifique se cada campo de formulário tem um elemento <label> associado. Você pode associar um rótulo a um campo de formulário usando o atributo for no elemento <label> e o atributo id correspondente no campo de formulário.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Imagens

Sempre forneça uma descrição de texto das imagens usando o atributo alt.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Se a imagem for puramente de apresentação, ainda será necessário incluir o atributo alt, mas você poderá dar a ele um valor vazio.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald publicou um artigo sobre como escrever um ótimo texto alt.

Links

Tente fornecer texto descritivo nos links. Evite usar frases como "clique aqui" ou "mais".

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

O uso de HTML semântico sensato vai tornar suas páginas da Web mais acessíveis a tecnologias assistivas, como leitores de tela, e também a outras saídas de áudio, como assistentes de voz.

Alguns widgets de interface que não têm um elemento HTML correspondente, incluindo carrosséis, guias e acordeões. Eles precisam ser criados do zero com uma combinação de HTML, CSS, JavaScript e ARIA.

ARIA significa "Accessible Rich Internet Applications" (em inglês). O vocabulário permite fornecer informações semânticas quando não há um elemento HTML adequado disponível.

Se você precisar criar elementos de interface que ainda não estão disponíveis como elementos HTML, familiarize-se com o ARIA.

Quanto mais funcionalidades personalizadas você adicionar com JavaScript, mais precisará entender o ARIA. Se você usar elementos HTML padrão, talvez não precise de nenhum ARIA.

Se possível, teste com usuários reais de leitores de tela. Isso não apenas vai dar uma melhor compreensão de como eles navegam na Web, mas também vai eliminar as suposições ao projetar com acessibilidade em mente.

Testar com pessoas reais é uma ótima maneira de expor todas as suposições que você possa estar fazendo. No próximo módulo, você vai aprender sobre as diferentes maneiras como as pessoas interagem com seus sites, outra área em que é muito fácil fazer suposições.

Teste seu conhecimento

Teste seu conhecimento de acessibilidade