Regras para usar ARIA em HTML

O que é ARIA e quais são os principais princípios da ARIA

O acesso à Internet é um pré-requisito para uma plataforma de sucesso. Infelizmente, muitos sites têm barreiras de acessibilidade que dificultam ou impossibilitam que usuários com deficiência física vejam e interajam com todos os elementos do site. Se você deseja que seu site seja visto por todos os usuários e obtenha mais tráfego e mais conversões, precisa investir seu tempo e esforço para melhorar a acessibilidade de suas páginas da web.

O que é Acessibilidade na Internet?

Se o site for acessível, ele foi projetado para que pessoas com deficiência possam interagir com ele e visualizar todo o conteúdo. Existem padrões específicos chamados Web Accessibility Initiative (WAI) desenvolvidos pelo W3C para ajudar os proprietários de sites a tornar seus sites mais acessíveis.

O que é ÁRIA?

ARIA significa Accessible Rich Internet Applications. ARIA é um conjunto de atributos especiais publicados pelo W3C que podem ser adicionados aos elementos HTML para tornar as páginas da web e aplicativos mais acessíveis para pessoas com deficiência. Esses atributos não fornecem funcionalidade. Eles fornecem descrições adicionais para tecnologias assistivas (ATs), como leitores de tela.

Principais funções do ARIA

Os atributos ARIA incluem os seguintes componentes: Funções, Estados e Propriedades.

Funções

As funções definem o tipo de elemento da interface do usuário. As funções são adicionadas por meio do atributo role=”<ROLE TYPE>”. Após a instalação, a função não muda.

Funções ARIA:

  • ponto de referência
  • ferramenta
  • documento
  • abstrato
Regras para usar ARIA em HTML

Papéis ARIA de referência

As funções de referência facilitam a navegação, dividindo a página em diferentes seções, como pesquisa, banner, navegação, aplicativo e assim por diante. Dessa forma, o leitor de tela é capaz de anunciar o início e o fim de cada função importante que ajuda as pessoas com deficiência a identificar diferentes partes de uma página da web.

Funções ARIA do widget

As funções do widget são usadas para dar significado aos elementos da interface do usuário, como link, botão, caixa de seleção e assim por diante. Os atributos do widget permitem que as pessoas que usam o AT interajam com a página da web. Por exemplo, eles podem abrir e fechar guias, preencher formulários e assim por diante.

Papéis ARIA do documento

As funções do documento contêm descrições das estruturas que organizam o conteúdo da página, como img, lista, linha, barra de ferramentas e assim por diante.

Papéis ARIA abstratos

Papéis abstratos não são usados ​​no código. Esses são os atributos que o navegador usa para dar às funções seu significado e conceito e para ajudar a adicionar novas funções.

Estados e Propriedades

Estados (aria-grab, aria-disabled, aria-checked, etc.) e propriedades (aria-label, aria-haspopup, aria-control, etc.) suportam funções ARIA. Os estados podem mudar por conta própria ou com base na interação do usuário, enquanto as propriedades geralmente não mudam após a configuração.

Categorias de estados e propriedades:

  • Atributos do Widget
  • Atributos de região ao vivo
  • Atributos de arrastar e soltar
  • Atributos de Relacionamento

Você pode aprender sobre cada atributo ARIA com mais detalhes na página ARIA W3C. https://www.w3.org/TR/wai-aria/

Melhore a acessibilidade do seu site!

Agora você entende o que é ARIA e como ele fornece informações adicionais às tecnologias assistivas. Ao implementar estratégias ARIA, você pode garantir que pessoas com deficiência possam interagir com seu site.