Como ocultar e atualizar conteúdo

Ocultando conteúdo de tecnologia assistiva

Alice Boxhall

Dave Gash

Meggin Kearney

aria-oculta

Outra técnica importante no ajuste da experiência de usuários de tecnologia adaptativa envolve garantir que apenas partes relevantes da página sejam expostas à tecnologia adaptativa. Existem várias maneiras de garantir que uma seção do DOM não seja exposta a APIs de acessibilidade.

Primeiro, tudo o que estiver explicitamente oculto do DOM também não será incluído na árvore de acessibilidade. Portanto, tudo o que tiver um estilo CSS visibility: hidden ou display: none ou usar o atributo HTML5 hidden também ficará oculto dos usuários de tecnologia adaptativa.

No entanto, um elemento que não é renderizado visualmente, mas não é explicitamente oculto, ainda é incluído na árvore de acessibilidade. Uma técnica comum é incluir "texto somente para leitor de tela" em um elemento que é absoluto posicionado fora da tela.

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Além disso, é possível fornecer texto somente para leitores de tela usando um atributo aria-label, aria-labelledby ou aria-describedby referenciando um elemento que está oculto.

Consulte este artigo do WebAIM sobre Técnicas para ocultar texto para mais informações sobre como criar texto "somente para leitor de tela".

Por fim, ARIA fornece um mecanismo para excluir conteúdo de tecnologia assistiva que não está visualmente oculta, usando o atributo aria-hidden. A aplicação desse atributo a um elemento remove ele e todos os descendentes da árvore de acessibilidade. As únicas exceções são os elementos referenciados por um atributo aria-labelledby ou aria-describedby.

<div class="deck">
    <div class="slide" aria-hidden="true">
    Sales Targets
    </div>
    <div class="slide">
    Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
    Action Items
    </div>
</div>

Por exemplo, você pode usar aria-hidden se estiver criando alguma interface modal que bloqueia o acesso à página principal. Nesse caso, um usuário com visão pode ver algum tipo de sobreposição semitransparente indicando que a maior parte da página não pode ser usada no momento, mas um usuário de leitor de tela ainda pode explorar as outras partes dela. Nesse caso, além de criar a armadilha do teclado explicada anteriormente, é necessário garantir que as partes da página que estão fora do escopo também sejam aria-hidden.

Agora que você entende os conceitos básicos de ARIA, como ela funciona com a semântica HTML nativa e como ela pode ser usada para realizar grandes cirurgias na árvore de acessibilidade, bem como mudar a semântica de um único elemento, vamos saber como usá-la para transmitir informações urgentes.

aria-live

O aria-live permite que os desenvolvedores marquem uma parte da página como "ativa" no sentido de que as atualizações precisam ser comunicadas aos usuários imediatamente, independentemente da posição da página, e não se apenas explorarem essa parte da página. Quando um elemento tem um atributo aria-live, a parte da página que o contém e os descendentes dele é chamada de região ativa.

Por exemplo, uma região ativa pode ser uma mensagem de status que aparece como resultado de uma ação do usuário. Se a mensagem for importante o suficiente para chamar a atenção de um usuário com visão, é importante o suficiente para direcionar a atenção de um usuário de tecnologia adaptativa, definindo o atributo aria-live. Compare esta div simples

<div class="status">Your message has been sent.</div>

com seu correspondente "ativo".

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live tem três valores permitidos: polite, assertive e off.

• O aria-live="polite" instrui a tecnologia adaptativa a alertar o usuário sobre essa mudança quando ele terminar o que estiver fazendo no momento. Ele é ótimo para ser usado quando algo é importante, mas não urgente, e é responsável pela maior parte do uso de aria-live.
• O aria-live="assertive" instrui a tecnologia adaptativa a interromper o que quer que esteja fazendo e alertar o usuário sobre essa mudança imediatamente. Isso é válido apenas para atualizações importantes e urgentes, como uma mensagem de status como "Ocorreu um erro de servidor e suas alterações não foram salvas. Atualize a página" ou atualizações em um campo de entrada como resultado direto de uma ação do usuário, como botões em um widget de instruções.
• O aria-live="off" instrui a tecnologia adaptativa a suspender temporariamente aria-live interrupções.

Há alguns truques para garantir que suas regiões ativas funcionem corretamente.

Primeiro, a região aria-live provavelmente precisa ser definida no carregamento de página inicial. Essa não é uma regra fixa, mas se você tiver dificuldade com uma região aria-live, esse pode ser o problema.

Em segundo lugar, diferentes leitores de tela reagem de forma diferente a diferentes tipos de mudanças. Por exemplo, é possível acionar um alerta em alguns leitores de tela alternando o estilo hidden de um elemento descendente de verdadeiro para falso.

Outros atributos que funcionam com aria-live ajudam a ajustar o que é comunicado ao usuário quando a região ativa muda.

aria-atomic indica se a região inteira precisa ser considerada como um todo ao comunicar atualizações. Por exemplo, se um widget de data que consiste em um dia, mês e ano tiver aria-live=true e aria-atomic=true, e o usuário usar um controle de instruções para mudar apenas o valor do mês, todo o conteúdo do widget de data será lido novamente. O valor de aria-atomic pode ser true ou false (o padrão).

aria-relevant indica quais tipos de mudanças precisam ser apresentadas ao usuário. Algumas opções podem ser usadas separadamente ou como uma lista de tokens.

• adições, o que significa que qualquer elemento adicionado à região ativa é significativo. Por exemplo, anexar um período a um registro atual de mensagens de status significaria que o período seria anunciado para o usuário (supondo que aria-atomic fosse false).
• text, o que significa que o conteúdo do texto que está sendo adicionado a qualquer nó descendente é relevante. Por exemplo, modificar a propriedade textContent de um campo de texto personalizado leria o texto modificado para o usuário.
• remoções, o que significa que a remoção de qualquer texto ou nós descendentes precisa ser transmitida ao usuário.
• all, o que significa que todas as alterações são relevantes. No entanto, o valor padrão de aria-relevant é additions text, o que significa que, se você não especificar aria-relevant, ele vai atualizar o usuário sobre qualquer adição ao elemento, que é o que você provavelmente quer.

Por fim, aria-busy permite que você notifique a tecnologia adaptativa de que ela precisa ignorar temporariamente mudanças em um elemento, como quando itens estão sendo carregados. Quando tudo estiver no lugar, aria-busy precisará ser definido como falso para normalizar a operação do leitor.