WAI-Aria: A Revolução Invisível da Web Acessível

Entendendo a acessibilidade web através do WAI-ARIA

Introdução

Entendendo o significado

A WAI-ARIA serve para estender o significado das interações do seu site. Quando as tags do HTML5 vieram, elas já começaram um trabalho importante de dar significado às estruturas do layout.

Você consegue marcar agora o que é um menu de navegação, uma sidebar, um header, um footer etc. Esse trabalho é muito importante por que ajuda a definir a importância dos elementos que cada elemento contém.

Com tudo isso, a métrica WAI-ARIA se torna uma revolução para a web se tornar mais universal e assim ser mais acessível.

Porém, ela não é difundida e muito menos conhecida por muitos desenvolvedores o que a torna invisível no mundo da Tecnologia influênciando diretamente como são construídas as aplicações na web.

Com isso devemos como desenvolvedores pensar nos usuários como foco ao criar qualquer serviço, j*á que acessibilidade vai além de fazer com que pessoas com deficiências possam acessar o sistema e sim sobre qualquer pessoa conseguir usá-lo*.

Agora, no recorte de inclusão nós referiamos a ela como transforma a web para as pessoas com deficiências.

Usando WAI-ARIA

As práticas que se tem no WAI-ARIA se estendem a muitas para proporcionar a WWW (World Wide Web) acessível.

Dentro desse ecossistema podemos destacar algumas como:

• Tornar conteúdo eficientemente legível por leitores de tela:

Imagem da Etec de Francisco Morato parte do menu acionado

Certos elementos em websites nem sempre são reconhecidos por leitores de tela. Dificultando o uso de leitores de tela para deficientes visuais.

• Atribuir elementos em código, especificando o que é cada parte:
  

<ul role="arvore">

   <li role="itensDaArvore">

     Frutas



     <ul role="grupo">

       <li role="fruta">

         Maças

       </li>



       <li role="fruta">

         Bananas

       </li>



       <li role="fruta">

         Laranjas

       </li>

     </ul>

   </li>

</ul>

Atributos WAI-ARIA utilizados num código para torná-lo mais compreensível e consequentemente acesssível.

• Usar o HTML Semântico, com a chegada dele a W3C se volta a web buscando dar significado ao conteúdo ao contrário do que será antes, já que o foco era apenas construir conteúdo, exibir elementos.


• No HTML5 as métricas se dão para construir o conteúdo baseado em significados, ou seja, escrever o teu site com semântica.

Soluções Técnicas

WAI-ARIA fornece uma estrutura para adicionar atributos para identificar recursos para interação do usuário, como eles se relacionam entre si e seu estado atual.

WAI-ARIA descreve técnicas de navegação para marcar regiões e estruturas comuns da Web como menus, conteúdo primário, conteúdo secundário, informações de banner e outros tipos de estruturas da Web.

Por exemplo, com o WAI-ARIA, os desenvolvedores podem identificar regiões de páginas e permitir que usuários de teclado se movam facilmente entre regiões, em vez de pressionar Tab muitas vezes.

Exemplo de Tablist

Neste exemplo, ao criar essa Tablist básica que foi criada de maneira semântica e de tro das regras do WAI-ARI, isto é, foram usados: atributos aria (selected, controls), label, id, role, class, tags semânticas que vão de encontro com tornar a web semântica, assistiva e inclusiva.

Exemplo de Collapse

Na Collapse de exemplo temos um elemento pai que contém toda a Collapse sendo um container, temos os itens que contém seu respectivo conteúdo.

Se perceber a Collapse nada mais é do que uma lista que ao usuário pode realizar as ações de abrir ou fechar a Collapse.

Então se atente as duas palavras principais desse parágrafo: elemento e ações. Sendo que foi mencionando anteriormente:

Role  -  diz o que é o elemento.

States/Properties  -  definem o estado em que aquele elemento está com base em alguma ação passada por propriedades, por exemplo.

Roles

Cada role é responsavel por um determinado gênero de elemento.

Tipos:

• Widgets


• Document Structure


• Landmarks

Widgets

Widgets para marcar elementos de interface soltos, como caixas de alerta, botões, checkbox, links, tabs etc.

Exemplos:

• option


• progressbar


• radio


• searchbox


• tabpanel


• textbox

Document Structure

Document Structure para definir estruturas de organização da página. Estruturas que não são interativas como o header, footer, sidebar, essas coisas.

Exemplos:

• heading


• figure


• table


• presentation


• img


• article

Landmarks

Landmarks para regiões de página que são pontos importantes para onde o usuário navegaria.

Exemplos:

• banner


• complementary


• contentinfo


• navigation


• form


• region

States e properties

Você consegue usar essas propriedades para informar se determinado elemento está escondido ou visível para o usuário, fornecer informações de texto ou até esconder elementos visuais desnecessário.

Veremos dois deles:

• aria-hidden


• aria-label

aria-hidden

Uso do aria-label

Ao invés de usar o aria-hidden=”true”, usamos o aria-label para informar o significado do ícone.