Banner da postagem: Guia Completo dos Atributos `aria-*` para Acessibilidade
JavaScript

Guia Completo dos Atributos `aria-*` para Acessibilidade

Entenda como os atributos `aria-*` podem melhorar a acessibilidade do seu site

Al
Allan Prado
prdev.solutions@gmail.comhttps://portfolio.prdev.com.br/

Garantir que sua página web seja acessível é um passo fundamental para criar uma experiência inclusiva para todos os usuários. Um dos principais recursos disponíveis para melhorar a acessibilidade é o uso de atributos aria-*, que são definidos pela WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Esses atributos fornecem informações adicionais para leitores de tela e outras tecnologias assistivas.

Sumário

  1. O Que São os Atributos aria-*?
  2. Principais Atributos aria-* e Seus Usos
  3. Dicas para Utilizar Atributos aria-* de Forma Eficaz
  4. Exemplo Completo de Uso dos Atributos aria-*
  5. Conclusão

O Que São os Atributos aria-*?

Os atributos aria-* são uma série de atributos de HTML que adicionam informações semânticas e de comportamento para elementos da interface do usuário. Eles permitem descrever papéis, estados e propriedades de elementos de forma que as tecnologias assistivas possam interpretar corretamente.

Por Que Usar aria-*?

Os atributos aria-* ajudam a:

  • Melhorar a navegação para usuários que dependem de leitores de tela.
  • Fornecer contexto adicional que os elementos HTML por si só não conseguem transmitir.
  • Descrever estados dinâmicos de componentes de interface, como sliders, diálogos e modais.

Principais Atributos aria-* e Seus Usos

1. aria-label

Define um rótulo acessível para um elemento que pode não ter um conteúdo de texto visível.

Exemplo:

<button aria-label="Fechar janela">
  <span aria-hidden="true">&times;</span>
</button>

2. aria-labelledby

Relaciona um elemento com outro que serve como rótulo acessível.

Exemplo:

<h2 id="section-title">Seção de Configurações</h2>
<section aria-labelledby="section-title">
  <p>Configurações gerais do sistema...</p>
</section>

3. aria-describedby

Usado para associar um elemento a outro que fornece uma descrição adicional.

Exemplo:

<label for="email">E-mail</label>
<input type="email" id="email" aria-describedby="email-help" />
<small id="email-help">Utilize um e-mail válido como exemplo@dominio.com.</small>

4. aria-hidden

Indica se um elemento é visível ou não para tecnologias assistivas.

Exemplo:

<div aria-hidden="true">
  <img src="imagem-decorativa.png" alt="" />
</div>

5. aria-live

Indica que uma seção do conteúdo está sujeita a mudanças dinâmicas.

Exemplo:

<div aria-live="polite">
  <p>Você tem novas mensagens.</p>
</div>

6. aria-expanded

Usado para indicar o estado de expansão de um elemento interativo.

Exemplo:

<button aria-expanded="false" aria-controls="menu">Menu</button>
<nav id="menu" hidden>
  <ul>
    <li><a href="#">Página 1</a></li>
    <li><a href="#">Página 2</a></li>
  </ul>
</nav>

7. aria-current

Indica o item atual em um conjunto de itens relacionados, como navegação ou paginação.

Exemplo:

<nav aria-label="Paginação">
  <ul>
    <li><a href="#" aria-current="page">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

8. role

Define o papel semântico de um elemento quando o HTML padrão não o faz adequadamente.

Exemplo:

<div role="alert">Atenção! Sua sessão está prestes a expirar.</div>

Dicas para Utilizar Atributos aria-* de Forma Eficaz

  1. Use aria-* para Complementar, Não Substituir: Os atributos aria-* devem ser utilizados para complementar a semântica dos elementos HTML, não para substituí-la.

  2. Não Abuse do aria-hidden: Utilize apenas para esconder elementos decorativos ou irrelevantes.

  3. Associe Corretamente os Atributos: Certifique-se de que os atributos como aria-labelledby e aria-describedby apontem para os elementos corretos.

  4. Testes Com Leitores de Tela: Teste suas implementações com diferentes leitores de tela.

Exemplo Completo de Uso dos Atributos aria-*

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo de Acessibilidade com ARIA</title>
  </head>
  <body>
    <header>
      <h1>Meu Site Acessível</h1>
      <nav aria-label="Menu Principal">
        <ul>
          <li><a href="#" aria-current="page">Início</a></li>
          <li><a href="#">Sobre</a></li>
          <li><a href="#">Contato</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section aria-labelledby="sec-title">
        <h2 id="sec-title">Informações Importantes</h2>
        <p>Esta seção contém detalhes importantes para os usuários.</p>
      </section>

      <article aria-labelledby="post-title">
        <h2 id="post-title">Último Post do Blog</h2>
        <p>Descubra as últimas tendências em acessibilidade web.</p>
      </article>

      <div role="alert" aria-live="assertive">Sua sessão irá expirar em breve. Por favor, salve seu trabalho.</div>
    </main>

    <footer>
      <button aria-label="Voltar ao topo">↑</button>
    </footer>
  </body>
</html>

Conclusão

Os atributos aria-* são uma poderosa ferramenta para tornar suas páginas web mais acessíveis. Eles fornecem contexto adicional para tecnologias assistivas, permitindo que os usuários naveguem e interajam de maneira mais eficaz com seus conteúdos.

Lembre-se: A acessibilidade é uma responsabilidade de todos os desenvolvedores. Ao aplicar os atributos aria-* de forma correta, você estará criando experiências web mais inclusivas.