Ein kurzer Tipp zur besseren Zugänglichkeit von SVG-Grafiken, die als Button verwendet werden, bzw. die man in einem Button verwendet, wie z. B. ein „Schließen-Kreuz“ als Grafik.
Vorab: Natürlich sollte es sich bei dem Element um einen <button> handeln und nicht um ein <a>. <a> sollten nur für Links auf der Seite, zu anderen Seiten und z. B. für E-Mail-Adressen verwendet werden.
Der Button braucht einen zugänglichen Namen, also ein aria-label, der aussagt, was passiert, wenn man den Button drückt. Das SVG sollte mit aria-hidden vor Screenreadern versteckt werden.
Beispiel-Code:
<button onclick="#" aria-label="Close">
<svg aria-hidden="true" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</button>