Começando com WAI-ARIA

O HTML é uma linguagem de marcação. Assim, dando significado para o conteúdo, mediante as suas tags. A WAI-ARIA se aplica para o significado das interações. Assim, ajudando onde a informação é dividida em diversos elementos e precisão de uma interação no site para serem visualizadas.

WAI - ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.

Roles

Distingue o tipo de elemento que está tendo a interação do usuário. Temos 4 categorias de roles: Abstract, Widgets, Document Structure e Landmarks.

Abstract - Tem a finalidade de definir conceitos gerais. São utilizados apenas por navegadores para ajudar a organizar e dinamizar um documento, e nunca por desenvolvedores para marcar HTML. Eles não são mapeados para leitores de tela e não fornecem nenhuma informação adicional acessibilidade diretamente entre HTML e leitor de tela.

Widgets - Tem a finalidade de definir elementos de interface independentes ou em conjuntos.

Exemplo:

1
<span class="tooltip" role="tooltip" aria-hidden="true">Texto de exemplo</span>

As roles abaixo, normalmente são recipientes para gerenciar outros elementos de interface.

Exemplo:

1
2
3
4
5
6
<ul class="menu" role="menu">
<li class="menu-item checked" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="true">Sans-serif</li>
<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Serif</li>
<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Monospace</li>
<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Fantasy</li>
</ul>

Document Structure - Descrevem estruturas que organizam o conteúdo de uma página. Geralmente não são interativos.

Exemplo:

1
2
3
4
5
6
7
8
<dialog tabindex="0" role="alertdialog" aria-labelledby="d-message">
<div>
<div role="document" tabindex="0">
<p id="d-message">Essa informação é desnecessária</p>
<button>Eu entendi</button>
</div>
</div>
</dialog>

Landmarks - São regiões da página que são pontos importantes para a navegação do usuário.

Exemplo:

1
2
3
4
<ul role="navigation">
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>

States e Properties

Aprensenta o estado do elemento.

Abaixo, temos um exemplo de estado e propriedades com a funcionalidade de tabs, que será alterado via javaScript (Não será necessário, colocar o script aqui, porque a ideia é apenas mostrar as propriedades e estados):

1
2
3
4
5
6
7
8
9
// HTML
<ul role="tablist">
<li role="presentation"><a href="#section1" tabindex="0" role="tab" aria-controls="section1" aria-selected="true">Section 1</a></li>
<li role="presentation"><a href="#section2" tabindex="-1" role="tab" aria-controls="section2">Section 2</a></li>
<li role="presentation"><a href="#section3" tabindex="-1" role="tab" aria-controls="section3">Section 3</a></li>
</ul>
<section id="section1" role="tabpanel">...</section>
<section id="section2" role="tabpanel" aria-hidden="true">...</section>
<section id="section3" role="tabpanel" aria-hidden="true">...</section>

Ao clicar no item de navegação, o elemento terá o estado true, para a propriedade aria-selected. E o conteúdo que será mostrado para o usuário, não terá a propriedade aria-hidden com o estado true.

Conclusão

A WAI-ARIA é para extender e não substituir as tags HTML. Dê sempre preferência para o HTML, para dar significado ao conteúdo. E é preciso tomar alguns cuidados.

Se não é possível usar a tag form, usaríamos assim:

1
<div role="form"></div>

No código abaixo, seria redundante.

1
<form role="form"></form>

O mais importante é sempre lembrar que as interações devem ser usadas via teclado. Afinal, o foco está na acessibilidade.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.