Navigation horizontal gleichmäßig verteilen

[Nina]

Hallo liebe Community,

ich habe zweierlei Probleme mit dem Versuch eine Navigation zu basteln, deren Elemente horizontal gleichmäßig verteilt sind, beginnend linksbündig, endend rechtbündig. Wie man auf dem Bild sieht verteilen sich die Elemente zwar, beginnen aber nicht linksbündig. Der Code dazu sieht so aus:

<div id="wrapper">
 
   <div id="header">
   <div id="navi">
   <ul>
   <li> <a href="#anker_vita"><div class="naviitem"></div></a> </li>
   <li> <a href="#anker_vorträge"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_publikationen"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_forschung"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_lehre"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_kontakt"><div class="naviitem"> </div></a> </li>
   <span></span>
   </ul>
   </div> <!-- end navi -->
  </div> <!-- end header -->
  <div class="clear">
  </div> <!-- clear -->

#header     {position:fixed;
			height: 100px;
			background-image:url(img/background_header.png);
			background-color:#FFF;}
#navi ul	{text-align:justify;
			width:50%;
			margin:auto;
			margin-top:15px;
			background-color:#9F0;}
#navi li	{display:inline-block;}
			
.naviitem	{width:50px;
			height:50px;
			background-image:url(img/vita.png);
			}

Zusatzlich stellt sich der Navi Bereich breiter dar als der Content, obwohl ich beiden width:50% zugeornet habe. Wenn dazu zufällig auch noch jemand eine Lösung wüssste wäre ich unendlich dankbar.

Liebe Grüße Nina

[Matthias Apsel]

Hallo Nina,

Hallo liebe Community,

ich habe zweierlei Probleme mit dem Versuch eine Navigation zu basteln, deren Elemente horizontal gleichmäßig verteilt sind, beginnend linksbündig, endend rechtbündig.

Verwende semantisch passende Elemente header und nav. Lies dazu auch das Blog.

Auch die div-Elemente innerhalb der Links brauchst du nicht, ebenso das clearende Div.

Die Lösung für dein Darstellungsproblem heißt dann Flexbox.

Aber bring erst mal dein HTML in Ordnung.

Bis demnächst
Matthias

[Auge]

Hallo

ich habe zweierlei Probleme mit dem Versuch eine Navigation zu basteln, deren Elemente horizontal gleichmäßig verteilt sind, beginnend linksbündig, endend rechtbündig. Wie man auf dem Bild sieht verteilen sich die Elemente zwar, beginnen aber nicht linksbündig.

   <li> <a href="#anker_vita"><div class="naviitem"></div></a> </li>

Zuallererst fällt mir auf, dass zwischen <li> und <a> und hinter dem schließenden Tag </a> jeweils Leerzeichen sind, welche natürlich auch Platz in der Anzeige in Anspruch nehmen. Weiterhin haben die <div> in allen außer dem ersten Menüpunkt ebenfalls jeweils ein Leerzeichen. Die solltest du testweise mal sämtlichst entfernen.

Weiterhin stellt sich mir die Frage nach dem Zweck der <div> der Klasse naviitem. Einerseits ist die Schachtelung von <div> in <a> zwar mit HTML5 erlaubt, aber meiner Meinung nach sowohl fragwürdig als hier vermutlich auch unnötig. Falls sie nämlich auschließlich dem Zweck dienen, das Hintergrundbild aufzunehmen, können das die <a> selbst genauso gut.

Schlussendlich ist da noch das <span>-Element am Ende der Liste. Das hat dort nichts zu suchen.

Nimm also erst einmal die Leerzeichen aus den Links, entferne das <span> und teste die Ausgabe. Danach können wir uns der weiteren Optimierung zuwenden. Aus dem Aufbau ist noch einiges herauszuholen (Verwendung von HTML5-Elementen und Weglassung überflüssiger Elemente).

<div id="wrapper">
 
   <div id="header">
   <div id="navi">
   <ul>
   <li> <a href="#anker_vita"><div class="naviitem"></div></a> </li>
   <li> <a href="#anker_vorträge"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_publikationen"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_forschung"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_lehre"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_kontakt"><div class="naviitem"> </div></a> </li>
   <span></span>
   </ul>
   </div> <!-- end navi -->
  </div> <!-- end header -->
  <div class="clear">
  </div> <!-- clear -->

