Íconos SVG accesibles

La respuesta a “¿Cuál es el HTML más accesible para un icono SVG?” no es igual para todos, porque lo que un ícono debe hacer en un sitio web varía. Soy partidario de la investigación de Heather Migliorisi sobre todo esto, pero puedo resumir. Extremadamente rápido: ocultelo si es decorativo, póngale un título si es independiente, deje que el enlace haga el trabajo si es un enlace. Aquí están esas tres posibilidades:

El icono es decorativo.

Es decir, el ícono simplemente está ahí luciendo bonito, pero no importa si desapareció por completo. Si ese es el caso:

svg aria-hidden="true" ... /svg

No es necesario anunciar el ícono porque la etiqueta al lado ya hace el trabajo. Entonces, en lugar de leerlo, lo ocultamos de los lectores de pantalla. De esa manera, la etiqueta hace lo que se supone que debe hacer sin que el SVG le intervenga.

El icono es independiente.

Lo que queremos decir aquí es que el icono no va acompañado de una etiqueta de texto visible y es un desencadenante de acción significativa por sí solo. Éste es complicado. Ha mejorado con el tiempo, donde todo lo que necesitas para los navegadores modernos es:

svg role="img"titleGood Label/title ... /svg. 

Esto funciona para un SVG dentro de button, por ejemplo, o si el propio SVG desempeña el papel de “botón”.

El icono está rodeado por un enlace.

…y el vínculo es la acción significativa. Lo importante es que el enlace tenga buen texto. Si el enlace tiene texto visible, entonces el icono es decorativo. Si el SVG es el enlace donde está incluido en un a(en lugar de un enlace SVG interno), entonces, asígnele una etiqueta accesible, como:

a href="/" aria-label="Good Label"svg aria-hidden="true" ... /svg/a

…o tener un spantexto dentro del enlace y el SVG oculto.

---

Creo que esto se sincroniza correctamente con los consejos no solo de Heather, sino también de Sara, Kitty y Florens.