El desarrollador Jake Archibald relata un error de accesibilidad cometido en uno de sus vídeos sobre la nueva función popover="hint" del navegador. Al construir una barra de herramientas con botones cuyo único contenido visible era un icono SVG, Archibald añadió un aria-describedby que apuntaba al tooltip para que los lectores de pantalla anunciaran la etiqueta. Como el tooltip repetía la palabra "Bold", decidió retirar el aria-label del botón creyendo que el tooltip bastaba como nombre accesible. La decisión le fue señalada por Léonie Watson y Gez Lemon, de la consultora TetraLogical: al suprimir el aria-label el botón se quedaba sin nombre accesible, algo que VoiceOver ya delataba al anunciar "clickable image", y que JAWS agravaba al leer el tooltip del botón adyacente, anunciándolo como negrita y cursiva a la vez. La solución correcta consiste en sustituir aria-describedby por aria-labelledby, que aporta el nombre accesible del botón a partir del propio tooltip. Si el tooltip contiene información adicional como un atajo de teclado, se pueden combinar aria-labelledby y aria-describedby con dos spans separados dentro del popover. Archibald subraya dos lecciones prácticas: todo elemento interactivo debe tener siempre un nombre accesible, y conviene probar con más de un lector de pantalla, igual que se prueba en más de un navegador, porque cada uno se comporta de forma distinta.
Noticias agregadas con IA