Barrierefreie Icons

Standardmäßig dekorativ

Jedes glyphfox-Icon wird mit aria-hidden="true" gerendert, sofern Sie ihm keinen Namen geben. Screenreader überspringen es, und genau das wollen Sie bei einem Icon neben sichtbarem Text: Der Text sagt bereits, was das Bedienelement tut, und ein zusätzliches „Bild“ in der Ansage stört nur.

<!-- <DownloadIcon /> next to a label -->
<button type="button">
  <svg class="glyphfox glyphfox-download" aria-hidden="true" ...>...</svg>
  Download
</button>

Dieser Standard gilt überall: für die React-, Vue-, Svelte- und Angular-Komponenten, das glyph-fox-Element, die Runtime für reines HTML und die Strings aus toSvg. Sie ändern ihn nur, wenn ein Icon der einzige Träger seiner Bedeutung ist.

Icons, die Bedeutung tragen

Übergeben Sie title, und das Icon wird zu einem Bild mit Namen. Der Renderer ergänzt drei Dinge: ein <title>-Element als erstes Kind, role="img" und aria-label mit demselben Text. So wird der Name in allen Browsern und Screenreadern einheitlich bereitgestellt.

import { CircleCheckIcon, TriangleAlertIcon } from 'glyphfox/react';

export function SyncStatus({ ok }) {
  return ok
    ? <CircleCheckIcon title="Synced" color="#15803d" />
    : <TriangleAlertIcon title="Sync failed" color="#b91c1c" />;
}

<svg class="glyphfox glyphfox-circle-check" role="img" aria-label="Synced" ...>
  <title>Synced</title>
  ...
</svg>

In React, Vue und Svelte können Sie aria-label oder aria-labelledby auch direkt an die Komponente übergeben. Die Attribute landen auf dem svg, und das Icon ist automatisch nicht mehr dekorativ, ohne das <title>-Element und dessen Tooltip beim Hovern. decorative übersteuert die automatische Wahl in beide Richtungen: decorative verbirgt ein Icon selbst mit Titel, decorative={false} macht es zugänglich.

Benennen Sie, was das Icon an dieser Stelle bedeutet, nicht, was es darstellt. Für ein trash-Icon lautet der Name „Entwurf löschen“, nicht „Mülleimer“; für circle check in einer Liste von Zahlungen lautet er „Bezahlt“.

Buttons und Links nur mit Icon

Ist ein Icon der einzige Inhalt eines Buttons oder Links, benennen Sie das Bedienelement, nicht das Icon. Das Bedienelement erhält den Fokus und wird vom Screenreader angesagt; das Icon darin bleibt dekorativ.

import { XIcon, SettingsIcon, SearchIcon } from 'glyphfox/react';

export function Toolbar({ onClose }) {
  return (
    <>
      <button type="button" aria-label="Close dialog" onClick={onClose}>
        <XIcon />
      </button>

      <a href="/settings" aria-label="Settings">
        <SettingsIcon />
      </a>

      <button type="submit">
        <SearchIcon />
        <span className="visually-hidden">Search the docs</span>
      </button>
    </>
  );
}

Visuell verborgener Text, das dritte Muster, wird von den Übersetzungsfunktionen der Browser übersetzt, die Attribute oft auslassen; bevorzugen Sie ihn auf mehrsprachigen Websites. Eine typische visually-hidden-Klasse beschneidet das Element auf ein Pixel, ohne es aus dem Accessibility-Tree zu entfernen.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

Toggle-Buttons brauchen ihren Zustand, keinen neuen Namen. Ein Menü-Button, der von menu zu x morpht, behält sein Label und setzt aria-expanded; ein Play-Button, der zu pause morpht, ändert sein Label oder verwendet aria-pressed. Der Morph ist die visuelle Hälfte dieser Änderung; der Leitfaden zu animierten Icons zeigt beide Hälften zusammen.

Status, Farbe und Kontrast

Farbe allein darf keine Bedeutung tragen (WCAG 1.4.1). Verwenden Sie für unterschiedliche Zustände unterschiedliche Formen, etwa circle-check, circle-alert und circle-x, und kombinieren Sie sie nach Möglichkeit mit Text. Auch Badges helfen: file+check und file+alert unterscheiden sich in der Form, nicht nur in der Farbe.

Icons, die zum Verständnis der Seite oder zum Auffinden eines Bedienelements nötig sind, müssen gegenüber ihrem Hintergrund einen Kontrast von 3 zu 1 erreichen (WCAG 1.4.11, Nicht-Text-Kontrast). Messen Sie die Strichfarbe, denn sie zeichnet die Form; die halbtransparente Duotone-Ebene ist eine Dekoration darüber. Dekorative Icons neben Text fallen nicht unter die Regel, geringer Kontrast macht sie aber trotzdem schwerer erfassbar.

Dünne Striche wirken heller, als ihre Farbe vermuten lässt, weil das Antialiasing sie mit dem Hintergrund vermischt. glyphfox gleicht das unter 24 Pixeln aus, indem es den Strich um bis zu 30 Prozent kräftiger macht; bei 14 oder 16 Pixeln in einer gedämpften Farbe hält eine Strichstärke (weight) von 2,25 oder 2,5 die Icons lesbar. absoluteWeight schaltet die Kompensation ab, setzen Sie es bei kleinen Größen daher mit Bedacht ein.

Bewegung

