nicht angemeldet
hallo
<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav" aria-label="main navigation"> <button aria-expanded="false"> <svg aria-hidden="true"><href="mein link"/></svg> <span class="visually-hidden> Hauptnavigation</span> </button>
Ich bevorzuge es, den Text lesbar darzustellen und zusätzlich via CSS ein Sprite-Image als Background einzubinden.
<button class="icon menu">Menu</button>
Gunnar und ich haben verschiedene Ansichten über den Einsatz von SVG-Icons. Er findet es sinnvoll, die SVG Datei direkt im Dokument zu referenzieren über
<button><svg><use xlink-href="icons.svg#menu"/></svg>Menu</button>
Ich jedoch finde, dass Icons selber keine semantische Aussage haben, deshalb als Gestaltung zu betrachten sind, die man nur über CSS einbinden soll. Damit kann man die referenzierte Iconset-Datei zentral im CSS auch austauschen.
In der CSS-Datei stünde dann
.icon.menu::before{ background-image("icon.svg#menu"); /* weitere Angaben */ }
Gunnars Methode ist dort geeignet, wo man das HTML via Server erzeugen lässt, weil dort die zu verwendende Datei auch zentral gesteuern werden kann.
Wenn man aber wie ich HTML-Dateien von Hand erzeugt, will man die Dateien so sparsam wie möglich halten, und Spritemaps zentral via CSS-Datei einbinden.
Nochmals bin ich dafür ein Button-Label im Klartext immer anzuzeigen. User kommen spärlich mit Webseiten in Berührung und haben nicht die Chance, die Bedeutung von Icons zu erfahren. Deshalb gilt hier: Text für alle.
Das Ausblenden von Text zu gunsten einer nur-Icon Darstellung von Buttons darf nur eine Useroption sein, und ist deshalb konfigurierbaren Anwendungen vorbehalten.
Gunnar Bittersmann