O que são atributos Aria em HTML e por que eles são importantes?

Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Web designers que são novos em HTML podem se deparar com um conjunto de atributos desconhecidos. Prefixados com a palavra ARIA, esses atributos aparecem em toda a web, mas sua finalidade pode ser um mistério para novos usuários.

Os atributos ARIA servem a um propósito importante na acessibilidade de seus sites. Eles descrevem o conteúdo de um determinado elemento e a maneira como um elemento se relaciona com uma página ou com os outros elementos ao seu redor.

---

---

MAKEUSEDO VÍDEO DO DIA ROLE PARA CONTINUAR COM O CONTEÚDO

Adicionar esses atributos tão importantes ao seu site ajudará a garantir que todos os visitantes tenham a mesma experiência, independentemente da tecnologia que estiverem usando.

O que são atributos ARIA?

ARIA é um acrônimo para Accessible Rich Internet Applications. No HTML moderno, especialmente em aplicativos ricos em JavaScript, nem sempre é imediatamente óbvio, com base na sintaxe, qual a função dos elementos individuais.

A dificuldade em discernir funções pode ser um problema quando os usuários visualizam o site usando ferramentas de acessibilidade como leitores de tela. Sem o HTML semântico adequado, seu usuário final pode não conseguir navegar em um site ao usar ferramentas de acessibilidade.

Embora a maneira preferida de resolver esse problema seja use os elementos semânticos adequados em HTML5 , isso nem sempre é prático ou possível. É aqui que entram os atributos ARIA em elementos HTML. Esses atributos ajudam a definir a função e os atributos de seu elemento de forma que as ferramentas de acessibilidade sejam capazes de processar.

Por que os atributos ARIA são importantes?

Resumindo, os atributos ARIA possibilitam que usuários com deficiência usem seu site. Essas funções e atributos definem informações extras sobre vários elementos em seu site que, de outra forma, não estariam prontamente disponíveis.

---

---

Há uma grande variedade de atributos ARIA que você pode atribuir. Você deve usá-los em qualquer lugar que precise de contexto adicional para permitir que o documento faça sentido de maneira não visual.

Por exemplo, considere um site que possui uma navegação principal composta por um

elemento envolvido em um
elemento, em vez de um elemento:

---





---

 <div class="nav"> 
    <ul> 
        <li>Home</li> 
        <li>Shop</li> 
        <li>About</li> 
    </ul> 
</div>

Você pode usar atributos ARIA para ajudar os usuários a navegar. Adicionando os atributos role e aria-label ao

O elemento permite que o leitor de tela e as tecnologias assistivas saibam onde está o seu menu.

 <div class="nav"> 
    <ul role="navigation" aria-label="Main"> 
        <li>Home</li> 
        <li>Shop</li> 
        <li>About</li> 
    </ul> 
</div>

Embora na maioria dos casos você deva usar os elementos adequados, isso nem sempre é possível dentro das restrições do que você está fazendo. Se, por exemplo, seu site requer o uso de uma barra de progresso, mas você deseja um design que a barra padrão não permite.

Nesse cenário, você pode criar um conjunto personalizado de elementos para exibir sua barra de progresso. Para um leitor de tela, no entanto, esses elementos parecerão uma bagunça confusa; não será capaz de fornecer informações úteis aos visitantes do seu site.

Ao definir a função do wrapper para Barra de progresso , e adicionando ária-valoragora , aria-valuemin , e aria-valuemax atributos para o wrapper, você ainda pode indicar o progresso.

Na era moderna, construir sites acessíveis é mais importante do que nunca. Há várias bibliotecas de componentes React construídas com acessibilidade em mente .

Ter um site acessível não só pode ajudar com sua classificação de pesquisa para vários mecanismos de pesquisa importantes, como também garante que você não esteja cortando um grupo potencial de usuários de sua base de usuários.

Adicionar os atributos ARIA apropriados ao seu site ajudará a garantir que você apresente as informações a todos os usuários. O resultado final será um site que acolhe todos os públicos e apresenta o mais próximo possível da mesma experiência para todos.

Quais atributos ARIA devo usar?

Existem muitos atributos diferentes que você deve usar em seu site. Em geral, esses atributos se enquadram em duas categorias diferentes. O primeiro são os atributos do widget, que geralmente descrevem um elemento interativo personalizado.

A outra categoria que você precisa conhecer são os atributos de relacionamento. Esses são atributos que transmitem informações para tecnologias assistivas sobre como um determinado elemento se relaciona com o restante do site ou outros elementos.



Quando se trata de considerar quais atributos ARIA você deve incluir, a resposta simples é o máximo possível. Em qualquer lugar onde o elemento que você está usando não descreve a função que o elemento cumpre, você deve usar o atributo role.

como você salva vídeos do youtube para o seu iphone

Se você tiver um campo com um rótulo, esse campo deve ter o ária rotulada por atributo. Contanto que os atributos que você está usando façam sentido, você apenas tornará seu site mais acessível ao adicioná-los.

Atributos do widget

Os atributos do widget são uma categoria muito maior. Ele contém a maioria dos atributos ARIA que você precisará adicionar a um site padrão. No exemplo anterior da barra de progresso personalizada, aria-valuenow, aria-valuemin e aria-valuemax são atributos de widget. Eles descrevem o estado ou possíveis estados do elemento em que estão.

Existem muitos atributos diferentes que você pode usar para descrever o estado de um elemento. Um dos mais comuns é ária-rótulo . Este atributo aplica um rótulo ao elemento em que você o coloca, visível apenas para tecnologias assistivas.



Outro par comum de atributos ARIA que se enquadram nessa categoria são ária escondida e ária desabilitada . Eles podem comunicar o estado atual de um elemento e se um leitor de tela deve lê-lo para o usuário. Isso é útil para uma variedade de dispositivos diferentes com seus próprios leitores de tela.

Atributos de Relacionamento

Ao contrário dos atributos de widget, os atributos de relacionamento fornecem indicações de tecnologias assistivas sobre a relação e o uso de um elemento para outros elementos ao seu redor. O mais comum deles é o atributo role. A função especifica a finalidade de um elemento em um site.

Se você definir o papel atribuir a navegação , ele será imediatamente identificado como um wrapper de navegação.

Alguns atributos de relacionamento definem como um elemento se relaciona com outros elementos ao seu redor. O ária rotulada por O atributo, por exemplo, mostra qual elemento atua como um rótulo para esse elemento. Isso pode ser útil ao usar layouts que fazem sentido visualmente, mas possuem rótulos para controles de formulário específicos depois deles no fluxo do documento.



Embora existam menos atributos de relacionamento do que atributos de widget, esses atributos geralmente carregam maior importância. Muitas vezes, eles podem descrever o fluxo e o controle de um documento e fornecer detalhes adicionais sobre a maneira como um usuário pode navegar em seu site.

Esses atributos são de particular importância quando você está projetando formulários e itens de navegação em seu site.

Por que é tão importante incluir atributos ARIA em seu HTML

Os atributos ARIA servem a um propósito simples e necessário em seu site. Eles servem para garantir que o site seja acessível a todos os usuários, independentemente do uso de software de acessibilidade. Para usuários com deficiências, ter esses atributos em seu site pode torná-lo utilizável.

O método preferido para trabalhar com tecnologia assistiva é usar os elementos semânticos adequados. Quando isso não é possível, no entanto, os atributos ARIA permitem trabalhar livremente sem que seus usuários percam conteúdo.