Por que a acessibilidade na web é importante?

Quem se beneficia da acessibilidade?

• Deficiência visual: usuários com cegueira, baixa visão ou daltonismo.

• Deficiência auditiva: pessoas com dificuldades auditivas ou surdez.

• Deficiência motora: aqueles que utilizam tecnologias assistivas para navegação, como switches ou teclados adaptados.

• Deficiência cognitiva: usuários com dislexia, déficit de atenção ou dificuldades de compreensão.

Quando criamos para todos, atingimos um público muito mais amplo, melhoramos o SEO e até mesmo nos alinhamos a leis de acessibilidade.

Acessibilidade na prática: impacto real no ecossistema de programação

No vídeo, você aprenderá:

• O impacto da acessibilidade na vida de pessoas com deficiência.

• Como ferramentas e boas práticas ajudam no desenvolvimento de aplicações acessíveis.

• A importância de pensar na acessibilidade desde o início de qualquer projeto.

Princípios básicos de acessibilidade (WCAG)

1. Perceptível

1.1. Texto alternativo

• Forneça descrições claras para imagens que contenham informações importantes:

<img src="formacao.png" alt="Ilustração mostrando o fluxo de aprendizado na Rocketseat">

• Para imagens decorativas, use alt="" para que leitores de tela as ignorem.

1.2. Audiodescrição

• Inclua narrações que descrevam o contexto visual de vídeos.

• Use ferramentas para criar audiodescrições.

1.3. Cores e contraste

• Adote cores que atendam aos critérios de contraste (mínimo de 4.5:1). Ferramentas como o Contrast Checker ajudam a validar.

body {
  color: #222;
  background-color: #f9f9f9;
}

1.4. Design responsivo e zoom

1. Layout fluido:
• Evitar uso de larguras fixas em pixels para o layout principal. Prefira unidades relativas (%, rem, em) para que o conteúdo se adapte ao zoom.
• Para entender na prática a importância de unidades relativas (rem) e espaçamentos fluídos em um footer, confira o vídeo abaixo:

2. Teste de zoom (200% ou mais):
• Certificar-se de que, ao aplicar zoom, o layout não exige rolagem horizontal contínua e que os elementos não fiquem sobrepostos.

3. Manter boa legibilidade:
• Fontes devem ter tamanho mínimo recomendado (ex.: 16px padrão) e permitir fácil escala com zoom.
• Contraste e espaçamento devem ser pensados para que o conteúdo continue legível mesmo em telas pequenas ou com zoom aumentado.

Exemplo rápido de CSS

.container {
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

• Assim, quando aplicado zoom, o conteúdo se ajusta sem criar barras de rolagem indesejadas.

1.5. Estrutura da página

<main>
  <h1>Cursos Rocketseat</h1>
  <section>
    <h2>Trilhas disponíveis</h2>
    <ul>
      <li>Ignite</li>
      <li>Explorer</li>
    </ul>
  </section>
</main>

2. Operável

2.1. Foco visível

• Destaque o elemento em foco com estilos visuais:

button:focus {
  outline: 3px solid #8257e5;
}

2.2. Atalhos de teclado

• Adicione atalhos para facilitar o acesso a funcionalidades:

<button accesskey="h">Home</button>

2.3. Ordem de tabulação

• Certifique-se de que a navegação seja lógica:

<a href="#inicio">Ir para o início</a>

2.4. Tempo limite

• Permita que usuários ajustem ou estendam o tempo para completar ações importantes.

• Se o site tiver formulários longos ou etapas de compra, garanta que seja possível retomar a sessão ou revalidar dados sem perder todo o progresso.

Assim como o tempo limite, outras medidas de usabilidade, como oferecer um “Link de pular para o conteúdo”, são fundamentais para garantir a navegabilidade por teclado ou leitor de tela. Ambas as técnicas fazem parte do princípio de “Operável” na WCAG.

2.5. Link de pular para o conteúdo (Skip to Main Content)

• Essa âncora deve ter uma classe (por exemplo, .skip-link) que possibilita aplicar estilo para que fique visível apenas ao receber foco (para não atrapalhar o layout).

• Identifique o conteúdo principal:

<main id="conteudo-principal">
  <!-- Conteúdo principal do site -->
</main>

• Garanta que o id no main seja o mesmo especificado no href do link de pulo.

• Estilize corretamente (opcional, mas recomendado):

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  background: #f1f1f1;
  padding: 8px;
  font-size: 1rem;
  color: #000;
  z-index: 1000;
}

• Isso fará com que o link apareça somente quando focado, mantendo o design limpo, mas oferecendo acessibilidade para usuários que navegam via teclado ou leitor de tela.

3. Compreensível

3.1. Linguagem clara

• Explique termos técnicos e use linguagem simples:

<p>Digite seu e-mail no campo abaixo para receber atualizações.</p>

3.2. Navegação consistente

• Utilize menus e estrutura de navegação uniformes em todo o site.

3.3. Prevenção de erros

• Inclua validação de formulários e mensagens de erro amigáveis:

<label for="senha">Senha:</label>
<input type="password" id="senha" required>
<span role="alert">A senha deve conter ao menos 8 caracteres.</span>

4. Robusto

4.1. Compatibilidade com tecnologias assistivas

4.1.1 Exemplos práticos de ARIA

• Barra de navegação:

<nav role="navigation" aria-labelledby="titulo-navegacao">
  <h2 id="titulo-navegacao" class="visually-hidden">Menu principal</h2>
  <ul>
    <li><a href="#inicio">Início</a></li>
    <li><a href="#sobre">Sobre</a></li>
    <li><a href="#contato">Contato</a></li>
  </ul>
</nav>

role="navigation" deixa claro para leitores de tela que se trata de um menu.

aria-labelledby="titulo-navegacao" vincula o texto “Menu principal” (mesmo que esteja oculto) para descrevê-lo.

• Botões e ícones (aria-label):

<button aria-label="Abrir menu de configurações">
  <svg>...</svg>
</button>

Se o botão for apenas um ícone, aria-label descreve a ação para usuários de leitor de tela.

Se há um texto visível no elemento, prefira aria-labelledby. Se não houver, use aria-label.

• Alertas (role="alert"):

<div role="alert" aria-live="assertive">
  Ocorreu um erro no envio do formulário. Tente novamente.
</div>

role="alert" e aria-live="assertive" avisam de forma imediata sobre atualizações importantes.

4.2. Testes em diferentes navegadores

• Garanta a funcionalidade em navegadores como Chrome, Firefox e Edge.

4.3. Validação de código

• Use ferramentas como o W3C Validator.

Ferramentas úteis

• Google Lighthouse: auditorias automáticas de acessibilidade.

• WAVE: identificação de barreiras.

• NVDA: teste com leitores de tela.

• Realizar testes exploratórios: convidar usuários com deficiência visual ou motora para navegar pelo site e fornecer feedback sobre dificuldades encontradas.

• Documentar as descobertas: criar relatórios que apontem barreiras e oportunidades de melhoria, garantindo um ciclo de desenvolvimento inclusivo.

Conclusão