Zusatzlich stellt sich der Navi Bereich breiter dar als der Content, obwohl ich beiden width:50% zugeornet habe. Wenn dazu zufällig auch noch jemand eine Lösung wüssste wäre ich unendlich dankbar.

Dazu können wir ohne Angaben zu den Elementwen mit dem Content nichts sagen.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Weiterhin stellt sich mir die Frage nach dem Zweck der <div> der Klasse naviitem. Einerseits ist die Schachtelung von <div> in <a> zwar mit HTML5 erlaubt, aber meiner Meinung nach sowohl fragwürdig als hier vermutlich auch unnötig. Falls sie nämlich auschließlich dem Zweck dienen, das Hintergrundbild aufzunehmen, können das die <a> selbst genauso gut.

Und – wie ich eben schon sagte – braucht jedes a-Element einen lesbaren (bzw. hörbaren) Linktitel als Inhalt. Und wenn zusätzlich(!!) Icons dazukommen, gehören die auch ins Markup – als img bzw. svg.

Ergänzung: Die Linktitel können ja bei Anzeige der Icons ggfs. visuell versteckt werden.

LLAP 🖖

[Nina]

Erstmal: Danke für die schnellen Antworten. OK, habe versucht ein bisschen aufzuräumen

<div id="wrapper">
 
   <div id="header">
   <div id="navi">
   <ul>
   <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>
   <li><a href="#anker_vorträge"><img src="img/vortraege.png"/></a></li>
   <li><a href="#anker_publikationen"><img src="img/publikationen.png"/></a></li>
   <li><a href="#anker_forschung"><img src="img/forschung.png"/></a></li>
   <li><a href="#anker_lehre"><img src="img/lehre.png"/></a></li>
   <li><a href="#anker_kontakt"><img src="img/kontakt.png"/></a></li>
   <span></span>

   </ul>
   </div> <!-- end navi -->
  </div> <!-- end header -->

#wrapper    	{background: #FFF;}
#header 	{position:fixed;
	   	height: 100px;
		background-image:url(img/background_header.png);
		background-color:#FFF;}
#navi ul	{text-align:justify;
		width:50%;
		margin:auto;
		margin-top:15px;
		background-color:#9F0;}
#navi li	{display:inline-block;}

#navi li img 	{width:50px;
		height:50px;}

Nun werden die Bilder allerdings garnicht angezeigt, das war auch der Grund aus dem ich die umständliche Variante mit den extra divs gewählt hatte.

Das span-element in der Liste brauche ich um für den Blocksatz (der ja trotzdem nicht funktioniert) wenn ich das rausnehme sieht es so aus:

[Auge]

Hallo

<div id="wrapper">
   <div id="header">
   <div id="navi">
   <ul>
   <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>
   <li><a href="#anker_vorträge"><img src="img/vortraege.png"/></a></li>
   <li><a href="#anker_publikationen"><img src="img/publikationen.png"/></a></li>
   <li><a href="#anker_forschung"><img src="img/forschung.png"/></a></li>
   <li><a href="#anker_lehre"><img src="img/lehre.png"/></a></li>
   <li><a href="#anker_kontakt"><img src="img/kontakt.png"/></a></li>
   <span></span>

   </ul>
   </div> <!-- end navi -->
  </div> <!-- end header -->

Nun werden die Bilder allerdings garnicht angezeigt, das war auch der Grund aus dem ich die umständliche Variante mit den extra divs gewählt hatte.

Liegen denn die einzubindenden Bilder vom HTML-Dokument aus gesehen im Unterverzeichnis „img“?

Das span-element in der Liste brauche ich um für den Blocksatz (der ja trotzdem nicht funktioniert) wenn ich das rausnehme sieht es so aus:

Erstens hat das dort immer noch nichts zu suchen, zweitens ist die Breite auf anderem Wege festzulegen und drittens kommt die mittels der <span> erzwungene Breite als Ursache für den Unterschied in den Breiten der Navi und des Inhalts in Frage.

Tschö, Auge

[Nina]

Ja, die Bilder liegen da. Wenn ich sie via Stylesheet einbinde klappt das ja auch, nur so nicht.

