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

Quando uma barra de progresso não tem um nome acessível, os utilizadores que dependem de tecnologias assistivas não têm forma de a distinguir de outras barras de progresso na página ou de compreender o seu propósito. Imagine uma página com duas barras de progresso—uma para o carregamento de um ficheiro e outra para a instalação de software. Sem nomes acessíveis, um utilizador de leitor de ecrã ouviria “barra de progresso” duas vezes sem contexto para qualquer uma 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 requer que todo o conteúdo não-textual tenha uma alternativa textual que sirva o propósito equivalente. Uma barra de progresso é um indicador não-textual de estado, por isso precisa de um nome baseado em texto para transmitir o seu significado aos utilizadores de tecnologia assistiva. Este critério aplica-se ao 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 carregamento de ficheiro” ou “Progresso de instalação.”

Exemplos

Falha: Barra de progresso sem nome acessível

Uma barra de progresso sem atributos de etiquetagem é anunciada de forma genérica sem contexto.

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

Falha: aria-label vazio

Um aria-label vazio não fornece nome algum, por isso a barra de progresso permanece sem etiqueta.

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

Falha: aria-labelledby a apontar para um elemento inexistente ou vazio

Se o elemento referenciado não existir ou não tiver conteúdo textual, a barra de progresso continua sem nome acessível.

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

<!-- Ou a referenciar 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>

Sucesso: Usando aria-label

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

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

Sucesso: Usando aria-labelledby

<h3 id="upload-heading">A carregar curriculum.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 visuais e acessíveis sincronizados.

Sucesso: 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 também pode produzir uma dica ao passar o rato por cima. Prefira aria-label ou aria-labelledby quando possível para uma experiência mais consistente entre tecnologias assistivas.

Learn more:

Deque Reference

Deque University - How To Fix

→