{
"$type": "site.standard.document",
"canonicalUrl": "https://brunopulis.com/blog/2024/2024-09-30-5-tags-acessibilidade",
"path": "/blog/2024/2024-09-30-5-tags-acessibilidade",
"publishedAt": "2024-09-30T00:00:00.000Z",
"site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
"tags": "a11y",
"textContent": "Introdução\n\nAcessibilidade é um tema que nós desenvolvedores esquecemos, porém, é extremamente importante. Por isso, saber acessibilidade pode ser um grande diferencial.\n\nNesse artigo vou te mostrar 5 tags que ajudam na acessibilidade.\n\nVamos lá?\n\n1\\. <header>\n\nO elemento HTML <header> representa um grupo introdutório ou navegacional. Pode conter alguns elementos, como:\n\n- Logo;\n- Seções de cabeçalho;\n- Formulário de pesquisa;\n- Redes sociais;\n- Botões.\n\nEle pode ser usado em diversos contextos, como:\n\n- Dentro de um artigo de blog;\n- Dentro de uma sessão;\n- Dentro de listas.\n\nQuando usamos o <header> como navegação principal não é necessário incluir o atributo role=”banner”.\n\nMas se usarmos em um outro contexto, como o cabeçalho de um post, devemos usar:\n\n2. <nav>\n\nO elemento <nav> representa uma estrutura com links de navegação. Ela não deve ser usada em todos os links, somente em links principais.\n\nPodemos usá-la em:\n\n- Navegação principal;\n- Paginação;\n- Navegação secundária.\n\nOutro ponto importante, podem existir vários elementos <nav> em uma página. Leitores de tela são beneficiados com o uso do elemento, pois direcionam a navegação principal.\n\n3. <main>\n\nO elemento <main> define o conteúdo principal dentro do <kbd><strong><body></strong></kbd>. Ele é relacionado com o tópico central da sua página.\n\nDetalhe importante: deve existir somente um elemento <main> por página. Outra regra importante, o elemento não pode ser filho de:\n\n- \\<article>;\n- \\<aside>;\n- \\<footer>;\n- \\<header>;\n- \\<nav>.\n\nUm exemplo de uso correto do <main>:\n\n4. <footer>\n\nO elemento <kbd><strong><footer></strong></kbd> representa o rodapé do seu site.\nNormalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.\n\n5. <dialog>\n\nO elemento HTML <dialog> 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.\n\nGraças a evolução do HTML, é possível criar essa funcionalidade nativamente.\n\nUm detalhe importante, o atributo tabindex não deve ser usado com o <kbd><dialog></kbd>.\n\nPodemos usar o atributo <strong>open</strong>, que indica que a janela modal está ativa.\n\nPara estilizar o <dialog>, podemos usar o pseudo-elemento CSS ::backdrop, para estilizar seu background.\n\nMesmo que o elemento <dialog>, possua suporte completo em navegadores modernos precisamos de usar um _polyfill_, para termos retrocompatibilidade.\n\nConclusão\n\nAlé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.\n\nReferências\n\n- <header> – HTML: Linguagem de Marcação de Hipertexto\n- <nav> – HTML: Linguagem de Marcação de Hipertexto\n- <main> – HTML: Linguagem de Marcação de Hipertexto\n- <footer> – HTML: Linguagem de Marcação de Hipertexto\n- <dialog>: O elemento Dialog – HTML: Linguagem de Marcação de Hipertexto",
"title": "5 tags que ajudam na acessibilidade"
}