Acessibilidade web na prática: uma reserva, várias formas de navegar

Projete para perceber, operar e compreender

Uma interface comunica por palavras, posição, cor e comportamento. Com boa acessibilidade, esse significado se mantém em diferentes formas de apresentação. Um rótulo visível associado ao campo também dá ao leitor de tela um nome útil para anunciar. Uma hierarquia lógica de títulos ajuda quem passa os olhos pela página a se orientar e permite que outra pessoa pule de um assunto a outro com tecnologia assistiva.

A WCAG organiza a acessibilidade em quatro princípios: conteúdo perceptível, operável, compreensível e robusto. Transforme esses princípios em perguntas de design: como a informação chega até a pessoa, como ela opera os controles, se o caminho se explica sozinho e se navegadores e tecnologias assistivas conseguem interpretar o conteúdo de forma consistente. Aplicadas a uma tarefa real, essas perguntas dão à equipe um jeito prático de pensar cada componente.

Dê a cada controle um nome que ajude a agir

O formulário da oficina pede nome, e-mail e data da turma. Um rótulo visível mantém claro o que cada campo pede durante o preenchimento. Associe esse rótulo ao campo também no código: o atributo for do rótulo recebe o mesmo valor do id do campo. Assim, o navegador expõe essa relação às tecnologias assistivas, e clicar no texto do rótulo também seleciona o campo, o que aumenta a área de clique e de toque.

Prefira textos que digam a ação, como “Escolher data da oficina” e “Confirmar reserva”. Botões e links nativos já trazem o comportamento que o navegador conhece e uma boa base para o uso pelo teclado. Confira o nome acessível calculado nas ferramentas de desenvolvedor do navegador e passe pelo componente com um leitor de tela. Quando o nome visível e o nome anunciado coincidem, a pessoa reconhece a mesma ação em qualquer forma de navegar.

Crie um caminho fácil de seguir pelo teclado

Percorra a reserva com Tab e Shift+Tab, abra o seletor de data e escolha uma turma. O indicador de foco visível mostra onde você está, e uma ordem lógica liga os controles relacionados. Defina no sistema de design um estilo de foco bem visível, ao lado dos outros estados visuais. Posicione cabeçalhos fixos e banners de aviso de forma que não cubram o controle em foco.

Uma janela modal cria um espaço dedicado a uma escolha. Quando ela abrir, leve o foco para dentro dela, ofereça controles de teclado previsíveis e um jeito claro de fechar e, depois, devolva o foco a um lugar útil, normalmente o botão que abriu a janela. Essa continuidade ajuda a pessoa a não se perder na tarefa. Teste o componente real para ver como estrutura e comportamento funcionam juntos.

Deixe a estrutura e as alternativas carregarem o significado

Os títulos formam um roteiro da página. Escolha o nível de cada título pela hierarquia do conteúdo e use CSS para chegar à aparência desejada. Assim, quem visita encontra um assunto passando os olhos pela página ou navegando de título em título. Declare o idioma da página no atributo lang para que os leitores de tela usem a pronúncia certa, e dê a cada página um título próprio que explique seu propósito.

O texto alternativo de uma imagem comunica o papel dela naquele contexto. Uma planta da sala da oficina pode mostrar a disposição dos lugares ou os materiais incluídos. Um enfeite puramente decorativo pode usar o atributo alt vazio, o que mantém a atenção na informação útil. Em uma imagem que funciona como link, descreva o destino ou a ação. Para gráficos complexos, apresente a conclusão principal e ofereça, logo ao lado, uma explicação ou uma tabela com os dados.

Facilite a leitura em diferentes condições

Escolha combinações de texto e fundo que continuem fáceis de distinguir. No nível AA da WCAG, o texto comum precisa de uma razão de contraste de pelo menos 4,5:1, e o texto grande, como a WCAG o define, de pelo menos 3:1; logotipos e texto puramente decorativo estão entre as exceções. Confira as cores como aparecem na tela, inclusive texto sobre fotos, o estado de foco e as mensagens de erro e de confirmação. Registrar no sistema de design as combinações aprovadas facilita reutilizá-las.

Teste o texto ampliado e janelas estreitas. O critério Reflow (1.4.10) pede que o conteúdo possa ser exibido em uma largura equivalente a 320 pixels CSS sem perda de informação ou de funcionalidade e sem rolagem nas duas direções; partes que dependem de um layout bidimensional, como mapas, diagramas e tabelas de dados, são exceção. Mantenha navegação, instruções e ações disponíveis quando o layout se adapta. Reservar espaço para as mídias e posicionar com cuidado pop-ups e banners deixa a leitura confortável em telas pequenas e sob diferentes condições de luz.

Ligue cada escolha a um benefício para quem visita

As mensagens de erro do formulário podem orientar tanto quanto as instruções iniciais. Explique o próximo passo com palavras concretas, por exemplo: “Informe um e-mail no formato nome@example.com”. Mantenha o que já foi preenchido e deixe a orientação fácil de encontrar. Uma confirmação clara fecha a jornada dizendo o que acontece em seguida. Aplique esses padrões ao componente compartilhado para que todos os formulários se beneficiem.

Faça do teste de acessibilidade parte do dia a dia

Um teste de acessibilidade útil segue uma tarefa real: faça a reserva só pelo teclado, explore nomes e títulos com um leitor de tela e revise zoom, reflow e contraste. Inclua as instruções, os estados de seleção, as mensagens de progresso e a confirmação final. Ferramentas automáticas trazem observações repetíveis sobre a marcação, mas não substituem esse percurso; testes baseados em tarefas e o retorno de pessoas com deficiência e de quem usa tecnologias assistivas no dia a dia mostram como a experiência funciona no uso real.

Registre a página, o componente e o comportamento esperado para que a equipe consiga repetir o teste. Depois de uma alteração, confira o componente em outra página onde ele também aparece. Documente no sistema de design os bons rótulos, o comportamento de foco e os padrões de mensagem. Um campo bem feito, reutilizado em vinte páginas, leva a acessibilidade ao site inteiro e dá às novas funcionalidades um bom ponto de partida.

O que o Sitelemetry verifica e o que fica para o teste manual

A área de acessibilidade do Sitelemetry lê o HTML estático de uma URL, sem renderizar a página, e aponta sinais como imagens sem texto alternativo, campos sem rótulo, controles sem nome, ordem de títulos e títulos vazios, falta de idioma ou de título na página, ausência da região principal (main), iframes sem título, tabelas sem cabeçalho, tabindex positivo, viewport que bloqueia o zoom e mídia com reprodução automática. O contraste só é avaliado quando estilos inline definem as cores do texto e do fundo.

Essas observações ajudam a escolher componentes para corrigir, mas não substituem o teste com teclado, leitor de tela e zoom descrito acima: foco visível, navegação pelo teclado, reflow, contraste real na tela e comportamento dinâmico precisam de revisão no navegador. A pontuação não equivale a um nível da WCAG (A, AA ou AAA). A área de acessibilidade faz parte da auditoria das seis áreas, disponível a partir do plano Starter (US$ 49 por mês); o plano Free cobre apenas verificações de segurança.