Acessibilidade: quem lê o seu portfólio com o ouvido · HTML do zero

Como um leitor de tela lê

Um leitor de tela é um programa que anuncia em voz alta o que está na página. Quem o usa não vê o layout: ouve a página em sequência, e navega com atalhos:

listar todos os títulos e saltar para um;
listar todos os links;
listar as regiões: cabeçalho, navegação, conteúdo principal;
percorrer com o Tab, campo a campo.

Ou seja: tudo o que as aulas anteriores já ensinaram; hierarquia de títulos, texto de link que diz o destino, <main> e <nav> no lugar de <div>; já é acessibilidade. Não é um trabalho extra no fim: é o mesmo trabalho, bem feito.

Por que isso é o seu portfólio, e não outra página qualquer

Um portfólio tem uma particularidade: ele é a amostra do seu trabalho. Quem o abre não está só procurando o seu telefone - está olhando o que você entrega quando ninguém está pedindo nada.

Um portfólio com imagem sem alt, campo sem rótulo e foco invisível responde à pergunta antes de você. E responde mal.

O teste do teclado

Solte o mouse. Percorra sua página com Tab, Shift+Tab e Enter.

Três perguntas:

Dá para chegar a tudo? Todo link, todo campo, todo botão.
Dá para ver onde você está? Deve haver um contorno visível no elemento focado. Se não há, alguém apagou com CSS: erro grave e comum.
A ordem faz sentido? Ela segue a ordem do HTML. Se a ordem parece aleatória, o HTML está fora de ordem.

É o teste mais barato que existe, e pega a maior parte dos defeitos.

No seu portfólio, o percurso deve ser: pular para o conteúdo → os seis links do menu → o conteúdo → os links do rodapé. Se o Tab entrar no menu antes do link de pular, o link de pular não é o primeiro elemento do <body>.

Nomear o que não tem texto

Um botão com ícone e nada escrito não tem o que ser anunciado:

<!-- O leitor de tela anuncia "botão". E só. -->
<button>✕</button>

<!-- Agora anuncia "Fechar, botão" -->
<button aria-label="Fechar">✕</button>

No rodapé do portfólio, os ícones de rede têm o mesmo problema:

<!-- Anuncia "link". Três vezes. -->
<a href="https://github.com/marinasales">
  <img src="imagens/github.svg" alt="" />
</a>

<!-- Anuncia "GitHub, link" -->
<a href="https://github.com/marinasales" aria-label="GitHub">
  <img src="imagens/github.svg" alt="" />
</a>

Repare que a imagem fica com alt="": quem dá nome é o link. Pôr alt="GitHub" e aria-label="GitHub" faz o leitor anunciar duas vezes.

O mesmo vale para os <nav> da mesma página:

<nav aria-label="Menu principal">...</nav>
<nav aria-label="Navegação do rodapé">...</nav>
<nav aria-label="Redes sociais">...</nav>

A primeira regra do ARIA

ARIA é um conjunto de atributos que descrevem função e estado para tecnologias assistivas. E a primeira regra dele é:

Não use ARIA se existe uma tag HTML que já faz aquilo.

<!-- Errado: precisa de role, tabindex e JavaScript para o Enter funcionar -->
<div role="button" tabindex="0" onclick="enviar()">Enviar</div>

<!-- Certo: já é focável, já responde ao Enter e ao espaço, já é anunciado -->
<button type="submit">Enviar mensagem</button>

O <button> de verdade traz de graça: foco pelo teclado, resposta ao Enter e ao espaço, anúncio correto, e o comportamento que a pessoa espera. A <div> com role precisa que você reimplemente cada uma dessas coisas: e você vai esquecer alguma.

O mesmo erro tem uma versão de portfólio: o "botão" que na verdade leva a outra página. Se leva a algum lugar, é <a>. Se faz alguma coisa, é <button>. No curso de CSS os dois podem ficar idênticos na tela - e continuar sendo coisas diferentes por baixo, que é como deve ser.

O que já foi ensinado, e por quê

O que	Por que é acessibilidade
`<h1>` a `<h6>` em ordem	é o índice pelo qual a pessoa navega
texto de link que diz o destino	a lista de links precisa fazer sentido sozinha
`alt` que descreve a imagem	é o que substitui a imagem para quem não a vê
`<label for>` em todo campo	é o nome do campo, e amplia a área de toque
`<fieldset>` e `<legend>` no rádio	é o que diz qual é a pergunta
`scope` nas células de cabeçalho	é o que dá sentido a "Fluente"
`<main>`, `<nav>`, `<header>`	são as regiões que o atalho de salto usa
`lang="pt-BR"` no `<html>`	é o que faz a voz pronunciar em português

Oito linhas, e você escreveu todas nas aulas 2 a 10.

O que ainda depende do CSS

Duas coisas ficam para o curso seguinte, mas vale saber que existem:

Contraste. Texto cinza-claro sobre branco é ilegível: e aqui, onde muita gente lê no celular na luz do sol, isso é diária. Num portfólio de fundo escuro - o formato mais comum - o risco é o mesmo, invertido: cinza-escuro sobre preto.
O anel de foco. Nunca escreva outline: none sem pôr outra coisa no lugar. Sem o anel, quem navega por teclado perde a posição na página.

No portfólio

Hoje não se escreve conteúdo novo: audita-se o que existe. Percorra as seis páginas com esta lista:

Depois passe o validador do W3C nas seis páginas. Ele não mede acessibilidade, mas pega tag não fechada e atributo inválido - e HTML quebrado é a causa de metade dos defeitos de leitor de tela.

Exercícios

Percorra as seis páginas com o Tab. Anote todo lugar onde você não conseguiu chegar, ou não soube onde estava.
Liste, no papel, todos os títulos da sua página inicial na ordem. A lista faz sentido sozinha?
Liste todos os textos de link do portfólio. Algum se repete sem dizer o destino?
Confira se toda imagem tem alt, e se as decorativas têm alt="".
Dê aria-label a todo link só com ícone do seu rodapé.
Instale um leitor de tela gratuito: NVDA no Windows, ou o VoiceOver que já vem no Mac e no iPhone: e ouça o seu portfólio do começo ao fim. Anote em que ponto você se perdeu. É desconfortável na primeira vez, e ensina mais que qualquer aula.

Referências

Acessibilidade - MDN - o curso completo da MDN, em português
Como as pessoas com deficiência usam a web - W3C - histórias reais de uso
Regras do ARIA - W3C - as cinco regras, começando pela de não usar