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: ocúltelo 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.
Como en, el ícono está sentado allí con un aspecto 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 junto a él 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 pise los dedos de los pies.
El ícono es independiente
Lo que queremos decir aquí es que el ícono no está acompañado por una etiqueta de texto visible y es un activador de acción significativo por sí solo. Este es complicado. Ha mejorado con el tiempo, donde todo lo que necesita para los navegadores modernos es:
<svg role="img"><title>Good Label</title> ... </svg>. Esto funciona para un SVG dentro de un <button>, digamos, o si el propio SVG está jugando el papel de “botón”.
El icono está envuelto por un enlace.
…y el vínculo es la acción significativa. Lo importante es que el enlace tenga un buen texto. Si el enlace tiene texto visible, entonces el ícono es decorativo. Si el SVG es el enlace donde está envuelto en un <a> (en lugar de un enlace SVG interno), luego, asígnele una etiqueta accesible, como:
<a href="https://css-tricks.com/" aria-label="Good Label"><svg aria-hidden="true" ... ></svg></a>…o tener un <span class="screen-reader-only"> texto 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.