Título SVG frente a atributo de título HTML

¿Conoces el titleatributo? Puedo hacer esto:

div  I'm a div with a `title`/div

Y ahora, si estoy en un dispositivo con el puntero del mouse y coloco el cursor sobre ese elemento, obtengo…

Lo cual supongo que es algo. A veces lo uso para cosas como poner una fecha u hora ampliada en un elemento que usa una abreviatura para ello. Es una pequeña ayuda de UX reservada exclusivamente para usuarios de mouse videntes.

Pero, según tengo entendido, no es particularmente útil. Ire Aderinokun investigó cómo se usa para el abbrelemento (un ejemplo comúnmente citado) y descubrió que no es tan bueno por sí solo. Ella sugiere un patrón mejorado con JavaScript . También menciona que JAWS tiene una configuración para anunciar títulos, lo que es interesante (aunque parece que está desactivada de forma predeterminada).

Sinceramente, no sé qué tan útil titlees para los lectores de pantalla, pero ciertamente habrá matices.

Aunque acabo de aprender algo sobre títulos… esto no funciona:

!-- Incorrect usage --svg/svg

Si pasa el cursor sobre ese elemento, no aparecerá el título. Tienes que hacerlo así:

!-- Correct usage --svg  titleCheckout/title    !-- More detail --  descA shopping cart icon with baguettes and broccoli in the cart./desc/svg

Curiosamente, Firefox 79 acaba de empezar a admitirlo .

Cuando usas un título de esa manera, el área en la que se puede colocar el cursor para revelar la ventana emergente del título es todo el rectángulo del archivo svg.

Estaba mirando todo esto porque recibí un correo electrónico interesante de alguien que estaba en una situación en la que la ventana emergente del título solo parecía aparecer al pasar el cursor sobre los píxeles “rellenados” de un SVG, y no sobre los píxeles transparentes. Qué raro , pensé. Tampoco pude replicar en mis pruebas.

Resulta que hay una situación como esta. Puede aplicar un titledentro de un useelemento, luego el título solo se aplica a aquellos píxeles que ingresan a través del archivo use.

Si elimina el título de “parte blanca”, verá que la “parte negra” solo aparece sobre los píxeles negros. Parece ser consistente en todos los navegadores. Es algo a tener en cuenta si así es como se aplican los títulos.