Die Antwort auf die Frage, *„Was ist das barrierefreiste HTML für ein SVG-Icon?“*, ist nicht allgemeingültig, da die Bedürfnisse eines Icons auf einer Website variieren. Ich halte viel von Heather Migliorisis Forschung zu diesem Thema, aber ich kann sie zusammenfassen. Extrem kurz: Verstecken Sie es, wenn es dekorativ ist, geben Sie ihm einen Titel, wenn es eigenständig ist, lassen Sie den Link die Arbeit machen, wenn es ein Link ist. Hier sind diese drei Möglichkeiten
Das Icon ist dekorativ
Das heißt, das Icon ist nur da, um hübsch auszusehen, aber es spielt keine Rolle, wenn es komplett verschwinden würde. Wenn das der Fall ist
<svg aria-hidden="true" ... ></svg>Es ist nicht nötig, das Icon anzukündigen, da die daneben stehende Beschriftung die Arbeit bereits erledigt. Anstatt es vorzulesen, verstecken wir es also vor Screenreadern. So erfüllt die Beschriftung ihren Zweck, ohne dass das SVG stört.
Das Icon ist eigenständig
Damit meinen wir, dass das Icon keine sichtbare Textbeschriftung begleitet und für sich allein eine sinnvolle Aktion auslöst. Das ist knifflig. Es ist im Laufe der Zeit besser geworden, und für moderne Browser reicht
<svg role="img"><title>Good Label</title> ... </svg>. Das funktioniert für ein SVG innerhalb eines <button>, zum Beispiel, oder wenn das SVG selbst die "Button"-Rolle spielt.
Das Icon ist von einem Link umschlossen
… und der Link die sinnvolle Aktion ist. Wichtig ist, dass der Link guten Text hat. Wenn der Link sichtbaren Text hat, dann ist das Icon dekorativ. Wenn das SVG der Link ist, der in einen <a> (statt eines internen SVG-Links) eingeschlossen ist, dann geben Sie ihm eine barrierefreie Beschriftung, wie z. B.
<a href="/" aria-label="Good Label"><svg aria-hidden="true" ... ></svg></a>… oder haben Sie einen <span class="screen-reader-only"> Text innerhalb des Links und des versteckten SVG.
Ich glaube, das stimmt mit den Ratschlägen nicht nur von Heather überein, sondern auch mit denen von Sara, Kitty und Florens.
Ich bin mir nicht sicher, ob jemand in letzter Zeit getestet hat, aber die Verwendung eines
<title>-Elements innerhalb eines Inline-SVG stört den Facebook-Crawler für seine Link-Vorschauen. Das bedeutet, dass der Crawler, wenn Sie einen Link teilen, nach **allen**<title>-Elementen auf der Seite sucht und diese für den Titel seiner Link-Vorschaukarten zusammenfügt. Sie könnten also mit einem Vorschautitel wie "Acme Website Suchen Sie unsere Website Facebook Twitter YouTube ..." enden, wobei "Acme Website" der tatsächliche Titel der Webseite im<title>im<head>ist, aber "Suchen Sie unsere Website Facebook Twitter YouTube ..." von den<title>-Elementen in den SVGs stammt.Nach allem, was ich (zugegebenermaßen wenig) über Barrierefreiheit in HTML gelesen habe, dachte ich, die Attribute
aria-label&aria-labeledbysollten nur verwendet werden, wenn es keine vorhandenen beschrifteten Texte gab, die mit dem betreffenden Element verbunden waren. Ich dachte, dass Muster wie<a href="…" title="Sinnvoller Titel"><svg … /></a>und<button title="Sinnvoller Titel"><svg … /></button>für diese rein icon-basierten anklickbaren Elemente ausreichen würden?Die Verwendung von SVG
<title>wird nicht empfohlen. Zusätzlich zu dem von Justin erwähnten Problem (das ich persönlich nicht kannte), verlinke ich in meinem Artikel auch einen Artikel meines Freundes Scott O’hara, in dem er die Unterstützung von Screenreadern für verschiedene Beschriftungstechniken beschreibt. Es wird **nicht** empfohlen, das<title>in einem SVG innerhalb eines Buttons zu verwenden, sondern eine der anderen Techniken, die ich in meinem Beitrag skizziert habe. Ich habe auch einen weiteren Beitrag zu diesem Thema in Arbeit.(P.S. Danke, dass du auf meinen Beitrag verlinkt hast! Zur Info: Der Link auf meinen Namen verweist auf Heathers Artikel, nicht auf meinen.)
Gibt es einen Unterschied zwischen
und
Und warum sollte man in diesem Fall
<title>nicht verwenden???
Theoretisch sind sie gleich, siehe https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/, aber …
… die zweite Form ist in VoiceOver ausschweifender, da SVG mit aria-label als Gruppe angekündigt wird, daher ist es besser, aria-label auf dem Link zu verwenden.
Wie verwende ich SVG-Icons in einem Eingabefeld, ohne CSS zu verwenden?