Etiquetado mediante el atributo title

Silktide comprueba los botones y enlaces de sus páginas para detectar controles que dependen del atributo title para explicar su función. Los navegadores solo muestran title como una descripción emergente con retraso cuando el puntero del ratón se sitúa sobre el elemento, por lo que la mayoría de las personas nunca lo ve.

<!-- Problema: la descripción emergente es la única etiqueta -->
<button title="Cerrar"><svg>…</svg></button>

<!-- Solución: proporcione al control un nombre accesible real -->
<button aria-label="Cerrar"><svg>…</svg></button>

Por qué es importante

Una descripción emergente de title aparece solo para quienes usan el ratón y únicamente tras un retraso. Las personas que usan el teclado, dispositivos táctiles o móviles, y la mayoría de quienes usan un nunca la reciben, por lo que un control etiquetado únicamente mediante su title es un botón misterioso para una gran parte de sus visitantes. Los lectores de pantalla también gestionan title de forma inconsistente: algunos lo leen y otros lo ignoran, lo que lo hace poco fiable incluso para las personas a las que supuestamente sirve.

Cuando un control tiene tanto un title como un diferente, el problema es la coherencia: quien usa el ratón ve brevemente una descripción, mientras que quien usa tecnología de asistencia oye otra, y ambas se alejan cada vez más a medida que se mantiene la página.

Cómo solucionarlo

Proporcione al control una etiqueta adecuada: texto visible cuando sea posible o un aria-label de (o aria-labelledby que apunte a texto existente) para controles que solo contienen iconos.
Si el control tiene un title y un aria-label que no coinciden, elija la redacción más útil y úsela en todas partes. Normalmente, la solución más sencilla es eliminar el title y dejar que aria-label proporcione la descripción.
Conserve title solo para información realmente complementaria. Nunca debe ser la única forma de saber qué hace un control.

Cómo realiza Silktide esta comprobación

Encuentre los botones, enlaces y controles de divulgación visibles de cada página, incluidos los elementos con role="button" o role="link".
Para cada control con un atributo title significativo, compruebe si tiene algún otro etiquetado: texto visible, de imagen, aria-label o aria-labelledby.
Informe de los controles cuya única etiqueta sea el atributo title.
Cuando un control tenga un title y un aria-label o aria-labelledby explícito, compare ambos e informe de ellos cuando indiquen cosas sustancialmente distintas. Si uno simplemente amplía al otro (un title de "Buscar" con un nombre de "Buscar ahora"), no se informa de ello.

Los campos de formulario como <input> y <select> no se prueban mediante esta comprobación; su etiquetado se trata en las etiquetas de controles de formulario.

Resolución de problemas

El atributo title es obligatorio en los iframes

Correcto: title en un <iframe> es la forma estándar de asignarle un nombre, y esta comprobación no prueba los iframes. Solo prueba controles interactivos como botones y enlaces.

Mi descripción emergente añade información adicional útil

Ese es un uso legítimo, siempre que el control también tenga una etiqueta real. Esta comprobación solo informa de controles en los que title es la única etiqueta o cuando contradice el nombre accesible.