Wie mache ich mein Icon-System zugänglich?

Hier ist eine Frage, die ich neulich bekommen habe:

Würden Sie für eine komplexe Single-Page-Anwendung Icon-Fonts oder Inline-SVGs empfehlen? Und gibt es dafür spezifische Barrierefreiheitsbedenken? Barrierefreiheit ist uns besonders wichtig, da Schulen unsere Produkte nutzen. Ich frage, weil wir gerade dabei sind, ein Icon-System zu vereinheitlichen und einzurichten.

Ich denke nicht, dass ich die Wahl auf der Grundlage davon treffen würde, welche "Art" von Website ich baue, also lassen wir diesen Teil mal beiseite.

Ich denke auch, dass SVG-Icon-Systeme besser sind als Icon-Fonts, also gehen wir mal davon aus.

Die Frage der Barrierefreiheit ist der interessante Teil, also lassen Sie uns das behandeln.

Es gibt zwei Arten, wie ein Icon verwendet werden kann

1. Eigenständig: Das Icon muss für sich allein eine Bedeutung vermitteln
2. Dekorativ: Das Icon ist nur visuelles Beiwerk – die Wörter drumherum vermitteln die Bedeutung.

Muster für eigenständige Icons

Ich übernehme das von Accessible SVGs von Heather Migliorisi

<!-- role="img" so that the SVG is not traversed by browsers that map the SVG to the "group" role -->
<!-- aria-labelledby pointing to ID's of title and desc because some browsers incorrectly don't use them unless we do -->
<!-- if you are using a <use>-based icon system, this would be a <symbol id="unique-id"> below, but otherwise the same -->
<svg role="img" viewBox="0 0 100 100" aria-labelledby="unique-title-id unique-desc-id">

  <!-- title becomes the tooltip as well as what is read to assistive technology -->
  <!-- must be the first child! -->
  <title id="unique-title-id">Short Title (e.g. Add to Cart)</title>

  <!-- longer description if needed -->
  <desc id="unique-desc-id">A friendly looking cartoon cart icon with blinking eyes.</desc>

  <!-- all the SVG drawing stuff -->
  <path d="..." />
</svg>

Muster für dekorative Icons

Denken Sie daran, dass bei einem dekorativen Icon die Sache so ist, dass es keine Rolle spielen würde, wenn es gar nicht da wäre. Also verstecken wir es vor AT

<button>
  <svg aria-hidden="true" viewBox="0 0 100 100">
    <!-- or <use>, if using a <symbol>-based icon system -->
    <path d="..." />
  </svg> 
  Add to Cart
</button>

Aber… Icons könnten auch so oder so verwendet werden.

Richtig. Sie sollten Ihre Icons also wahrscheinlich so vorbereiten, dass sie als eigenständige, aussagekräftige Icons verwendet werden können. Wenn sie dann in einem dekorativen Kontext verwendet werden, hängen Sie aria-hidden="true" an das <svg>.

Ihr Icon-System könnte sich also so manifestieren...

<Icon icon="icon-cart.svg" standalone="true" />

oder

<?php
  $standalone = false;
  include("icon-cart.php"); // SVG with PHP logic sprinkled in
?>

oder

<%= render "icon/cart", :locals => {:standalone => true} %>

oder was auch immer.

Nehmen wir an, Sie müssen sich aber für Icon-Fonts entscheiden.

Dinge passieren.

So viel Icon-Font-Nutzung ist so

<i data-icon="a"></i>

Oder eine Variante, z. B. die Verwendung des "Private Use Area" für den Attributwert oder die Generierung eindeutiger Klassennamen für jedes Icon oder was auch immer.

.icon-camera:before {
  content: "\e90f";
}

Um ein eigenständiges Icon zu erstellen, ist das ziemlich einfach, Sie setzen einfach aria-hidden="true" auf das Element.

Wenn Sie ein aussagekräftiges eigenständiges Icon benötigen, bedeutet das mehr HTML. Von Bulletproof Icon Fonts, ist dies die empfohlene Struktur

<span class="icon-fallback-glyph">
  <span class="icon icon-hamburger" aria-hidden="true"></span>
  <span class="text">Menu</span>
</span>

Jetzt ist das Icon selbst versteckt (weil es eine seltsame bedeutungslose Schriftart verwendet), aber es gibt echten Text, der wie erwartet von AT gelesen werden kann. Sie können den Text auch visuell ausblenden. Angenommen, Sie haben hier einige Feature-Tests implementiert, hier ist die CSS, die nach Bedarf ein- und ausblendet

.icon-fallback-text .icon {
  display: none;
}
supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .icon {
  display: inline-block;
}
.supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

Denken Sie auch an verlinkte Icons!

Wenn ein Icon (auf eine dieser Arten) ein Link ist, stellen Sie sicher, dass entweder regulärer HTML-Text vorhanden ist, der klar erklärt, was es tut, oder Sie stellen ein aria-label zur Verfügung, das dies tut.

<a href="link" aria-label="See Picked Pens">
  <svg> 
    <use xlink:href="#icon-codepen"></use>
  </svg>
</a>