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 medidor que mostra um valor como temperatura do CPU, força da palavra-passe ou 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 pode transmitir o que está a ser medido. O utilizador ouve algo como “medidor” sem contexto, 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 o Critério de Sucesso 1.1.1 das WCAG 2.0/2.1/2.2: Conteúdo Não Textual (Nível A), que exige que todo o conteúdo não textual tenha uma alternativa textual que sirva um propósito equivalente. Um medidor sem nome falha em fornecer esta alternativa textual.

Como corrigir

Garanta 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 contenha 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 de recurso (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 qualquer nome. Um leitor de ecrã anunciará como um medidor mas não pode 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 a referenciar um elemento inexistente ou vazio

Se o elemento referenciado não existir ou não tiver conteúdo textual, o medidor ainda carece de 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 integrada e pode ser associado a 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

→