Das mit dem Breitenunterschied wegen des <span>-Elements ist ein heißer Tipp, ich habs rausgenommen. Aber wie komme ich nun an mein Ziel?

[Gunnar Bittersmann]

@@Nina

Ja, die Bilder liegen da. Wenn ich sie via Stylesheet einbinde klappt das ja auch, nur so nicht.

Wenn du relative Pfade verwendest, beziehen sich die Pfade von im Stylesheet angegebenen Grafiken auf das Stylesheet; die Pfade von im HTML angegebenen Grafiken auf das HTML-Dokument.

LLAP 🖖

[Auge]

Hallo

Ja, die Bilder liegen da. Wenn ich sie via Stylesheet einbinde klappt das ja auch, nur so nicht.

Liegt das Stylesheet in einer eigenen Datei und befindet sich diese CSS-Datei im selben Verzeichnis wie das HTML-Dokument?

Das mit dem Breitenunterschied wegen des <span>-Elements ist ein heißer Tipp, ich habs rausgenommen. Aber wie komme ich nun an mein Ziel?

Gucken wir mal. Das ist der HTML-Quelltext aus deinem letzten Posting ohne das <span> und mit neuer Einrückung.

<div id="wrapper">
 <div id="header">
  <div id="navi">
   <ul>
    <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>
    <li><a href="#anker_vorträge"><img src="img/vortraege.png"/></a></li>
    <li><a href="#anker_publikationen"><img src="img/publikationen.png"/></a></li>
    <li><a href="#anker_forschung"><img src="img/forschung.png"/></a></li>
    <li><a href="#anker_lehre"><img src="img/lehre.png"/></a></li>
    <li><a href="#anker_kontakt"><img src="img/kontakt.png"/></a></li>
   </ul>
  </div> <!-- end navi -->
 </div> <!-- end header -->

Ich ersetze erst einmal nur die Elemente mit HTML5-Elementen, bei denen diese Möglichkeit offensichtlich ist. Frage dazu: <div id="wrapper">, welches ich folgend weglasse, umschließt den gesamten Inhalt der Seite?

 <header>
  <nav>
   <ul>
    <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>
    <li><a href="#anker_vorträge"><img src="img/vortraege.png"/></a></li>
    <li><a href="#anker_publikationen"><img src="img/publikationen.png"/></a></li>
    <li><a href="#anker_forschung"><img src="img/forschung.png"/></a></li>
    <li><a href="#anker_lehre"><img src="img/lehre.png"/></a></li>
    <li><a href="#anker_kontakt"><img src="img/kontakt.png"/></a></li>
   </ul>
  </nav>
 </header>

