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 destes outros fatores que você deve ter em mente.

Deficiência na percepçã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 o verde. Para pessoas com tritanopia, a luz é azul.

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

A guia "Acessibilidade" do Firefox tem o menu suspenso Simular com uma lista de opções.

Visualizar um site com simulações de diferentes tipos de visão de cores.

No Chrome DevTools, a guia de 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. Display
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) deixar seus links de uma cor diferente do texto ao redor. Mas você também deve aplicar algum outro indicador de estilo, como sublinhar os links ou deixá-los em negrito.

O que não fazer

a {
  color: red;
}

O que fazer

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 cor do plano de fundo, 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 problema que você pode identificar no início do processo de design.

Aqui estão algumas ferramentas que você pode usar para testar a taxa de contraste das cores do texto e do plano de fundo:

• tota11y é um marcador de página que você pode adicionar à barra de ferramentas do navegador.
• O VisBug é uma extensão de navegador disponível para todos os principais navegadores de computador.
• O Inspetor de acessibilidade do Firefox pode verificar se há problemas de contraste visual.
• Você também pode descobrir e corrigir textos de baixo contraste com o Chrome DevTools.
• No navegador Edge da Microsoft, você pode 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 de fundo será o padrão do navegador. As pessoas podem mudar as cores usadas pelo navegador e fazem isso.

O que não fazer

body {
  color: black;
}

O que fazer

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

Alto contraste

Algumas pessoas configuram os sistemas operacionais para usar um modo de alto contraste. Tente fazer isso no seu sistema operacional.

No Mac, acesse:

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

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.

Compatibilidade com navegadores

• 96
• 96
• 101
• 14,1

Origem

Observação : as propriedades personalizadas de CSS são uma ótima maneira de agrupar declarações de cor. Use o recurso de mídia prefers-contrast para atualizar os valores da propriedade personalizada.

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. Display

Selecione a opção para inverter cores.

Verifique se o site ainda faz sentido para alguém que navega com cores invertidas. Cuidado com as sombras da caixa, porque elas podem precisar ser ajustadas quando as cores forem 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, eles podem ajustar o tamanho da fonte padrão nos navegadores ou sistemas operacionais, aumentando os números com o passar dos anos.

É possível responder a essas configurações usando tamanhos de fonte relativos. Evite usar unidades como px. Use unidades relativas como rem ou ch.

Tente alterar a configuração de tamanho de texto padrão em seu navegador. Você pode fazer isso nas preferências do navegador. Você também pode fazer isso enquanto visita uma página da Web, aumentando o zoom. Seu site ainda vai funcionar se o tamanho da fonte padrão aumentar em 200%? Que tal 400%?

Uma pessoa que acessa seu site em um computador desktop com um tamanho de fonte de até 400% precisa ter o mesmo layout de alguém que acessa o site em um dispositivo de tela pequena.

O mesmo site visualizado em um computador e em um dispositivo móvel. O tamanho da fonte do navegador para computador aumentou para 400%.

Navegação pelo teclado

Nem todo mundo usa um mouse ou um trackpad para navegar em páginas da Web. O teclado é outra forma de navegar por uma página, sendo a tecla tab particularmente útil. 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 exibirão esses estilos, independentemente de alguém estar usando um mouse, um trackpad ou um teclado. Use a pseudoclasse :focus-visible para definir o estilo dos links somente para navegação pelo teclado. Você pode deixar esses estilos ainda mais perceptíveis.

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

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

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

Teste suas páginas da Web usando a tecla tab no teclado para verificar se a ordem das tabulação faz sentido.

No painel Acessibilidade das ferramentas para desenvolvedores do navegador Firefox, há uma opção Mostrar ordem de tabulação. A ativação deste recurso sobrepõe os números em cada elemento focalizável.

Observação : saiba mais sobre os problemas causados pela reorganização de conteúdo.

Movimento reduzido

Animação e movimento são maneiras maravilhosas de dar vida a designs da Web. Mas para algumas pessoas, esses movimentos podem ser muito desorientadores e até mesmo 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 onde quer que esteja usando transições CSS ou animações.

Compatibilidade com navegadores

• 74,00
• 79,00
• 63,00
• 10,1

Origem

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ê está usando transições na cor de um elemento que não devem ser afetadas por prefers-reduced-motion. Também é possível fazer a transição de opacidade e cross-fade. Movimentos reduzidos não precisam significar nenhuma animação.

Voz

As pessoas usam a Web de maneiras diferentes. Nem todo mundo vê seu site em uma tela. As tecnologias adaptativas, como leitores de tela, convertem a saída de informações de 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 forma útil com um leitor de tela, é necessário que haja informações semânticas úteis na página da Web acessada no momento.

Você já aprendeu que botões exclusivos de ícones 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 cabeçalhos como <h1>, <h2>, <h3> etc. de forma 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.

O que não fazer

<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>

O que fazer

<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 sua página. Usuários de leitores de tela podem ir direto para esses pontos de referência.

O que não fazer

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

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

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

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

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

O que fazer

<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.

O que não fazer

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

O que fazer

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

Observação : para mais informações sobre acessibilidade e formulários, consulte o módulo Acessibilidade no curso "Learn Formulários".

Imagens

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

O que não fazer

<img src="dog.jpg">

O que fazer

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

Se a imagem for apenas de apresentação, inclua o atributo alt, mas é possível atribuir um valor vazio a ele.

O que não fazer

<img src="texture.png">

O que fazer

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

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

Links

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

O que não fazer

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

O que fazer

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

ARIA

O uso de HTML semântico sensível vai 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 etc. Eles precisam ser desenvolvidos do zero com uma combinação de HTML, CSS, JavaScript e ARIA.

ARIA significa "Accessible Rich Internet Applications". O vocabulário dele permite fornecer informações semânticas quando não houver um elemento HTML adequado disponível.

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

Quanto mais funcionalidades personalizadas você adicionar com o JavaScript, mais precisará entender o 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 fornecerá uma melhor compreensão de como eles navegam na Web, mas também eliminará as suposições 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

Com CSS, um desenvolvedor pode substituir uma preferência do usuário, como tamanho da fonte, para piorar?

Verdadeiro

Basta usar body { font-size: 12px; }.

Falso

As preferências do usuário têm forte influência, mas não dão controle total.

Para evitar a substituição da preferência de tamanho de fonte de um usuário, use?

Unidades absolutas, como px.

Elas não consideram a preferência de tamanho de fonte do usuário quando usadas.

Unidades relativas como rem.

Isso permite que os desenvolvedores criem com comprimentos que incluem as preferências de tamanho de fonte do usuário.

Todas as pessoas no mundo usam um mouse.

Verdadeiro

Alguns usam voz, teclado, gamepad, leitor de tela ou outras formas de interação.

Falso

Existem muitas alternativas para o popular mouse.

O que uma imagem com um atributo alternativo vazio faz?

O navegador os adicionará automaticamente para o usuário.

Não é um recurso de nenhum navegador.

A imagem é tratada como apresentação.

A imagem não é importante para consumir o conteúdo.

Lê "string vazia" a um leitor de tela

Não é isso que acontece.

Nothing

Definitivamente alguma coisa acontece.