Como ocultar e atualizar conteúdo

Ocultar conteúdo de tecnologia assistiva

Alice Boxhall

Dave Gash

Meggin Kearney

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 maioria aria-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 temporariamente aria-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 era false).
• 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 especificar aria-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.