Zugänglichkeit für SVG- und Emoji-Symbole

SVG and Emoji Icon Accessibility

Lassen Sie uns einige Tipps zur barrierefreien Ikonografie durchgehen: SVGs, HTML-Entities und Emojis!

SVG

Wir alle wissen, dass SVG-Icons aus so vielen Gründen fantastisch sind (z. B. Skalierbarkeit, ihre Fähigkeit zur Animation und die Fähigkeit, sich an die Anforderungen eines Ansichtsfensters anzupassen und darauf zu reagieren), aber wie stellen wir sicher, dass sie zugänglich sind?

Werfen wir einen Blick auf einige verschiedene Szenarien, in denen in HTML eingebettetes SVG verwendet werden könnte, und wie sichergestellt werden kann, dass sie für Personen zugänglich sind, die Hilfstechnologien verwenden.

Informativ oder dekorativ?

Wie Bilder im Web, die das img -Element verwenden, müssen wir feststellen, ob ein SVG informativ ist (seine Präsenz ist es wert, Inhalte zum aktuellen Kontext hinzuzufügen) oder rein dekorativ ist (ein bisschen Augenschmaus für sehende Benutzer hinzufügen, aber nicht wichtig). genug, um eine Textalternative zu rechtfertigen.)

Informativ

Für den Fall, dass ein SVG informativ ist, gibt es ein Muster, das das SVG und seinen Inhalt in modernen Browsern und Bildschirmleseprogrammen konsistent wiedergibt. Dieses Muster besteht aus drei Schlüsselelementen:

  • Das role , das auf das SVG-Element selbst angewendet wird, mit dem Wert „img“ – stellt sicher, dass die Hilfstechnologie ihre Rolle als „image“ ankündigt.
  • Das Attribut aria-labelledby auf dem SVG, dessen Wert so eingestellt ist, dass er mit der id des SVG- title übereinstimmt, stellt sicher, dass die Hilfstechnologie den Wert im title konsistent ankündigt
  • Das SVG title , dessen Inhalt auf den barrierefreien Namen des SVG festgelegt ist
 <svg aria-labelledby="icon-title" role="img"> <title id="icon-title">SVG image description</title> <!-- Other required elements... --> </svg>

Wenn diese Elemente jetzt vorhanden sind, werden alle Browser + Screenreader den SVG-Inhalt genau wie folgt ankündigen:

"SVG-Bildbeschreibung, Bild"

Wann ist dies anzuwenden

Einige Fälle, in denen dies verwendet werden würde, sind:

  • Ein SVG, das als eigenständiges Logo oder Bild verwendet wird, das einer Seite Inhalt hinzufügt
  • Ein Social-Media-Symbol, das ohne weiteren Text in einen Link eingebettet ist
  • Ein einzelnes Symbol, das ohne weiteren Text in eine Aktionsschaltfläche eingebettet ist
  • Ein Punkt in einer Grafik oder einem Diagramm

Wenn das SVG der einzige Inhalt innerhalb eines a oder button -Elements ist, dient dieses Muster als barrierefreier Name des Elements und stellt den Kontext für den Zweck des aktuell fokussierten Elements bereit.

Dekorativ

Ein dekoratives SVG existiert nur als visuelle Hilfe für sehende Benutzer. In diesem Fall müssen wir das SVG so einrichten, dass es vor Screenreader-Benutzern "versteckt" wird, da die Ankündigung des Vorhandenseins eines Nicht-Inhaltselements nur lästig wäre.

Genau wie sein informativer Cousin erfordert das dekorative SVG einige zusätzliche Attribute:

  • Das role mit dem Wert „Repräsentation“ – hilft dabei, jede semantische Bedeutung abzustreifen
  • Das Attribut aria-hidden , dessen Wert auf „true“ gesetzt ist – verbirgt das SVG vor Hilfstechnologien
  • Das focusable Attribut auf „false“ gesetzt – dies hilft, einen Internet Explorer-Bug zu vermeiden, bei dem ein zusätzlicher Tabstopp auftreten würde, wenn die SVG-Datei in ein fokussierbares Element eingebettet wäre, z. B. eine a oder button 
 <svg role="presentation" aria-hidden="true" focusable="false"> <!-- Other required elements... --> </svg>

Wenn diese Attribute eingerichtet sind, wird das SVG-Element vollständig aus der Hilfstechnologie entfernt.

Wann ist dies anzuwenden

Einige Fälle, in denen dies verwendet werden würde, sind:

  1. Ein SVG-Bild, das nur als visuelle Hilfe dient
  2. Ein Symbol für soziale Medien, das in einen Link mit visuellem Text eingebettet ist
  3. Ein einzelnes Symbol, das in eine Aktionsschaltfläche mit visuellem Text eingebettet ist

Wenn sich das SVG neben verwandten Textinhalten befindet, dient dieses Muster dazu, das SVG aus der Hilfstechnologie zu entfernen und unnötige Ankündigungen zu vermeiden.

Ausblenden von Entitätszeichen

Es ist nicht ungewöhnlich, dass eine Designanforderung gestellt wird, um einen Pfeil oder Plus-/Minus-Bilder in einen Link oder eine Schaltfläche einzufügen. Aus Gründen wie der Leistung und dem Einfügen gestochen scharfer Bilder auf einer Vielzahl von Geräten und Bildschirmen wird dies normalerweise durch Einfügen eines HTML-Entitätszeichens erreicht. Dabei hat dieses Muster jedoch möglicherweise ein Problem mit der Barrierefreiheit verursacht.