du hattest zuletzt für die Liste, die die Navigation bildet, folgendes, von mir an die neue Struktur (Verwendung von <nav> angepasste CSS gezeigt. Lasse dich bitte nicht von meinen Umformatierungen stören.

nav ul {
  text-align:justify;
  width:50%;
  margin:auto;
  margin-top:15px;
  background-color:#9F0;
}

Der Liste selbst weist du eine Breite von „50% “zu. Von welchem Wert aus werden diese 50% berechnet? Gibt es ein Elternelement dieser Liste mit explizit gesetzter Breite oder bezieht sich diese Breitenangabe auf die Breite des Browserfensters?

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

 <header>
  <nav>
   <ul>
    <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>

Na, haben wir da nicht was vergessen?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

 <header>
  <nav>
   <ul>
    <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>

Würde eigentlich ein alt vorgelesen werden?

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>?

Wobei ich immer noch für Hintergrundgrafiken bin.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Würde eigentlich ein alt vorgelesen werden?

Ja.

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.

Wobei ich immer noch für Hintergrundgrafiken bin.

Warum? Icons sind doch Inhalt, nicht Verzierung.

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

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wobei ich immer noch für Hintergrundgrafiken bin.

Warum? Icons sind doch Inhalt, nicht Verzierung.

Der Inhalt ist der Linktext.

Bis demnächst
Matthias

[Auge]

Hallo

Wobei ich immer noch für Hintergrundgrafiken bin.

Warum? Icons sind doch Inhalt, nicht Verzierung.

Der Inhalt ist der Linktext.

Die Bilder, die, passend zu den einzelnen Links, als voneinander unterscheidbare Icons dienen, gehören genau genommen auch zum Inhalt. Bei einem bei jedem Link gleichbleibenden Zierkringel gäbe ich dir recht. In diesem Fall wird zudem mit der Einbindung per <img> der Batzen CSS-Regeln zum verstecken des Textes vermieden.

Tschö, Auge

[Gunnar Bittersmann]

@@Matthias Apsel

Icons sind doch Inhalt, nicht Verzierung.

Der Inhalt ist der Linktext.

Icons, die ohne Text auch eine Bedeutung vermitteln, sind auch Inhalt. (Ob die Bedeutung ohne Text auch von allen verstanden wird, steht auf einem anderen Blatt.)

LLAP 🖖

[marctrix]

Hallo zusammen,

Wobei ich immer noch für Hintergrundgrafiken bin.

Warum? Icons sind doch Inhalt, nicht Verzierung.

Der Inhalt ist der Linktext.

Um jetzt mal nur auf den Aspekt der Barrierefeiehit einzugehen.

Bilder müssen mit einem Alternativ-Text versehen werden, logo. Der sollte beschreiben, was auf dem Bild zu sehen ist. Bei Bilder, die mit einer Funktion hinterlegt sind (verlinkte, Bilder, Bilder für button usw) muss außerdem beschrieben werden, welche Aktion ein Klick hier auslöst (z. B. zum Impressum, Berechnung durchführen, jetzt kostenpflichtig Bestellen o. ä.)

Manchmal kann man sich dann die Beschreibung des eigentlichen Bildes auch sparen (niemand hat etwas davon zu wissen, dass der Button "kostenpflichtig bestellen mit einem grünen Pfeil versehen ist).

wenn der alt-Text sinnvoll ist, kann man sich dann auch den Link-Text sparen. Eigentlich. Zumindest für Blinde. Weil:

Das hilft nur Menschen, die die Bilder nicht sehen können, und denen daher die Alternative zum Bild bereit gestellt wird (entweder als sichtbarer Text, weil z. B. der Pfad zum Bild defekt ist oder jemand die Bilder ausgeschaltet hat, um z. B. roaming-Gebühren zu sparen - oder von Screenreadern vorgelesen, weil man nicht sehen kann oder will (z. B. beim Autofahren))

Die viel größere Gruppe der Sehenden muss aber auch unterstützt werden. Darum müssen alle Symbole (wenn man Barrieren vermeiden will) sichtbar beschriftet sein. Denn dass die Besucher einer Website die Bedeutung der Links erkennen, ist doch mehr Wunschdenken, als Realität. Die Beschriftung sollte möglichst sichtbar sein, ohne dass dafür Mouseover nötig ist, (sonst hat die Mehrzahl der Leute, die inzwischen mit Touchscreens unterwegs sind, nämlich gar nichts davon). Wenn es nur darum geht, Punkte beim BITV-Test abzugreifen, reicht IMHO derzeit noch die Verwendung des title-Textes, würde ich aber so nciht tun.

Meine Empfehlung: Bild und Text daneben oder da drunter, so wie zum Beispiel der Nach-oben- und der Drucken-Link hier (über dem Fußbereich):

https://www.oiv2015.de/fotos/

Bei einer Navigation ist das besonders wichtig. Niemand will raten, was passiert, wenn man auf einen Link klickt Virus-download starten? ;-)

Wenn man einen Link klickt, der mit Vita beschriftet ist, erwartet man dann auf einer Seite mit der Überschrift "Vita" zu landen.

Gefordert wird für gut bedienbare Webseiten Vorhersagbarkeit: was passiert, wenn ich irgendwo hin klicke?

Der Usability-Grundsatz der all dem zugrunde liegt, ist "Don't make me think!"

Wie man an dem kleinen Beispiel sehen kann, muss man als Entwickler/Designer einer Webseite sehr viel nachdenken, um es einem Bescher einfach zu machen.

Ein schönes Beispiel dafür, wie Barrierefreiheit Webseiten für alle Menschen besser nutzbar und verständlicher macht!

sorry für den etwas länglichen Ausflug... ;-)

Marc

