Zugängliche SVG-Icons mit Inline Sprites

Dies ist ein großartiger Einblick in barrierefreie SVG-Markup-Muster von Marco Hengstenberg. Hier ist das ideale Beispiel

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/>
    </svg>
</button>

Notizen

• Nicht das <svg> selbst ist interaktiv – es ist dafür in einen <button> verpackt.
• Die Klasse .svg-icon hat einige nette Tricks, wie em-basierte Größenanpassung, um die Größe des danebenstehenden Textes anzupassen, und currentColor, um die Farbe anzupassen.
• Da daneben echter Text steht, kann das Icon sicher mittels aria-hidden="true" ignoriert werden. Wenn Sie einen reinen Icon-Button benötigen, können Sie diesen Text in eine barrierefreundliche Klasse .visually-hidden verpacken.
• Das Attribut focusable="false" löst einen IE 11 Bug.

Plus ein praktischer Pen, um auf alle Muster zu verweisen.

Direkter Link →