Fehlerhafte Darstellungen im Edge
bearbeitet von beatovichhallo
> <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.
--
<https://beat-stoecklin.ch/pub/index.html>