Boas práticas para construção de website acessível de raiz

Apesar de não haver falta de informação sobre boas práticas de acessibilidade para a Web, pelo menos desde 1997, com o lançamento, em Portugal, do Livro Verde para a Sociedade da Informação, esses conteúdos são muitas vezes difíceis de compreender. E, outras vezes, difíceis de encontrar em português e de forma resumida e objetiva.

Por isso disponibiliza-se neste artigo alguns pontos que devem ser tidos em conta logo no planeamento de um site novo. Embora não sejam os únicos, nem suficientes para garantir a acessibilidade, aplicar estas sugestões podem minimizar as barreiras de acessibilidade do site e evitar custos adicionais e reclamações.

Estrutura

Regiões nav “Menu principal” e “Breadcrumb”, main e footer.

H1 único: título da página.

H2: Títulos de secções ou subtítulos de conteúdo

H3: Sub-subtítulos de conteúdo

Primeiro Link da página deve ser o Link Saltar para o conteúdo (âncora HTML normal).

Apresentação visual

Não retirar outline dos elementos interativos e garantir que o “retângulo” que contorna o elemento tem contraste suficiente;

Utilizar CSS para definir a apresentação visual: espaçamento, posicionamento, tamanho da fonte, etc;

Definir sempre cor da letra e do fundo;

Verificar contraste entre a cor da letra e a cor de fundo: validador Wave;

Se houver texto sobre imagens, garantir que há contraste suficiente;

Não utilizar tipos de letra diferentes nem serifados, nem demasiado estilizados;

Não justificar texto;

Não escrever palavras em maiúsculas para destacar a menos que sejam siglas;

Garantir que não se perde informação ao ampliar até 200%;

Código HTML e comportamento

Utilizar Javascript apenas para gerir o comportamento da interação e não para carregar conteúdo;

Utilizar preferencialmente elementos HTML nativos corretamente etiquetados e utilizar wai-aria para transmitir informações sobre elementos: etiquetas, estados, etc.;

Utilizar as tags Form e Fieldset para identificar formulários e agrupar campos relacionados de formulários;

Associar corretamente as etiquetas aos elementos de formulário.

Garantir que não existem erros de HTML, validador do W3C e ferramentas do programador do próprio navegador.

Validadores automáticos sugeridos

AccessMonitor Plus

Validador em português e inglês para WCAG2.1

Rocket Validator

Validador, em inglês, de acessibilidade e de html, várias páginas de uma só vez

Wave – Web Accessibility Tool

Validador em inglês para WCAG – Ótimo para verificar contrastes.

QualWeb

Validador em inglês para WCAG2.1 e regras ACT

Validador HTML do W3C

Materiais de apoio

comAcesso (site de Norberto Sousa)

Diretrizes WCAG 2.1 (Em inglês)

Checklists acessibilidade e usabilidade

CSS em ação

Introdução à ARIA para acessibilidade na Web