[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

[marctrix]

Hej marctrix,

Hallo Marc,

bin die Tage etwas durcheinander, rede mit mir selber und poste doppelt...

meine verschiedenen Ichs agieren unabhängig voneinander. Wir (die meisten von uns) bitten diesen Zustand zu ignorieren und entschuldigen uns für eventuelle Unannehmlichkeiten...

Marc und Marctrix und Co

[Matthias Apsel]

Hallo marctrix,

Hej marctrix,

Hallo Marc,

bin die Tage etwas durcheinander, rede mit mir selber und poste doppelt...

meine verschiedenen Ichs agieren unabhängig voneinander. Wir (die meisten von uns) bitten diesen Zustand zu ignorieren und entschuldigen uns für eventuelle Unannehmlichkeiten...

Marc und Marctrix und Co

Dazu passend habe ich gesehen: „Manchmal ertappe ich mich dabei, wie ich mit mir selbst rede. Und dann lachen wir beide.“

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

„Manchmal ertappe ich mich dabei, wie ich mit mir selbst rede. Und dann lachen wir beide.“

Sehr schön! Danke dafür!

Wo hast du das gefunden?

Marc

[Matthias Apsel]

Hallo marctrix,

Wo hast du das gefunden?

In einer Gaststätte in Neubrandenburg.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Hallo marctrix,

Wo hast du das gefunden?

In einer Gaststätte in Neubrandenburg.

Da soll ja so mancher vieles doppelt wahrnehmen ;-)

Marc

[Gunnar Bittersmann]

@@marctrix

Alt-Attribute werden leer gelassen, wenn es sich um Schmuckgrafiken handelt

Das ist ein Anwendungsfall von leeren alt-Attributen. Es gibt weitere:

<figure>
  <img src="…" alt=""/>
  <figcaption>Fig. 42: …</figcaption>
</figure>

Das Bild hat eine zugehörige Bildunterschrift. Es wäre sinnlos, dasselbe noch mal ins alt-Attribut zu schreiben und doppelt vorlesen zu lassen.

Sollte es noch einer genaueren Beschreibung des Bildinhalts bedürfen, wäre nicht das alt-Attribut, sondern ein per aria-describedby verknüpfter Bereich (visually hidden) der geeignete Ort dafür.

Ein weiterer Anwendungsfall wird in der Spec genannt:

<img src="self.png" alt="SELFHTML"/><img src="html.png" alt=""/>

„SELFHTML“ sollte nicht in alt="SELF" und alt="HTML" getrennt werden.

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)

Wenn das nicht schon anderweitig (Linktext, Buttontext) angegeben wird.

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>

Doch, genau das.

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!

Eben. Deshalb steht ja „Vita“ neben dem Symbol – für Blinde und Sehende.

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>

Nein. Es besteht kein Grund, dass Screenreader „zum Lebenslauf Vita“ vorlesen. Das alt-Attribut sollte hier leer sein.

LLAP 🖖

[marctrix]

Hej Gunnar,

<figure>
  <img src="…" alt=""/>
  <figcaption>Fig. 42: …</figcaption>
</figure>

Das Bild hat eine zugehörige Bildunterschrift. Es wäre sinnlos, dasselbe noch mal ins alt-Attribut zu schreiben und doppelt vorlesen zu lassen.

Auf keinen Fall dasselbe! Das nervt!

In der Praxis ist es aber oft notwendig, etwas über das Bild zu wissen, um die Bildunterschrift zu verstehen.

Heißt: eine Bildunterschrift kann einen Alternativ-Text überflüssig machen, sicher ist das aber keineswegs...

Sollte es noch einer genaueren Beschreibung des Bildinhalts bedürfen, wäre nicht das alt-Attribut, sondern ein per aria-describedby verknüpfter Bereich (visually hidden) der geeignete Ort dafür.

Welche Screenreader unterstützen das denn bereits? Und wozu so, wenn es ein oder zwei Worte im alt-Text ebenso gut erledigen. Zumal ich (mal wieder) davor warnen möchte, nur für Blinde die Zugänglichkeit zu garantieren. Wenn diese nötigen Informationen auf visually hidden gesetzt werden, fehlen sie Sehenden, die CSS aktiviert haben, Bilder aber nicht...

