Criar activos acessíveis: Trechos/código HTML

Ao adicionar código HTML personalizado ou snippets ao teu sítio Web, a acessibilidade deve ser uma consideração fundamental. Um código mal estruturado pode criar barreiras para os utilizadores que dependem de tecnologias de assistência. Este artigo explica como escrever HTML limpo e semântico que suporta a acessibilidade. Abrange elementos como as funções ARIA, a utilização correta de etiquetas e o design compatível com o teclado para garantir que o teu código personalizado funciona para todos os visitantes.

Para garantir que o teu Web site, página de destino, formulário ou mensagem cumpre os requisitos de acessibilidade, utiliza a lista de verificação disponível aqui.

Tem em atenção que não oferecemos assistência adicional em HTML. Certifica-te de que estás à vontade com a codificação ou que tens um programador para consultar.

Requisitos

Iframes

  • O atributo de título do iframe (na página principal) deve ser exato e descritivo.
  • A página de origem de um iframe (a página incorporada no iframe) deve ter um <title> válido e significativo .

Pontos de referência

  • Os leitores de ecrã permitem que os utilizadores naveguem por pontos de referência, pelo que os pontos de referência são uma forma eficaz de contornar blocos de conteúdo, conforme exigido pelas WCAG 2.4.1.
  • As referências podem ser designadas com etiquetas HTML ou com as suas funções ARIA equivalentes (por exemplo, <cabeçalho> ou função="banner", <nav> ou função="navegação", <main> ou função="principal", <footer> ou função="informação de conteúdo", etc.).

Língua

  • A língua principal da página deve ser identificada com exatidão utilizando um código de língua normalizado no elemento, por exemplo
    • <html lang="en">,
    • <html lang="fr">.
  • As alterações de língua em linha DEVEM ser identificadas com um atributo lang válido.

Listas

  • As listas têm de ser construídas utilizando a marcação semântica adequada, ou seja:
    • <ul> ou <ol> com elementos filhos <li>,
    • ou <dl> com elementos filhos <dt> e <dd>.

Tabelas

  • Os cabeçalhos das tabelas devem ser designados com <th>.
  • O texto do cabeçalho da tabela de dados deve descrever com exatidão a categoria das células de dados correspondentes.
  • As células de dados da tabela devem ser associadas às suas células de cabeçalho correspondentes.
    • Recomenda-se vivamente a utilização do âmbito(<th scope="col"> e <th scope="row">), embora nem sempre seja necessário. Se todas as células da primeira linha forem marcadas como <th> sem escopo, a maioria dos leitores de tela modernos deduzirá que o escopo é a coluna abaixo de cada célula de cabeçalho.
  • Os cabeçalhos dos grupos de dados da tabela (se existirem) devem ser associados aos seus grupos de células de dados correspondentes (por exemplo, através de scope="rowgroup" ou scope="colgroup").
  • As associações de cabeçalho/dados que não podem ser designadas com <th> e scope devem ser designadas com os atributos header e id.
  • Os cabeçalhos de tabelas de dados e as associações de dados não devem ser referenciados em tabelas aninhadas, mescladas ou separadas.

Excepções

Alterações de linguagem em linha

São permitidas excepções para:

  • nomes próprios,
  • termos técnicos,
  • palavras de linguagem indeterminada,
  • e palavras ou frases que se tornaram parte do vernáculo do texto imediatamente adjacente.

Exemplos

código iframeFAZ: O título adicionado ao iframe explica o objetivo do conteúdo.
marcos na página da webFAZ: Pontos de referência corretamente assinalados que permitem aos utilizadores navegar através de uns.
exemplo de código usando a entrada /LangFAZ: O fragmento de código seguinte ilustra o código que é típico da utilização da entrada /Lang para substituir o idioma predefinido do documento, especificando uma sequência de conteúdo marcado no fluxo de conteúdo de uma página.
site com listas marcadasFAZ: Lista de elementos corretamente marcados.
tabela no código HTMLNÃO FAZ: Neste exemplo, são utilizados cabeçalhos aninhados, mas as células de conteúdo estão incorretamente associadas através dos atributos id e headers. Todas as células fazem referência ao cabeçalho de nível superior “Exames”(id="e") – isto não está correto para as últimas três colunas, que devem fazer referência ao cabeçalho “Projectos”. Além disso, a referência dos cabeçalhos das colunas de segundo nível foi acidentalmente trocada, embora neste exemplo isso não faça diferença, uma vez que os conteúdos (1, 2, Final) se repetem.

Artigos relacionados

Recursos populares