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 indicador que muestra un valor como temperatura de CPU, fortaleza de contraseña o 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 sin sentido.

Este problema afecta principalmente a usuarios que son ciegos o tienen baja visión y dependen de lectores de pantalla, así como usuarios con discapacidades motoras que pueden navegar mediante tecnologías de asistencia. Se relaciona con el Criterio de Éxito 1.1.1 de WCAG 2.0/2.1/2.2: Contenido no textual (Nivel A), que requiere que todo contenido no textual tenga una alternativa textual que sirva un propósito equivalente. Un medidor sin nombre falla en 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 denominación 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 en absoluto. Un lector de pantalla lo anunciará como un medidor pero no puede decir al usuario qué está midiendo.

<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 de 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 ser asociado 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

→