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
Validador em português e inglês para WCAG2.1
Validador, em inglês, de acessibilidade e de html, várias páginas de uma só vez
Validador em inglês para WCAG – Ótimo para verificar contrastes.
Validador em inglês para WCAG2.1 e regras ACT
Materiais de apoio
comAcesso (site de Norberto Sousa)
Diretrizes WCAG 2.1 (Em inglês)