Como usar ARIA no HTML do seu site WordPress

Um dos principais objetivos do desenvolvimento da web é criar uma experiência de usuário envolvente. Freqüentemente, você fará isso incluindo recursos interativos e elementos visuais impressionantes em seu site. No entanto, esses aspectos não são necessariamente acessíveis a todos os visitantes em potencial, principalmente aqueles que dependem de leitores de tela.

Felizmente, existe um sistema para ajudar todos os seus usuários a experimentar os resultados de seu trabalho árduo. A incorporação de ARIA (Accessible Rich Internet Applications) no HTML do seu site exige apenas um pequeno esforço extra e pode ter grandes recompensas. Esta postagem irá apresentá-lo ao ARIA e como usá-lo. Vamos lá!

Uma introdução ao ARIA: o que é e por que você pode querer usá-lo

Resumindo, ARIA é uma maneira de especificar atributos de HTML para que os leitores de tela possam identificá-los com precisão e depois retransmiti-los aos visitantes. É um aspecto fundamental do desenvolvimento da Web acessível e ajuda a criar experiências mais precisas para usuários de leitores de tela.

Isso ocorre porque a incorporação de ARIA em seu HTML influencia a maneira como os navegadores modificam suas páginas da web para leitores de tela. Este conteúdo modificado é apresentado em uma árvore de acessibilidade e ARIA assume a tarefa de traduzir seus elementos HTML para ele.

Por exemplo, digamos que você tenha uma página com uma caixa de seleção e tenha usado ARIA em seu HTML. O ARIA instruirá o leitor de tela a informar ao usuário que há uma caixa de seleção na página e indicará se ela está marcada ou não. O HTML nativo não pode fazer isso sozinho.

Pense na frequência com que você usa a web, não apenas no trabalho, mas no dia a dia. Agora imagine se uma grande parte da web fosse inutilizável para você. Você teria acesso a menos recursos para educação, emprego, saúde, informação, comunicação e até entretenimento.

Usar as melhores práticas para o desenvolvimento da Web acessível é uma maneira de fazer a sua parte para tornar a Internet um lugar com oportunidades iguais para todos, independentemente da idade ou habilidade. Este é considerado um direito humano básico pelas Nações Unidas e é uma meta que vale a pena perseguir por seu próprio mérito.

Se isso não for suficiente para que você invista no uso do ARIA, no entanto, você também pode observar que o desenvolvimento acessível também é útil do ponto de vista de negócios. Ele se sobrepõe às práticas recomendadas de Search Engine Optimization e aumenta o alcance do seu site. Além disso, em alguns casos, é exigido por lei. Em outras palavras, há muitos motivos para seguir alguns passos simples para tornar seu site mais acessível.

Como usar ARIA no HTML do seu site WordPress (3 principais práticas)

Nós definitivamente recomendamos que você continue aprendendo sobre ARIA e acessibilidade na web além do escopo deste post. Você pode querer considerar especialmente testar a acessibilidade atual do seu site.

Dito isso, há realmente apenas três coisas que você precisa saber para começar a usar o ARIA no HTML do seu site WordPress. Aprender as práticas abaixo deve fornecer a você uma base sólida.

1. Usando ARIA com HTML semântico

Antes de discutirmos como aplicar ARIA ao seu HTML, é importante observar quando é apropriado usá-lo. Embora o HTML nativo sozinho não torne o conteúdo da web acessível, existem alguns elementos semânticos que tornam o ARIA desnecessário ou entrarão em conflito com o ARIA se não for usado corretamente.

Elementos semânticos - como <header> , <figure> e <nav> - descrevem o propósito de seu HTML. Incorporar ARIA nesses elementos seria redundante, uma vez que o HTML semântico já implica a função do elemento (falaremos mais sobre as funções ARIA em um momento).

Além disso, existem certas regras que se aplicam ao uso do ARIA, a fim de evitar que os desenvolvedores o utilizem de forma conflitante com o HTML semântico. O World Wide Web Consortium (W3C) tem uma tabela útil que analisa quais elementos HTML semânticos têm funções ARIA implícitas:

