Ocultando conteúdo de tecnologia assistiva
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 dearia-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 temporariamentearia-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
fossefalse
). - 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 especificararia-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.