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

O role meter no ARIA representa uma medição escalar dentro de um intervalo conhecido — pense num indicador que mostra um valor como a temperatura do CPU, a força da palavra-passe ou a capacidade de armazenamento. Quando um leitor de ecrã encontra um elemento com role="meter", anuncia o elemento como um medidor, mas sem um nome acessível, não consegue transmitir o que está a ser medido. O utilizador ouve algo como “medidor” sem contexto, o que é efetivamente sem significado.

Este problema afeta principalmente utilizadores que são cegos ou têm baixa visão e dependem de leitores de ecrã, bem como utilizadores com deficiências motoras que podem navegar através de tecnologias assistivas. Relaciona-se com WCAG 2.0/2.1/2.2 Critério de Sucesso 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 um propósito equivalente. Um medidor sem nome falha em fornecer esta alternativa textual.

Como corrigir

Certifique-se de que cada elemento com role="meter" tem um nome acessível claro e descritivo usando um destes métodos:

1. aria-label — Adicione texto descritivo diretamente ao elemento.
2. aria-labelledby — Referencie outro elemento visível que contém o texto da etiqueta. O elemento referenciado deve existir e conter texto não vazio.
3. title — Use o atributo title como método de nomeação alternativo (embora aria-label ou aria-labelledby sejam geralmente preferidos).

O nome deve descrever claramente o que o medidor está a medir para que os utilizadores compreendam o seu propósito no contexto.

Exemplos

Incorreto: Medidor sem nome acessível

O seguinte medidor não tem nome algum. Um leitor de ecrã anunciá-lo-á como um medidor mas não consegue dizer ao utilizador o que mede.

<div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>

Incorreto: aria-label vazio

Um aria-label vazio é equivalente a não ter nome.

<div role="meter" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>

Incorreto: aria-labelledby referenciando um elemento inexistente ou vazio

Se o elemento referenciado não existe ou não tem conteúdo textual, o medidor ainda não tem um nome acessível.

<div role="meter" aria-labelledby="nonexistent" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>

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

Correto: Usando aria-label

<div role="meter" aria-label="Utilização do disco" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>

Correto: Usando aria-labelledby

<span id="meter-label">Nível da bateria</span>
<div role="meter" aria-labelledby="meter-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"></div>

Correto: Usando o atributo title

<div role="meter" title="Intensidade do sinal" aria-valuemin="0" aria-valuemax="5" aria-valuenow="3"></div>

Correto: Usando o elemento nativo <meter> com um <label>

Quando possível, prefira o elemento HTML nativo <meter>, que tem semântica incorporada e pode ser associado com um <label>.

<label for="fuel">Nível de combustível</label>
<meter id="fuel" min="0" max="100" value="68">68%</meter>

Learn more:

Deque Reference

Deque University - How To Fix

→