Os nós ARIA progressbar devem ter um nome acessível

Quando uma barra de progresso não tem um nome acessível, utilizadores que dependem de tecnologias assistivas não têm forma de a distinguir de outras barras de progresso na página ou compreender o seu propósito. Imagine uma página com duas barras de progresso—uma para upload de ficheiro e outra para instalação de software. Sem nomes acessíveis, um utilizador de leitor de ecrã ouviria “barra de progresso” duas vezes sem contexto para nenhuma delas. Este problema afeta principalmente utilizadores cegos ou com baixa visão, bem como utilizadores com deficiências motoras que podem navegar usando comandos de voz que referenciam nomes de elementos.

Esta regra relaciona-se com o Critério de Sucesso WCAG 1.1.1: Conteúdo Não-textual (Nível A), que exige que todo o conteúdo não-textual tenha uma alternativa textual que serve o propósito equivalente. Uma barra de progresso é um indicador não-textual de estado, pelo que necessita de um nome baseado em texto para transmitir o seu significado aos utilizadores de tecnologia assistiva. Este critério aplica-se através das WCAG 2.0, 2.1, e 2.2 no Nível A, significando que é um requisito base.

Como corrigir

Certifique-se de que cada elemento com role="progressbar" tem um nome acessível significativo usando uma destas técnicas:

• aria-label — Forneça uma etiqueta concisa e descritiva diretamente no elemento.
• aria-labelledby — Referencie o id de outro elemento que contenha texto de etiqueta visível.
• title — Use o atributo title como alternativa (embora aria-label ou aria-labelledby sejam preferíveis).

O nome deve descrever claramente que processo ou tarefa a barra de progresso representa, como “Progresso de upload de ficheiro” ou “Progresso de instalação.”

Exemplos

Falhando: barra de progresso sem nome acessível

Uma barra de progresso sem atributos de etiquetagem é anunciada genericamente sem contexto.

<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>

Falhando: aria-label vazio

Um aria-label vazio não fornece nome, pelo que a barra de progresso permanece sem etiqueta.

<div role="progressbar" aria-label="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>

Falhando: aria-labelledby apontando para elemento inexistente ou vazio

Se o elemento referenciado não existe ou não tem conteúdo textual, a barra de progresso ainda não tem nome acessível.

<div role="progressbar" aria-labelledby="missing-id" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>

<!-- Ou referenciando um elemento vazio -->

<div role="progressbar" aria-labelledby="empty-label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div id="empty-label"></div>

Passando: usando aria-label

<div role="progressbar" aria-label="Progresso de upload de ficheiro" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>

Um leitor de ecrã anunciará algo como: “Progresso de upload de ficheiro, barra de progresso, 50%.”

Passando: usando aria-labelledby

<h3 id="upload-heading">A carregar resume.pdf</h3>
<div role="progressbar" aria-labelledby="upload-heading" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
</div>

Esta abordagem é especialmente útil quando um cabeçalho ou etiqueta visível já descreve a barra de progresso, mantendo os nomes visual e acessível sincronizados.

Passando: usando title

<div role="progressbar" title="Progresso de instalação" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
</div>

O atributo title funciona como mecanismo de nomeação, mas note que pode também produzir uma dica ao passar o rato. Prefira aria-label ou aria-labelledby quando possível para uma experiência mais consistente através de tecnologias assistivas.

Learn more:

Deque Reference

Deque University - How To Fix

→