A primeira coluna especifica um elemento HTML, enquanto a segunda lista a função implícita. Se o elemento tiver uma função implícita listada, você não precisa incluir uma função ARIA adicional para ele. A terceira coluna lista as funções que cada elemento HTML pode ter, de acordo com as melhores práticas.

2. Adicionando funções a tags HTML

Depois de ter certeza de que o elemento HTML no qual está trabalhando precisa do uso de ARIA, você pode começar a usar 'funções' e 'atributos'. Você já deve ter uma ideia do que as funções ARIA fazem na seção anterior. Eles especificam o tipo de elemento contido na tag e denotam a finalidade do elemento.

Então, por exemplo, se você quiser criar um alerta para informar aos usuários que eles precisam instalar uma atualização, você usaria a função 'alerta' desta forma:

 <div role = "alert">
<p> Instale a atualização mais recente! </p>
</div>

Como explicamos anteriormente, você não precisa atribuir uma função se o elemento for semântico e implicar na função, e você não deve atribuir uma nova função a um elemento que entre em conflito com sua função implícita. No entanto, você também deve observar que só pode aplicar uma função a cada elemento.

Pense nisso desta maneira - Uma função define que um elemento é. Um elemento não pode ser duas coisas ao mesmo tempo, então você deve escolher a função que melhor o descreve. Dito isso, quando necessário, você pode optar por aninhar um elemento dentro de um elemento com uma função diferente.

Por exemplo, se você quiser adicionar o alerta acima ao seu cabeçalho, pode ser algo assim:

 <header> <div role = "alert">
<p> Instale a atualização mais recente! </p>
</div> </header>

Em vez de declarar que um único elemento é um cabeçalho e um alerta, isso deixa claro que há um alerta contido no cabeçalho.

3. Incluindo Atributos para Anotar Estados e Propriedades

Os atributos são o segundo elemento que compõe o ARIA. Eles diferem das funções porque informam aos leitores de tela algo importante sobre um elemento específico, em vez de definir o que é esse elemento. Existem dois tipos de atributos ARIA:

• Os estados compartilham informações sobre os recursos que provavelmente serão alterados quando um usuário interagir com eles. Por exemplo, isso pode incluir caixas de seleção ou botões de opção.
• As propriedades indicam recursos que provavelmente não serão alterados durante o uso. Um elemento que rotula outro elemento, ou o nível hierárquico em que um elemento está localizado, são propriedades.

Ambos são fáceis de detectar, pois sempre começam com aria- seguido pelo estado ou propriedade específica que está sendo usada. Por exemplo, o estado usado para informar a um leitor de tela que uma caixa de seleção está preenchida por padrão é ária marcada, como neste exemplo:

 <span role = "caixa de seleção" 
aria-verificado = "verdadeiro"
tabindex = "0">
</span>

Da mesma forma, a propriedade usada para observar quando um elemento está rotulando outro é aria-labelledby. Você pode aplicar este atributo a uma imagem, por exemplo, para indicar a legenda associada a ela:

 <figura aria-labelledby = "operahouse_1" role = "group">
<img src = "operahousesteps.jpg" alt = "The Sydney Opera House">
<figcaption> Vimos a ópera <cite> Barbeiro de Sevilha </cite> aqui! </figcaption>
</figure>

Recomendamos consultar a lista de funções, estados e propriedades permitidos do W3C para ver mais exemplos de atributos que você pode usar.

Conclusão

Quando se trata de desenvolvimento web, criar conteúdo acessível pode não ser a primeira coisa em sua mente. No entanto, seguindo as práticas recomendadas de acessibilidade na web e incorporando ARIA HTML em seu site, você pode desempenhar um papel em tornar a web disponível para todos.

Três práticas principais para usar ARIA em seu site WordPress incluem:

1. Usando ARIA com HTML semântico.
2. Adicionando funções a tags HTML.
3. Incluindo atributos para observar estados e propriedades.

Você tem alguma dúvida sobre como usar ARIA em seu site WordPress? Deixe-nos saber na seção de comentários abaixo!

Imagem em miniatura do artigo EgudinKa / shutterstock.com