Navigation horizontal gleichmäßig verteilen

[marctrix]

Hej zusammen,

@@Matthias Apsel

Wäre
<a href="…"><img src="img/vita.png" alt="Vita"></a> ebenso zugänglich wie
<a href="…"><img src="img/vita.png" alt="">Vita</a>?

Ja.

Und in der zweiten Variante ist alt="" völlig korrekt. Es würde keinen Sinn machen, denselben Text zweimal anzeigen/vorlesen zu lassen. Vorhandensein muss das alt-Attribut aber, sonst würden (manche?) Browser-Screenreader-Kombinationen den Dateinamen vorlesen.

Alt-Attribute werden leer gelassen, wenn es sich um Schmuckgrafiken handelt, die ins HTML eingebettet werden (obwohl sie da eigentlich nichts zu suchen haben), weil nur dann Screenreader gar nichts ausgeben.

Grundsätzlich sollen alt-Texte eine Alternative zur visuellen Darstellung sein, also den Inhalt des Bildes wiedergeben.

Werden Bilder mit einer Funktion versehen (Button, Anker) muss im alt-Text angegeben werden, was bei einem Klick passiert (zum Impressum, Berechnung, durchführen, Kostenpflichtig bestellen usw)

Ist der alt-Text entsprechend sinnvoll vergeben, würde ich auf weiteren zusätzlichen Text verzichten. Also nichts wie so was:

<a href="…"><img src="img/vita.png" alt="">Vita</a>

Damit ist der Link übrigens NUR für Blinde zugänglich und für Menschen, die Bilder abgeschaltet haben. Bei Sehenden Menschen kann man NICHT voraussetzen, dass sie verstehen, was mit den Symbolen gemeint ist!

Immer wenn man Symbole verwendet, muss deren Bedeutung auch erläutert werden, mindestens mittels Popup (title-Attribut) - besser man schreibt es doch aus und versteckt es vor sehenden eben nicht.

Das bedeutet dann, dass die beste, für alle zugängliche Lösung dann so aussieht:

<a href=#"><img src="img/vita.png" alt="zum Lebenslauf">Vita</a>

Das lässt sich dann ja noch nett gestalten (z. B. den Text unter das Icon, oder daneben).

Wenn es ganz gut machen will, sieht man dabei von aufwändigen Animationen bei mouseover ab, weil Menschen mit Lese-Rechtschreibschwäche oder konzentrationsschwierigkeiten davon über Gebühr abgelenkt werden können.

Trotzdem möchte man natürlich eine optische Rückmeldung, dass man an dieser Stelle klicken darf. Also gar nicht so einfach, den goldenen Mittelweg zu finden ;-)

Übrigens kann man hier schön sehen, wie Zugänglichkeit für wenige eine Verbesserung der Benutzerfreundlichkeit für alle unterstützt. Die Icons ZUSÄTZLICH zum Text einzusetzen, vermeidet es, dass sich Besucher Gedanken machen müssen beim Erraten der Symbole.

Don't make me think ist ein wichtiger Leitsatz bei der Gestaltung nutzerfreundlicher Webseiten - gerade bei Navigationselementen möchte man auch eine Vorhersagbarkeit der Aktion VOR deren Auslösung. Das heißt man möchte sich darauf verlassen können, nach einem Klick auf einen mit "Vita" beschrifteten Link auch auf einer Seite zu landen, die mit der Überschrift Vita gleich signalisiert, dass man dort gelandet ist, wo man hin wollte.

Wobei ich immer noch für Hintergrundgrafiken bin.

Warum? Icons sind doch Inhalt, nicht Verzierung.

Die einen sagen so, die anderen so...

Ich persönlich sage mal so, mal so... ;-)

Ich bin übrigens für <svg><use xlink:href="…"/></svg>.

Wenn man weiß, was mit SVG in Bezug auf Barrierefreiheit geht - und wo die Grenzen sind, ist SVG eine tolle Sache. Steht als nächstes auf meiner "was ich schon lange mal lernen wollte"-Liste...

Zum Glück gibt es darüber für alle Interessierten genug kostenlosen online-Lesestoff!

Marc