Welches Problem, fragen Sie sich vielleicht? Entitätszeichen haben ihre eigene, integrierte Semantik und einen zugänglichen Namen. Wenn ein Screenreader mit einer Entity-Figur in Kontakt kommt, wird sie wie jeder andere Text angesagt. Die zusätzliche Inhaltsankündigung, wie gering sie auch sein mag, könnte für einige zu einer verwirrenden Benutzererfahrung führen.

Im Kontext des Beispiels zum Hinzufügen eines Pfeilsymbols zu einer Schaltfläche ist das Entitätssymbol rein dekorativ. Genauso wie das Entfernen eines alt Textwerts aus einem Bild, das als „dekorativ“ eingestuft wurde, um es vor Screenreadern zu verbergen, sollte die gleiche Behandlung auf Entitätszeichen angewendet werden.

Lassen Sie uns einige gängige Techniken zum Hinzufügen eines Entitätszeichens und zum Sicherstellen, dass es von Hilfstechnologien ignoriert wird, überprüfen.

Verwendung von CSS

Ein gängiges CSS-Muster zum Einfügen eines Symbols im Pfeilstil in ein button ist die Verwendung eines CSS-Pseudoelements . Der folgende Code sollte das erreichen, wonach wir suchen:

 .btn--continue:after { content: ' →'; }

Dieser Code fügt das Pfeilsymbol zu jeder Instanz des übereinstimmenden Selektors hinzu, das Zeichen wird jedoch von einem Bildschirmleser angesagt. Dies ist nicht optimal. (Es gab Pläne für die CSS3-Spezifikation, um es CSS zu ermöglichen, Inhalte vor Hilfstechnologien zu verbergen. Leider wurde die Arbeit am CSS-Sprachmodul eingestellt.)

Direkt in HTML

Sehen wir uns ein weiteres Muster an und platzieren das Pfeilsymbol direkt in HTML:

 <button class="btn btn--continue">Continue →</button>

Auch dieser Code fügt das Pfeilsymbol zu jeder Instanz des Schaltflächenelements hinzu, das Zeichen wird jedoch von einem Screenreader angesagt.

Wrap mit aria-hidden

Die Methode, ein Entitätssymbol vor Bildschirmlesegeräten und anderen unterstützenden Technologien zu verbergen, dh es als dekorativ festzulegen, besteht darin, das Symbol selbst mit einem aria-hidden Element zu umhüllen.

<button class="btn btn--continue"> Continue <span aria-hidden="true">→</span> </button>

Wenn dies eingerichtet ist, wird das Pfeilsymbol von der Hilfstechnologie ignoriert und nur die wichtige Information „Fortfahren“ wird angesagt.

Zugängliche Emojis

Emojis sind ein großartiges Werkzeug, um schnell eine Emotion oder Aktion über Symbole auszudrücken. Wenn es jedoch um Emojis und Zugänglichkeit geht, kann das, was visuell angezeigt wird, für jemanden, der Hilfstechnologien verwendet, nicht gleich rüberkommen.

Nehmen Sie zum Beispiel die gebräuchlichen Sätze „I ❤️ you“ – angekündigt als „I red heart you“. Das ist nicht ganz die richtige Bedeutung hinter dieser Nachricht. Lassen Sie uns dieses Emoji für Screenreader-Benutzer benutzerfreundlicher gestalten.

Um den Inhalt wie erwartet darzustellen, können wir das Emoji-Zeichen mit einem HTML-Container-Element umschließen und einige Attribute hinzufügen:

  • Umschließen Sie das Emoji mit einem span -Element, da es keine semantische Bedeutung hat und standardmäßig inline formatiert ist
  • Fügen Sie das role hinzu und setzen Sie seinen Wert auf „img“, um das Emoji als Bild anzukündigen
  • Fügen Sie das Attribut aria-label hinzu und setzen Sie seinen Wert auf den erwarteten Text, der angesagt werden soll (dies ist vergleichbar mit dem Setzen eines alt -Attributs für ein tatsächliches Bildelement).
 <p> I <span role="img" aria-label="love">❤️</span> you. </p>

Mit diesem Setup hören Screenreader die Nachricht jetzt wie beabsichtigt!

Text und Symbole

Aus Sicht der Benutzerfreundlichkeit bietet die gemeinsame Verwendung von Symbolen und Text den meisten Kontext für das Verständnis der Ikonographie. Für manche Menschen ist die Fähigkeit, ein ständig verwendetes Symbol zu erkennen, eine schnelle Möglichkeit, Kontext zu gewinnen. Für andere (einschließlich Personen, die möglicherweise Übersetzungstools verwenden) kann Text hilfreicher sein. Für Menschen mit Leseschwäche kann die Kombination aus Text und Symbol dabei helfen, Konzepte zu verstärken und Sicherheit zu geben. Symbole, die wörtliche Konzepte oder Objekte darstellen, sind immer klarer als solche, die Metaphern darstellen.

Berücksichtigen Sie bei der Verwendung informativer Symbole immer, welcher Text sie am besten beschreibt. Verwenden Sie immer denselben Text, damit die Leute die Bedeutung des Symbols immer verstehen. Symbole sollten nur dann allein verwendet werden, wenn sie ein im System allgemein verständliches Konzept darstellen. Wenn nur ein Symbol verwendet wird, wird für Personen, die auf Bildschirmlesegeräte oder andere Text-zu-Sprache-Tools angewiesen sind, immer noch ein Textäquivalent benötigt.

Ressourcen:

Zurück zum Blog