SVG-Icon-Symbole, Angabe von role und aria-hidden

[Auge]

Hallo

einem Beitrag von Gunnar folgend habe ich für eine Seite die schon als SVGs vorliegenden Icons in einer Symboldatei zusammengefasst (inklusive der Verwendung von Custom-Properties (CSS)) zentral verwaltbar gemacht. In den originalen SVG-Dateien gab es am Element svg auch immer die Attribute role und aria-hidden mit den Werten presentation respektive true. Soweit ich mir angelesen habe, reicht aber für meinen Fall aria-hidden="true" aus.

Wo aber gebe ich die Attribute nun an?

Landen sie in den Symbolen und wenn ja, wo dort? Es wäre ja bequem und datensparsam, das Attribut nur einmal notieren zu müssen, egal, wie oft es benutzt wird …

 <symbol id="pencil" viewBox="0 0 200 200" aria-hidden="true">
  <title>Bleistift</title>
  <g stroke="none" transform="scale(1.95) rotate(-135) translate(37, 32)" transform-origin="center">
   <polygon points="50,44 62,4 74,44"
   fill="url(#pencil-tip)" />
   <path d="M 50,124 v 0,-80 a 4 6 0 0 1 6,0 a 4 1.5 0 0 1 12,0 a 4 6 0 0 1 6,0 v 0,80 z"
   fill="url(#pencil-colour)" />
  </g>
 </symbol>

… Oder muss ich das Attribut in den svg-Elementen im HTML-Dokument notieren, mit denen die Symbole eingebunden werden?

 <svg viewBox="0 0 200 200" width="25" height="25" aria-hidden="true">
  <use href="data/grafik/sprites.svg#pencil" />
 </svg>

Das wird in allen Beschreibungen der Technik, die ich bisher gefunden habe, so gezeigt. Das heißt ja aber nicht, dass es nur so geht.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

… Oder muss ich das Attribut in den svg-Elementen im HTML-Dokument notieren, mit denen die Symbole eingebunden werden?

 <svg viewBox="0 0 200 200" width="25" height="25" aria-hidden="true">
  <use href="data/grafik/sprites.svg#pencil" />
 </svg>

Das wird in allen Beschreibungen der Technik, die ich bisher gefunden habe, so gezeigt. Das heißt ja aber nicht, dass es nur so geht.

Ganz unabhängig davon, ob das Setzen von aria-hidden oder role in symbol möglich wäre (was ich jetzt ohne Nachlesen oder Ausprobieren^[1] auch nicht weiß), folgender Gedanke: Vielleicht will man ein symbol mal anders verwenden – mit zugänglicher Beschreibung.

Ich denke, man sollte sich diese Möglichkeit nicht prinzipiell verbauen, sondern aria-hidden bzw. role an den svg-Elementen setzen, die man vor AT verstecken will.

🖖 Live long and prosper

---

1. „2 Stunden ausprobieren können Ihnen 10 Minuten Handbuchlesen sparen.“ — Linda [Zitat 231] ↩︎

[Auge]

Hallo

… Oder muss ich das Attribut in den svg-Elementen im HTML-Dokument notieren, mit denen die Symbole eingebunden werden?

 <svg viewBox="0 0 200 200" width="25" height="25" aria-hidden="true">
  <use href="data/grafik/sprites.svg#pencil" />
 </svg>

Das wird in allen Beschreibungen der Technik, die ich bisher gefunden habe, so gezeigt. Das heißt ja aber nicht, dass es nur so geht.

Ganz unabhängig davon, ob das Setzen von aria-hidden oder role in symbol möglich wäre (was ich jetzt ohne Nachlesen oder Ausprobieren auch nicht weiß), folgender Gedanke: Vielleicht will man ein symbol mal anders verwenden – mit zugänglicher Beschreibung.

Ich denke, man sollte sich diese Möglichkeit nicht prinzipiell verbauen, sondern aria-hidden bzw. role an den svg-Elementen setzen, die man vor AT verstecken will.

Überaus schlüssig. Unter der Voraussetzung, dass das Attribut aria-hidden auch am Symbol funktionieren würde, könnte ich mir das title-Element des Symbols auch gleich klemmen. Es würde ja nicht verwendet, auch wenn ich es andernorts wollte.

Ich gehe davon aus, dass die Abkürzung „AT“ für assitive Technik (oder etwas ähnliches) steht. In einem Artikel auf css-tricks.com, den ich zur Recherche las, schmiss der Autor auch ohne weitere Erklärung mit dieser Abkürzung um sich. Erst im Kontext deines Satzes kam ich darauf, was das heißen könnte. Und sicher bin ich dennoch nicht.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Ich gehe davon aus, dass die Abkürzung „AT“ für assitive Technik (oder etwas ähnliches) steht.

Ich ging davon aus, dass die Abkürzung – wenngleich nicht allgemein bekannt – so doch dir bekannt ist. Aber hat ja auch so geklappt. 😊

🖖 Live long and prosper