Ein weiterer Anwendungsfall wird in der Spec genannt:

<img src="self.png" alt="SELFHTML"/><img src="html.png" alt=""/>

„SELFHTML“ sollte nicht in alt="SELF" und alt="HTML" getrennt werden.

Unbedingt! - Logos, die den Seitenbetreiber bzw. die gesamte Internet-Präsenz repräsentieren sind ohnehin ein Sonderfall.

Blinden ist - genau wie Sehenden - sehr wohl klar, dass ein Klick darauf in der Regel zur Startseite führt. Hier muss also die hinterlegte Funktion (Link zur Startseite) nicht unbedingt in den alt-Text.

Führt der Link aber wo anders hin, als man gemeinhin erwartet, muss diese Informationen Blinden und Sehenden zugänglich sein.

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)

Wenn das nicht schon anderweitig (Linktext, Buttontext) angegeben wird.

Wobei value, title oder placeholder nicht ausreichen...

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>

Doch, genau das.

Bisher war ich selber - dummerweise - ausschließlich bei der Unterstützung der Blinden.

Habe dann aus Faulheit (um den Text nicht umzuschreiben), diese Info unten angehängt. Gut aufgepasst! ;-)

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!

Eben. Deshalb steht ja „Vita“ neben dem Symbol – für Blinde und Sehende.

Rrrrichtig ;-)

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>

Nein. Es besteht kein Grund, dass Screenreader „zum Lebenslauf Vita“ vorlesen. Das alt-Attribut sollte hier leer sein.

Ist wahrlich kein geeignetes Beispiel, um zu demonstrieren, dass beides Sinn machen kann.

Als Prediger für Barrierefreiheit plädiere ich natürlich dafür, blinde Menschen nicht mit Keywordstuffing zu nerven.

Andererseits kann ich der Versuchung nicht immer widerstehen, aus SEO-Gründen in den alt-Text etwas zu schreiben, wodurch (auch Blinde) meine supertolle Webseite leichter finden können.

So plump wie in dem Beispiel mit Lebenslauf und Vita mache ich das im echten Leben aber nicht und du hast hier im Forum zu recht darauf hingewisen, dass es ein blödes Beispiel ist. So was sollte niemand nachmachen!

Meine Devise ist: sich in andere hineinversetzen und alles zu unterlassen, was ich selber nicht möchte.

Lebenslauf und Vita hintereinander weg vorlesen zu lassen geht zu weit, führt womöglich zu einer hohen Absprung-Rate und ist damit auch aus SEO-Sicht nicht empfehlenswert!

Marc

[Gunnar Bittersmann]

@@Nina

OK, habe versucht ein bisschen aufzuräumen

Schon besser. Räumen wir noch ein bisschen weiter.

<div id="wrapper">

Es sind bereits zwei Containerelemente da: html und body. Ein drittest brauchst du nicht. Kann weg.

   <div id="header">
   <div id="navi">

Dafür gibt es in HTML spezielle Elemente: header und nav.

   <ul>
   <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>
   <li><a href="#anker_vorträge"><img src="img/vortraege.png"/></a></li>
   <li><a href="#anker_publikationen"><img src="img/publikationen.png"/></a></li>
   <li><a href="#anker_forschung"><img src="img/forschung.png"/></a></li>
   <li><a href="#anker_lehre"><img src="img/lehre.png"/></a></li>
   <li><a href="#anker_kontakt"><img src="img/kontakt.png"/></a></li>
   <span></span>

   </ul>

Die Liste kann, aber muss nicht sein. Was unbedingt sein muss sind die Alternativtexte für die Grafiken.

   </div> <!-- end navi -->
  </div> <!-- end header -->

Die Verwendung sprechender HTML-Elemente statt divs hat zudem den Vorteil, dass man nicht kommentieren muss, welches div nun gerade geschlossen wird.

Das span-element in der Liste brauche ich um für den Blocksatz (der ja trotzdem nicht funktioniert)

Nö. Matthias wies bereits auf Flexbox hin. Sieht dann beispielsweise so aus.

LLAP 🖖

[Nina]

Tausend danke euch bis hierher. Ich versuche das mal umzusetzen und melde mich dann ggfs. mit meinen neu aufgeworfenen Problemen :)