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 dão foco, suporte a teclado e semântica integrada, mas há momentos em que um simples e o HTML nativo não vão funcionar. Por exemplo, atualmente não há elemento HTML padronizado para uma construção de interface de usuário muito comum, o menu pop-up. Nenhum existe um elemento HTML que fornece uma característica semântica, como "o o usuário precisa saber disso o mais rápido possível".

Então, nesta lição, vamos explorar como expressar a semântica que o HTML não pode se expressar por conta própria.

Aplicativos de Internet avançados acessíveis da Iniciativa de Acessibilidade na Web especificação (WAI-ARIA, ou apenas ARIA) é uma boa opção para conectar áreas com problemas de acessibilidade que não podem ser gerenciados com HTML nativo. Ela funciona permitindo que você especifique atributos que modificam o forma como um elemento é traduzido na árvore de acessibilidade. Vamos analisar um exemplo.

No snippet a seguir, usamos um item da lista como uma espécie de caixa de seleção personalizada. A "Caixa de seleção" 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 com visão, um leitor de tela não fornecerá nenhuma indicação que o elemento deve ser uma caixa de seleção, para que usuários com baixa visão possam perder o elemento raiz.

Usando atributos ARIA, no entanto, podemos dar ao elemento as informações que faltam para que o leitor de tela possa interpretá-lo corretamente. Aqui, adicionamos 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 reportará 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.

Embora ARIA nos permita modificar sutilmente (ou mesmo radicalmente) a acessibilidade para qualquer elemento na página, essa é a única coisa que muda. ARIA não aumente o comportamento inerente do elemento; não vai fazer focalizável ou forneça a ele listeners de eventos de teclado. Isso ainda faz parte da nossa de desenvolvimento de software.

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

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

Veja as especificações ARIA em HTML para mais informações.

Vamos ver que outras capacidades ARIA tem a oferecer.

O que ARIA pode fazer?

Como você viu no exemplo da caixa de seleção, ARIA pode modificar a semântica de elementos existentes ou adicionar semântica a elementos em que não há semântica nativa. Ela também pode expressar padrões semânticos que não existem em HTML, como um menu ou uma guia do painel de controle. Com frequência, ARIA nos permite criar elementos do tipo widget que não seriam possíveis com HTML simples.

• Por exemplo, ARIA pode adicionar um rótulo extra e um texto de descrição que seja expostos 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 em uma região específica.

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

• E ARIA pode tornar partes da página "ativas", então eles informam imediatamente ou tecnologia adaptativa quando mudam.

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

Um dos aspectos principais do sistema ARIA é a coleção de funções. Um papel em termos de acessibilidade é um indicador abreviado para uma interface específica padrão ARIA fornece um vocabulário de padrões que podemos usar pela classe role em qualquer elemento HTML.

Quando aplicamos role="checkbox" no exemplo anterior, estávamos informando tecnologia assistiva de que o elemento deve seguir a "caixa de seleção" padrão Isso é, garantimos que ele terá um estado marcado (marcado ou não) marcada) e que o 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 do teclado são tão destacadas no leitor de tela é muito importante garantir que, ao criar um widget personalizado, os O atributo role é sempre aplicado no mesmo lugar que o tabindex atributo isso garante que os eventos do teclado vão para o lugar certo e que, quando foco cai em um elemento, seu papel é transmitido com precisão.

A especificação ARIA descreve uma taxonomia de valores possíveis para o atributo role e ARIA associado atributos que podem ser usados com esses papéis. Esta é a melhor fonte de informações definitivas sobre como as funções e atributos ARIA funcionam e como eles podem ser usados de uma forma que seja aceita pelos navegadores e tecnologias assistivas.

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

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