Introdução a ARIA

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

Alice Boxhall

Dave Gash

Meggin Kearney

Até agora, incentivamos o uso de elementos HTML nativos, porque eles fornece foco, suporte a teclado e semântica incorporada, mas há momentos em que um simples layout e HTML nativo não dão conta do trabalho. Por exemplo, atualmente não há nenhum elemento HTML padronizado para uma construção de IU muito comum, o menu pop-up. Nem existe um elemento HTML que forneça uma característica semântica, como "o usuário precisa saber sobre isso o mais rápido possível".

Nesta lição, vamos explorar a forma de expressar a semântica que o HTML não consegue expressar por conta própria.

A especificação dos Aplicativos Ricos Acessíveis de Internet da Iniciativa para Acessibilidade da Web (WAI-ARIA ou apenas ARIA) é boa para áreas de transição com problemas de acessibilidade que não podem ser gerenciados com HTML nativo. Ela permite que você especifique atributos que modificam a forma como um elemento é traduzido na árvore de acessibilidade. Vamos conferir um exemplo.

No snippet a seguir, usamos um item da lista como uma espécie de caixa personalizada. A classe "checkbox" do 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 vai dar nenhuma indicação de que o elemento deve ser uma caixa de seleção. Portanto, usuários com baixa visão podem perder o elemento completamente.

No entanto, usando atributos ARIA, podemos dar ao elemento as informações que faltam para que o leitor de tela possa interpretá-lo 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 agora será adicionado à árvore de acessibilidade, e um leitor de tela o reportará corretamente como uma caixa de seleção.

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

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

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

É importante entender que não há necessidade de redefinir a semântica padrão. Independentemente do uso, um elemento HTML <input type="checkbox"> padrão não precisa de um atributo ARIA role="checkbox" adicional para ser anunciado corretamente.

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

Consulte a especificação ARIA no HTML para mais informações.

Vamos conferir outras capacidades que a ARIA tem para oferecer.

O que a ARIA pode fazer?

Como você viu no exemplo de caixa de seleção, a ARIA pode modificar a semântica de elementos existentes ou adicionar semântica a elementos nos quais não existe 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. ARIA frequentemente nos permite criar elementos do tipo widget que não seriam possíveis com HTML simples.

• Por exemplo, ARIA pode adicionar rótulo extra e texto de descrição que são expostos somente a APIs de tecnologia assistiva.
  

<button aria-label="screen reader only label"></button>

• A ARIA pode expressar relações semânticas entre elementos que ampliam a conexão padrão pai/filho, 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 mudarem.

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

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

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

Na verdade, como as interações do teclado são tão importantes 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 vão para o lugar certo e que, quando o foco é direcionado a um elemento, a função dele é transmitida com precisão.

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

No entanto, a especificação é muito densa. Um lugar mais acessível para começar é o documento de práticas de autoria ARIA, que explora as melhores práticas para usar as funções e propriedades ARIA disponíveis.

ARIA também oferece funções que são marcos de referência e ampliam as opções disponíveis no HTML5. Consulte a especificação Padrões de Design de Funções que são Marcos de Referência para mais informações.