Acessibilidade

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

Deficiência na visão de cores

Pessoas diferentes percebem as cores de maneira diferente. Pessoas com protanopia não percebem o vermelho como uma cor distinta. Na deuteranopia, falta verde. Para pessoas com tritanopia, é azul.

Algumas ferramentas dão 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.

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 diferentes. Por exemplo, você pode e deve mudar a cor dos links em relação ao texto ao redor. Mas você também deve aplicar algum outro indicador de estilo, como sublinhar os links ou deixá-los 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 e do segundo plano, o texto vai ficar difícil de ler. O baixo contraste de cores é um dos problemas de acessibilidade mais comuns na Web, mas, felizmente, é um que você pode perceber no início do processo de design.

Confira algumas ferramentas que podem ser usadas para testar a taxa de contraste das cores do texto e do plano de fundo:

• O tota11y é um marcador que você pode adicionar à barra de ferramentas do seu navegador.
• O VisBug é uma extensão disponível para todos os principais navegadores para computador.
• O Inspetor de acessibilidade do Firefox pode verificar problemas de contraste visual.
• Você também pode descobrir e corrigir textos de baixo contraste com o Chrome DevTools.
• No navegador Edge da Microsoft, é possível testar o contraste de cor do texto usando o seletor de cores.

É recomendável sempre declarar color e background-color juntos no CSS. Não presuma que a cor do plano de fundo será o padrão do navegador. As pessoas podem e mudam as cores usadas pelo navegador.

body {
  color: black;
}

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

Alto contraste

Algumas pessoas configuram os sistemas operacionais para usar um modo de alto contraste. Faça 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 em busca de três valores: no-preference, less e more. Você pode usar essas informações para ajustar a paleta de cores do seu site.

Também é possível definir uma preferência no sistema operacional para o uso de cores invertidas.

No Mac, acesse:

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

Selecione a opção para inverter as cores.

Verifique se seu site ainda faz sentido para alguém que está navegando com cores invertidas. Cuidado com as sombras da caixa, que podem precisar de ajustes quando as cores são invertidas.

Tamanho da fonte

A cor não é o único ajuste no navegador, mas também o tamanho padrão da fonte. À medida que a visão diminui, elas podem ajustar o tamanho da fonte padrão dos 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 seu navegador. Você pode fazer isso nas preferências do seu navegador. Ou você pode fazer isso ao visitar uma página da Web aumentando o zoom. Seu site continuará funcionando se o tamanho da fonte padrão for aumentado em 200%? E 400%?

Alguém que acessa seu site em um computador desktop com o tamanho da fonte em 400% deve ter o mesmo layout que alguém que acessa o 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 forma de navegar por uma página, sendo muito útil a tecla tab. Os usuários podem passar rapidamente de um link ou campo de formulário para o próximo.

Links estilizados com as pseudoclasses :hover e :focus mostram esses estilos independente de o usuário usar um mouse, um trackpad ou um teclado. Use a pseudoclasse :focus-visible para definir o estilo dos links apenas para a navegação pelo teclado. Você pode tornar esses estilos ainda mais perceptíveis.

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

Conforme as guias do usuário vão do link para o link ou do campo do formulário para o campo do formulário, esses elementos vão ser focados na ordem em que aparecem na estrutura do documento. Isso também precisa corresponder à ordem visual.

Tenha cuidado com a propriedade CSS order. Você pode usá-lo em combinação com flexbox e grid para colocar os elementos em uma ordem visual diferente da sua ordem no HTML. Esse é um recurso eficiente, mas que 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 das guias faça sentido.

No painel Acessibilidade das ferramentas para desenvolvedores do navegador Firefox, há uma opção para Mostrar ordem de tabulação. Se ativar esta opção, os números serão sobrepostos em cada elemento focalizável.

Movimento reduzido

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

Há uma consulta de recurso que informa se o usuário prefere menos movimento. Ele se chama prefers-reduced-motion. Inclua-o sempre que estiver usando animações ou transiçõ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 é específica para movimento na tela. Se você estiver usando transições na cor de um elemento que não podem ser afetadas por prefers-reduced-motion. Também é possível fazer a transição de opacidade e cross-fade. Movimento reduzido não precisam significar que não há animação.

Voice

As pessoas têm uma experiência diferente na Web. Nem todo mundo está vendo seu site em uma tela. As tecnologias assistivas, como leitores de tela, convertem a saída da informação em uma tela em palavras faladas.

Os leitores de tela funcionam com todos os tipos de aplicativos, inclusive 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 que está sendo acessada.

Você aprendeu como os botões exclusivos de ícone precisam incluir um atributo para especificar a finalidade do botão para usuários sem visão. Esse é apenas um exemplo da importância de um HTML básico sólido.

Títulos

Use títulos como <h1>, <h2>, <h3> etc. de maneira coerente. 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 ponto de referência 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 pontos de referência.

<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 do formulário tem um elemento <label> associado. É possível associar um rótulo a um campo de formulário usando o atributo for no elemento <label> e o atributo id correspondente no campo do 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 em 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, você ainda precisará incluir o atributo alt, mas é possível fornecer um valor vazio a ela.

<img src="texture.png">

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

Jake Archibald publicou um artigo sobre como escrever ótimos textos alt.

Links

Tente fornecer texto descritivo dentro dos 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 razoável tornará suas páginas da Web mais acessíveis para tecnologias assistivas, como leitores de tela, e também para outras saídas de áudio, como assistentes de voz.

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

ARIA significa "Accessible Rich Internet Applications" (Aplicativos avançados de Internet acessíveis). Seu vocabulário permite que você forneça informações semânticas quando não houver 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 ARIA.

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

Se possível, teste com usuários reais de leitores de tela. Isso não apenas permitirá que você entenda melhor como as pessoas navegam na Web, mas também eliminará a imprevisibilidade do design voltado à acessibilidade.

Testar com pessoas reais é uma ótima maneira de expor qualquer suposições que você esteja fazendo. No próximo módulo, você 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 seus conhecimentos sobre acessibilidade