Jeder lebendige Zustand und jeder Morph berücksichtigt prefers-reduced-motion: reduce: Presets werden nicht abgespielt, CSS-Morphs wechseln ohne Übergang, und Komponenten-Morphs springen direkt zu ihrer Endform. Der Endzustand bleibt sichtbar, es gehen also keine Informationen verloren.

Inhalte, die sich länger als fünf Sekunden von selbst bewegen, brauchen eine Möglichkeit zum Pausieren (WCAG 2.2.2). Koppeln Sie Endlosanimationen wie spin an den Vorgang, den sie anzeigen, und stoppen Sie sie, wenn er endet. Vermeiden Sie außerdem endlos laufende Blickfänger wie eine Glocke, die unaufhörlich wackelt.

Layouts von rechts nach links

In arabischen, hebräischen oder persischen Oberflächen müssen Icons, die in Leserichtung zeigen, gespiegelt werden: Zurück- und Vorwärtspfeile, Chevrons in Breadcrumbs, Antworten und Rückgängigmachen. mirrorRtl fügt eine Klasse hinzu, die das Icon spiegelt, sobald es sich innerhalb von dir="rtl" befindet, sodass dasselbe Markup in beiden Richtungen funktioniert.

import { ChevronLeftIcon, ChevronRightIcon } from 'glyphfox/react';

export function Pager({ onPrev, onNext }) {
  return (
    <nav aria-label="Pagination">
      <button type="button" onClick={onPrev}><ChevronLeftIcon mirrorRtl /> Previous</button>
      <button type="button" onClick={onNext}>Next <ChevronRightIcon mirrorRtl /></button>
    </nav>
  );
}

Spiegeln Sie keine Icons, deren Richtung nicht dem Text folgt: Mediensteuerungen wie play und fast-forward zeigen weiterhin nach rechts, eine clock dreht sich weiter im Uhrzeigersinn, ein check bleibt, wie er ist, und rotate-cw bedeutet weiterhin im Uhrzeigersinn.

Masken, Sprites, das Element und Angular

• Tailwind-CSS-Klassen rendern ein leeres Element mit einer Maske, das überhaupt keine Semantik hat. Ergänzen Sie aria-hidden="true" und geben Sie dem Bedienelement ein visuell verborgenes Label. Im Hochkontrastmodus von Windows kann ein Masken-Icon verschwinden; die Lösung steht im Tailwind-CSS-Leitfaden.
• Bei SVG-Sprites liegt das äußere svg bei Ihnen: Ergänzen Sie aria-hidden="true" für ein dekoratives Icon oder role="img" und aria-label für ein bedeutungstragendes. Beispiele finden Sie im Sprite-Leitfaden.
• Das glyph-fox-Element und die Angular-Komponente gf-icon rendern das svg innerhalb des Host-Elements. Ein aria-label am Host macht das innere svg zwar zu einem Bild, benennt es aber nicht, und ein Label an einem generischen Element wird nicht zuverlässig angesagt. Verwenden Sie title als Attribut oder Input; damit wird das innere svg benannt.

<!-- names the inner svg: role img, aria-label and a title -->
<glyph-fox name="circle-alert" title="Payment failed"></glyph-fox>

<!-- Angular -->
<gf-icon name="circle-alert" title="Payment failed"></gf-icon>

Testen

1. Öffnen Sie den Accessibility-Tree in den Devtools Ihres Browsers und wählen Sie das Bedienelement aus: Sein Name sollte das von Ihnen geschriebene Label sein, und dekorative Icons sollten gar nicht erscheinen.
2. Navigieren Sie mit einem Screenreader: VoiceOver unter macOS und iOS, NVDA unter Windows, TalkBack unter Android. Achten Sie auf doppelt angesagte Namen und auf alles, was nur als „Bild“ angesagt wird.
3. Emulieren Sie prefers-reduced-motion und forced-colors in den Rendering-Werkzeugen der Chromium-Devtools und prüfen Sie, ob die Icons sichtbar bleiben und sich nicht bewegen.
4. Prüfen Sie den Kontrast bedeutungstragender Icons mit einer Farbpipette gegen den tatsächlichen Hintergrund, auch in Hover- und Fokus-Zuständen.

Props, auf die es hier ankommt

Stolperfallen

Bedienelement und Icon gleichzeitig benennen

Ein title an einem Icon in einem Button, der bereits ein Label hat, führt dazu, dass Screenreader beides ansagen, und das <title>-Element erscheint zusätzlich als Tooltip beim Hovern. Benennen Sie nur eines: das Bedienelement.

Ein Bild ohne Namen

decorative={false} ohne title und ohne aria-label macht ein Bild ohne Namen zugänglich, das Screenreader als „Bild“ oder mit seinem Dateinamen ansagen. Geben Sie jedem zugänglich gemachten Icon einen Namen.

Zustände, die nur das Icon zeigt

Ein Morph von copy zu check ist für einen Screenreader unsichtbar. Geben Sie das Ergebnis als Text bekannt: Ändern Sie das Label des Buttons, oder schreiben Sie „Kopiert“ in eine Live-Region mit role="status".

Tooltips aus Titeln

Der Browser-Tooltip aus <title> erscheint nur beim Hovern mit der Maus, nie bei Fokus oder Berührung. Legen Sie dort keine Informationen ab, die nicht auch auf anderem Weg verfügbar sind.

Labels am Host-Element

Verwenden Sie bei glyph-fox und gf-icon lieber title als aria-label, wie oben beschrieben.