Ocultar conteúdo de tecnologia assistiva
aria-oculta
Outra técnica importante no ajuste da experiência para usuários de tecnologia envolve garantir que apenas partes relevantes da página sejam expostos à tecnologia assistiva. Há várias maneiras de garantir que uma seção do DOM não é exposto 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 que tiver um estilo CSS de visibility:
hidden
ou display: none
ou usar o atributo HTML5 hidden
também será
ocultos de usuários de tecnologia assistiva.
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 está absolutamente posicionado fora da tela.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Além disso, como vimos, é possível fornecer texto somente para leitores de tela por meio de uma
aos atributos aria-label
, aria-labelledby
ou aria-describedby
que fazem referência a um
elemento que ficaria oculto.
Consulte este artigo do WebAIM sobre técnicas de ocultação texto para mais informações sobre como criar "somente leitor de tela" em textos.
Por fim, ARIA fornece um mecanismo para excluir conteúdo de
tecnologia que não está visualmente oculta usando o atributo aria-hidden
.
A aplicação deste atributo a um elemento o remove e todas as suas
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 encontrar algum tipo
de sobreposição semitransparente indicando que a maior parte da página não pode ser
mas um usuário de leitor de tela ainda pode explorar para as outras partes
da página. Nesse caso, além da criação da armadilha do teclado explicada
antes,
você precisa ter certeza de que as partes da página que estão fora do escopo no momento
também são aria-hidden
.
Agora que você entende os conceitos básicos de ARIA e como ela funciona com HTML nativo semântica e como ela pode ser usada para realizar cirurgias razoavelmente grandes na árvore de acessibilidade e mudar a semântica de um único elemento, vamos vamos conferir como usá-los para transmitir informações urgentes.
Aria-live
aria-live
permite que os desenvolvedores marquem uma parte da página como "ativa" no sentido de que
as atualizações devem ser comunicadas aos usuários imediatamente, independentemente da página
do site, e não apenas explorando essa parte da página. Quando
um elemento tem um atributo aria-live
, a parte da página que o contém; e
dos descendentes dela é chamada de região ativa.
Por exemplo, uma região ativa pode ser uma mensagem de status que aparece como resultado
uma ação do usuário. Se a mensagem for importante o suficiente para chamar a atenção de um usuário
atenção, é importante o suficiente direcionar a atenção de um usuário de tecnologia assistiva
atenção a ele definindo o atributo aria-live
. Compare este div
simples
<div class="status">Your message has been sent.</div>
com a posição "em tempo real" e seu correspondente.
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
tem três valores permitidos: polite
, assertive
e off
.
aria-live="polite"
instrui a tecnologia adaptativa a alertar o usuário sobre isso. mudar quando ele tiver terminado o que quer que esteja fazendo no momento. É ótimo usar se algo é importante, mas não urgente, e representa a maioriaaria-live
uso.- O
aria-live="assertive"
instrui a tecnologia adaptativa a interromper o que quer fazendo e alertar o usuário sobre essa alteração imediatamente. Isso é apenas para atualizações importantes e urgentes, como uma mensagem de status como "Foi um de servidor e suas alterações não serão salvas. atualize a página" ou atualizações em um campo de entrada como resultado direto de uma ação do usuário, como em um widget de stepper. - 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, sua região aria-live
provavelmente deve ser definida no carregamento inicial da página.
Esta não é uma regra rígida, mas se você estiver tendo dificuldade com uma
aria-live
região, esse pode ser o problema.
Segundo, leitores de tela diferentes reagem de forma diferente a tipos diferentes de
mudanças. Por exemplo, é possível acionar um alerta em alguns leitores de tela
mudando o estilo hidden
de um elemento descendente de verdadeiro para falso.
Outros atributos que funcionam com aria-live
ajudam você a ajustar o que é
comunicada ao usuário quando a região ativa muda.
aria-atomic
indica se toda a região deve ser considerada como uma
inteira ao comunicar atualizações. Por exemplo, se um widget de data consistir em um
dia, mês e ano tem aria-live=true
e aria-atomic=true
, e o usuário
usa um controle de stepper para alterar o valor apenas do mês, o conteúdo completo
do widget de data será lida novamente. O valor de aria-atomic
pode ser true
ou false
(o padrão).
aria-relevant
indica quais tipos de mudança precisam ser apresentados ao usuário.
Algumas opções podem ser usadas separadamente ou como uma lista de tokens.
- adições, que significa que qualquer elemento adicionado à região ativa é
significativos. Por exemplo, anexar um período a um registro de status atual
significa que o período seria anunciado ao usuário (supondo que
que
aria-atomic
erafalse
). - text, o que significa que o conteúdo do texto que está sendo adicionado a qualquer nó descendente é
relevantes. Por exemplo, modificar a propriedade
textContent
de um campo de texto personalizado leria o texto modificado para o usuário. - remoções, ou seja, a remoção de qualquer texto ou nós descendentes ser transmitidos ao usuário.
- all, o que significa que todas as alterações são relevantes. No entanto, o valor padrão
aria-relevant
éadditions text
, o que significa que, se você não especificararia-relevant
, isso vai atualizar o usuário sobre qualquer adição ao elemento, que é o que você provavelmente vai querer.
Por fim, aria-busy
permite que você notifique a tecnologia adaptativa de que ela precisa
ignorar temporariamente as mudanças em um elemento, como quando as coisas estão carregando; Uma vez
tudo está no lugar, aria-busy
deve ser definido como falso para normalizar o
das operações do leitor.