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 de apoio 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 o envio 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 nenhuma delas. Este problema afeta principalmente utilizadores que são cegos ou têm baixa visão, bem como utilizadores com deficiências de mobilidade 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 sirva o propósito equivalente. Uma barra de progresso é um indicador não textual de estado, portanto precisa de um nome baseado em texto para transmitir o seu significado aos utilizadores de tecnologias de apoio. 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 do envio de ficheiro” ou “Progresso da 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, então 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 apontando para elemento inexistente ou vazio

Se o elemento referenciado não existir ou não tiver 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>

Sucesso: usando aria-label

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

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

Sucesso: usando aria-labelledby

<h3 id="upload-heading">A enviar curriculo.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.

Sucesso: usando title

<div role="progressbar" title="Progresso da 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 por cima. Prefira aria-label ou aria-labelledby quando possível para uma experiência mais consistente através das tecnologias de apoio.

Learn more:

Deque Reference

Deque University - How To Fix

→