Los nodos ARIA meter deben tener un nombre accesible

El rol meter en ARIA representa una medición escalar dentro de un rango conocido — piensa en un medidor que muestra un valor como la temperatura de la CPU, la fortaleza de una contraseña o la capacidad de almacenamiento. Cuando un lector de pantalla encuentra un elemento con role="meter", anuncia el elemento como un medidor, pero sin un nombre accesible, no puede transmitir qué se está midiendo. El usuario escucha algo como “medidor” sin contexto, lo cual es efectivamente inútil.

Este problema afecta principalmente a usuarios que son ciegos o tienen visión reducida y dependen de lectores de pantalla, así como a usuarios con discapacidades motoras que pueden navegar mediante tecnologías de asistencia. Se relaciona con WCAG 2.0/2.1/2.2 Criterio de Éxito 1.1.1: Contenido no textual (Nivel A), que requiere que todo el contenido no textual tenga una alternativa textual que sirva un propósito equivalente. Un medidor sin nombre no logra proporcionar esta alternativa textual.

Cómo solucionarlo

Asegúrate de que cada elemento con role="meter" tenga un nombre accesible claro y descriptivo usando uno de estos métodos:

1. aria-label — Añade texto descriptivo directamente al elemento.
2. aria-labelledby — Referencia otro elemento visible que contenga el texto de la etiqueta. El elemento referenciado debe existir y contener texto no vacío.
3. title — Usa el atributo title como método de nomenclatura alternativo (aunque generalmente se prefieren aria-label o aria-labelledby).

El nombre debe describir claramente qué está midiendo el medidor para que los usuarios entiendan su propósito en contexto.

Ejemplos

Incorrecto: Medidor sin nombre accesible

El siguiente medidor no tiene nombre alguno. Un lector de pantalla lo anunciará como un medidor pero no puede decirle al usuario qué mide.

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

Incorrecto: aria-label vacío

Un aria-label vacío es equivalente a no tener nombre.

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

Incorrecto: aria-labelledby referenciando un elemento inexistente o vacío

Si el elemento referenciado no existe o no tiene contenido textual, el medidor aún carece de un nombre accesible.

<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>

Correcto: Usando aria-label

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

Correcto: Usando aria-labelledby

<span id="meter-label">Nivel de batería</span>
<div role="meter" aria-labelledby="meter-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"></div>

Correcto: Usando el atributo title

<div role="meter" title="Intensidad de señal" aria-valuemin="0" aria-valuemax="5" aria-valuenow="3"></div>

Correcto: Usando el elemento nativo <meter> con un <label>

Cuando sea posible, prefiere el elemento HTML nativo <meter>, que tiene semántica integrada y puede asociarse con un <label>.

<label for="fuel">Nivel de combustible</label>
<meter id="fuel" min="0" max="100" value="68">68%</meter>

Learn more:

Deque Reference

Deque University - How To Fix

→