Skip to main content

Roles

O atributo role no HTML é usado para definir o tipo semântico de um elemento. Isso ajuda as tecnologias assistivas, como leitores de tela, a entender o propósito de um elemento e como ele deve ser usado ou interagido. A especificação do atributo role faz parte da ARIA (Accessible Rich Internet Applications), que é uma tecnologia da Web desenvolvida com o objetivo de tornar o conteúdo web mais acessível a pessoas com deficiências.

Importância do Atributo role​

  • Acessibilidade: Melhora a acessibilidade do site ou aplicação web, fornecendo informações adicionais sobre a função dos elementos para as tecnologias assistivas.
  • Semântica: Ajuda no entendimento do conteúdo e da estrutura da página por navegadores e outros agentes de usuário, especialmente em casos onde os elementos HTML padrão não conseguem transmitir adequadamente o propósito do elemento.
  • Interoperabilidade: Facilita a criação de interfaces ricas e interativas que são acessíveis em uma ampla gama de dispositivos, incluindo leitores de tela, magnificadores de tela, e tecnologias de comando de voz.

Alguns dos Papéis (role) Disponíveis​

Aqui estão alguns dos papéis mais comuns definidos pela ARIA, mas existe uma grande variedade deles, cada um destinado a diferentes tipos de elementos ou componentes de interface:

  • banner: Geralmente usado para o cabeçalho principal de uma página.
  • navigation: Indica uma seção de navegação, como um menu ou um conjunto de links de navegação.
  • main: Representa o conteúdo principal do documento.
  • complementary: Usado para seções da página consideradas complementares ao conteúdo principal, como barras laterais.
  • contentinfo: Geralmente usado para o rodapé que contém informações sobre o conteúdo principal.
  • article: Indica um artigo.
  • form: Marca uma seção contendo controles de formulário.
  • search: Denota uma seção destinada à busca.
  • button: Indica um botão.
  • alert: Usado para mensagens importantes e, geralmente, temporárias, que não interferem na interação do usuário.
  • progressbar: Representa o progresso de uma tarefa.