Introdução a ARIA

Introdução a ARIA e semântica HTML não nativa

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Até agora, recomendamos o uso de elementos HTML nativos, porque eles oferecem foco, suporte ao teclado e semântica integrada, mas há momentos em que um simples layout e HTML nativo não funcionam. Por exemplo, atualmente não há elementos HTML padronizados para uma construção de interface muito comum, o menu pop-up. Nem existe um elemento HTML que fornece uma característica semântica, como "o usuário precisa saber sobre isso o mais rápido possível".

Nesta lição, então, exploraremos como expressar a semântica que o HTML não consegue expressar por conta própria.

A especificação de aplicativos avançados de Internet acessíveis da Web Accessibility Initiative (WAI-ARIA, ou apenas ARIA) é boa para áreas com problemas de acessibilidade que não podem ser gerenciadas com HTML nativo. Ela permite que você especifique atributos que modificam a forma como um elemento é traduzido na árvore de acessibilidade. Vejamos um exemplo.

No snippet a seguir, usamos um item da lista como uma espécie de caixa de seleção personalizada. A classe da "caixa de seleção" de CSS fornece ao elemento as características visuais necessárias.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Embora isso funcione bem para usuários que enxergam, um leitor de tela não dará indicação de que o elemento precisa ser uma caixa de seleção. Portanto, usuários com baixa visão podem perder o elemento completamente.

Usando atributos ARIA, no entanto, podemos fornecer ao elemento as informações ausentes para que o leitor de tela possa interpretá-las corretamente. Aqui, adicionamos os atributos role e aria-checked para identificar explicitamente o elemento como uma caixa de seleção e para especificar que ela é marcada por padrão. O item da lista será adicionado à árvore de acessibilidade e um leitor de tela o informará corretamente como uma caixa de seleção.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA funciona alterando e aumentando a árvore de acessibilidade padrão do DOM.

A árvore de acessibilidade padrão do DOM.
A árvore de acessibilidade aumentada ARIA.

Embora ARIA nos permita sutilmente (ou mesmo radicalmente) modificar a árvore de acessibilidade de qualquer elemento na página, essa é a única coisa que ela muda. ARIA não aumenta nenhum comportamento inerente do elemento. Ela não torna o elemento focalizável nem fornece listeners de eventos de teclado. Isso ainda faz parte da nossa tarefa de desenvolvimento.

É importante entender que não é necessário redefinir a semântica padrão. Seja qual for o uso, um elemento <input type="checkbox"> HTML padrão não precisa de outro atributo ARIA role="checkbox" para ser anunciado corretamente.

Também é importante notar que certos elementos HTML têm restrições sobre quais funções e atributos ARIA podem ser usados neles. Por exemplo, um elemento <input type="text"> padrão pode não ter nenhum papel/atributo adicional aplicado a ele.

Consulte ARIA em especificação HTML (link em inglês) para mais informações.

Vamos ver que outros recursos ARIA tem a oferecer.

O que ARIA pode fazer?

Como abordado no exemplo da caixa de seleção, ARIA pode modificar a semântica de elementos ou adicionar semântica a elementos que não têm semântica nativa. Ela também pode expressar padrões semânticos que não existem em HTML, como um menu ou um painel de guias. Muitas vezes, ARIA nos permite criar elementos do tipo widget que não seriam possíveis com HTML simples.

  • Por exemplo, ARIA pode adicionar mais marcadores e textos de descrição que sejam expostos apenas a APIs de tecnologia adaptativa.
<button aria-label="screen reader only label"></button>
  • ARIA pode expressar relações semânticas entre elementos que estendem a conexão pai/filho padrão, como uma barra de rolagem personalizada que controla uma região específica.
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • E ARIA pode tornar partes da página "vivas", para que informem imediatamente à tecnologia assistiva quando mudam.
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

Um dos aspectos centrais do sistema ARIA é sua coleção de funções. Um papel em termos de acessibilidade equivale a um indicador de abreviação para um padrão de interface específico. ARIA fornece um vocabulário de padrões que podem ser usados com o atributo role em qualquer elemento HTML.

Quando aplicamos role="checkbox" no exemplo anterior, estávamos informando à tecnologia assistiva que o elemento precisa seguir o padrão de "caixa de seleção". Ou seja, estamos garantindo que ele terá um estado marcado (marcado ou não marcado) e que esse estado pode ser alternado usando o mouse ou a barra de espaço, assim como um elemento de caixa de seleção HTML padrão.

Na verdade, como as interações com o teclado têm destaque no uso do leitor de tela, é muito importante garantir que, ao criar um widget personalizado, o atributo role seja sempre aplicado no mesmo lugar que o atributo tabindex. Isso garante que os eventos do teclado sejam direcionados para o lugar certo e que, quando o foco for direcionado a um elemento, o papel dele seja transmitido com precisão.

A especificação ARIA descreve uma taxonomia de valores possíveis para o atributo role e atributos ARIA associados que podem ser usados em conjunto com esses papéis. Essa é a melhor fonte de informações definitivas sobre como os papéis e atributos ARIA funcionam juntos e como podem ser usados de uma forma que seja compatível com navegadores e tecnologias assistivas.

Uma lista de todas as funções ARIA disponíveis.

No entanto, a especificação é muito densa. Um ponto de partida mais acessível é o documento de práticas de criação ARIA, que explora as práticas recomendadas para usar os papéis e propriedades ARIA disponíveis.

ARIA também oferece funções de ponto de referência que estendem as opções disponíveis no HTML5. Consulte a especificação Padrões de design de papéis de ponto de referência para mais informações.