5 tags que ajudam na acessibilidade

Introdução

Acessibilidade é um tema que nós desenvolvedores esquecemos, porém, é extremamente importante. Por isso, saber acessibilidade pode ser um grande diferencial.

Nesse artigo vou te mostrar 5 tags que ajudam na acessibilidade.

Vamos lá?

1.

O elemento HTML 

 representa um grupo introdutório ou navegacional. Pode conter alguns elementos, como:

• Logo;
• Seções de cabeçalho;
• Formulário de pesquisa;
• Redes sociais;
• Botões.

Ele pode ser usado em diversos contextos, como:

• Dentro de um artigo de blog;
• Dentro de uma sessão;
• Dentro de listas.

Quando usamos o

como navegação principal não é necessário incluir o atributo role=”banner”.

Mas se usarmos em um outro contexto, como o cabeçalho de um post, devemos usar:

O elemento 

representa uma estrutura com links de navegação. Ela não deve ser usada em todos os links, somente em links principais.

Podemos usá-la em:

• Navegação principal;
• Paginação;
• Navegação secundária.

Outro ponto importante, podem existir vários elementos

em uma página. Leitores de tela são beneficiados com o uso do elemento, pois direcionam a navegação principal.

O elemento 

 define o conteúdo principal dentro do . Ele é relacionado com o tópico central da sua página.

Detalhe importante: deve existir somente um elemento

por página. Outra regra importante, o elemento não pode ser filho de:

• <article>;
• <aside>;
• <footer>;
• <header>;
• <nav>.

Um exemplo de uso correto do

:

O elemento representa o rodapé do seu site. Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.

O elemento HTML  representa uma caixa de diálogo ou outro componente interativo, ele pode ser usado para criar janelas modais. Aquelas antigas que usávamos com muito Javascript.

Graças a evolução do HTML, é possível criar essa funcionalidade nativamente.

Um detalhe importante, o atributo tabindex não deve ser usado com o .

Podemos usar o atributo open, que indica que a janela modal está ativa.

Para estilizar o , podemos usar o pseudo-elemento CSS ::backdrop, para estilizar seu background.

Mesmo que o elemento , possua suporte completo em navegadores modernos precisamos de usar um polyfill, para termos retrocompatibilidade.

Conclusão

Além das tags auxiliarem na semântica, tem um valor significativo para acessibilidade. Não ter um canivete sem saber usá-lo. É extremamente importante, saber o que e quando usar.

Referências

• – HTML: Linguagem de Marcação de Hipertexto
• – HTML: Linguagem de Marcação de Hipertexto
• – HTML: Linguagem de Marcação de Hipertexto
• – HTML: Linguagem de Marcação de Hipertexto
• : O elemento Dialog – HTML: Linguagem de Marcação de Hipertexto