Hauptmenü / Listen

[Martin Hein]

Hallo Forum,

ich beschäftige mich seit ein paar Tagen mit dem Thema
barrierefreiheit, insbesondere Kompatiblitat für Screenreader.

Das grundsätzliche habe ich nun soweit verstanden:

• keine Tabellenstruktur / Frames sowieso nicht.
• möglichst saubere Trennung von Inhalten und layout -> css.
• inhalt logische linaere Strukturierung.
• Standard-Tags wie Listen verwenden.
• nicht dargestellte Tags zur logischen Strukturierung verwenden
• Inhaltlich aussagekräftige alt-Attribute verwenden.

Die herangehensweise scheint mir auch klar zu sein:

1. Inhaltliche linearer Strukturierung schaffen
2. dann diese per css gestalten.

Ich suche immernoch nach guten Tools, die bei der Entwicklung helfen
und nach Workarrounds, wie vom 1. bis zum letzten Schritt die
barrierefrei Website entwickelt wird.

... und habe sogar eine konkrete Anfrage nach Lösungen:

Stellen wir uns ein typisches 'Hauptmenu' vor (das kriegt für meinen
Screenreader ne <h1>Hauptmenü</h1>, die per css auf display:none bei
der Anzeige verbrogen wird und ist eine <ul>, deren bulletpoints per css verborgen werden) Wie gehen wir mit eine Untermenu vor ? Daregstellt wird es eingerückt innerhalb des 'aufgeklappten' Hauptmenus. Gibt es da eine vorbildliche Lösung ?

besten Dank und

viele GRuesse,
martin

[wahsaga]

hi,

Stellen wir uns ein typisches 'Hauptmenu' vor (das kriegt für meinen
Screenreader ne <h1>Hauptmenü</h1>, die per css auf display:none bei
der Anzeige verbrogen wird und ist eine <ul>, deren bulletpoints per css verborgen werden) Wie gehen wir mit eine Untermenu vor ?

Wir verschachteln Listen?

gruß,
wahsaga

[Martin Hein]

keene ahnung,

hab ich auch noch nie gemacht, weil ich listen bisher so selten
benutzt habe. aber die lösung scheint mir klar zu sein, zwei
voneinander unabhängige listen zu machen:

<h1>Hauptmenü</h1>
<ul>
 <li><a href="">Bereich 1<a></li>
 <li>Bereich 2</li>
 <li><a href="">Bereich 3<a></li>
</ul>

<h1>Untermenü Bereich 2</h1>
<ul>
 <li>Seite 11</li>
 <li>Seite 12</li>
 <li>Seite 13</li>
</ul>

... und das dann per css dahinzubewegen, wo es hin soll ;)

beste gruesse,
martin

[afra]

Hallo!

<h1>Hauptmenü</h1>
<ul>
<li><a href="">Bereich 1<a></li>
<li>Bereich 2</li>
<li><a href="">Bereich 3<a></li>
</ul>

<h1>Untermenü Bereich 2</h1>
<ul>
<li>Seite 11</li>
<li>Seite 12</li>
<li>Seite 13</li>
</ul>

... und das dann per css dahinzubewegen, wo es hin soll ;)

Du bewegst am besten nichts. Sondern machst es wie von Wahsaga vorgeschlagen. Du _verschachtelst_ die Listen. Dann sind diese auch gleich am richtigen Platz.

<ul>
<li><a href="">Bereich 1<a></li>
<li>Bereich 2
<ul>
<li>Seite 11</li>
<li>Seite 12</li>
<li>Seite 13</li>
</ul>
</li>
<li><a href="">Bereich 3<a></li>
</ul>

[Martin Hein]

das war dann wohl ein missverständis:

mein erster gedanke war, listen zu verschachteln, weil ein menu mit untermenu in html-logik so dargestellt werden müsste. als wahsaga
dann mit:

wir verschachteln listen ?

... antwortete, hielt ich das für ironie (wegen des fragezeichens):
liten kann man nicht schachteln. ok, akeptiert und bemerkt, dass
ich zu wenig mit listen gearbeitet hab. abgesehen davon hab ich
natürlich ausprobiert, wie eine geschachtelte liste aussieht und
mir angesehen, wie das auf barmer.de gelöst worden ist. die lösung
mit 2 listen liste hauptmenü und liste bereichsmenü scheint mir
vorgelesen 'übersichtlicher', als eine geschachtelte liste.

gruss,
martin

[Detlef G.]

Hallo Martin

Stellen wir uns ein typisches 'Hauptmenu' vor (das kriegt für meinen
Screenreader ne <h1>Hauptmenü</h1>,

"Hauptmenü" ist bei dir die wichtigste, die Hauptüberschrift der ganzen Seite?
Ich denke nicht, dass deine ganze Seite nur aus "Hauptmenü" besteht.

die per css auf display:none bei der Anzeige verbrogen wird

Es soll Screenreader geben, die mit display:none versteckte Elemente auch nicht vorlesen.
Ich würde die Überschrift, wenn sie unsichtbar sein soll, von Screenreadern aber vorgelesen werden soll entweder ganz klein machen und auf Hintergrundfarbe setzen, oder sie mittels position:absolute  und einer negativen Angabe für left und/oder top aus dem Browswerfenster schieben.

Auch ein Link zum überspringen der Navigation (der dann versteckt wird) könnte sinnvoll sein. Es nervt bestimmt gewaltig, sich bei jeder einzelnen Seite wieder die komplette Navigation vorlesen zu lassen, bevor man an den Inhalt kommt.

Auf Wiederlesen
Detlef

[Auge]

Hallo

die per css auf display:none bei der Anzeige verbrogen wird

Es soll Screenreader geben, die mit display:none versteckte Elemente auch nicht vorlesen.

Wozu gibt es die Angabe von "media" für das Link-Element? Wird die etwa von Screenreadern ignoriert?

Tschö, Auge

[Detlef G.]

Hallo Auge

Wozu gibt es die Angabe von "media" für das Link-Element? Wird die etwa von Screenreadern ignoriert?

Und auf welche media-Angabe reagieren denn _alle_ Screenreader und wie?
Text unterdrücken für Vorlesesoftware
Text für braille und aural ausgeben
ScreenreaderVisibility

Auf Wiederlesen
Detlef

[Auge]

Hallo

Wozu gibt es die Angabe von "media" für das Link-Element? Wird die etwa von Screenreadern ignoriert?

Und auf welche media-Angabe reagieren denn _alle_ Screenreader und wie?
Text unterdrücken für Vorlesesoftware
Text für braille und aural ausgeben
ScreenreaderVisibility

Gut, ... obwohl eigentlich _nicht_ gut. Die meisten Screenreader kennen media:aural also nicht. Bleibt die Frage, wie gehen sie mit media:screen etc. um? In keiner der verlinkten Äußerungen wird explizit darauf eingegangen (falls ich nichts überlesen habe).

Tschö, Auge

[Detlef G.]

Hallo Auge

... Bleibt die Frage, wie gehen sie mit media:screen etc. um? In keiner der verlinkten Äußerungen wird explizit darauf eingegangen (falls ich nichts überlesen habe).

Das sagt doch schon der Name _screen_reader. ;-)

Text für braille und aural ausgeben
"... display:none für screen heißt dann eben, dass das Element auch bei der Sprachausgabe/Brailleausgabe nicht existiert."

Du kannst auch gern selbst im Archiv suchen, oder Tests mit den Demoversionen diverser Screenreader machen.

Auf Wiederlesen
Detlef

[Auge]

Hallo

... wie gehen sie mit media:screen etc. um?

Das sagt doch schon der Name _screen_reader. ;-)

Klingt logisch. :-)

Du kannst auch gern selbst im Archiv suchen, oder Tests mit den Demoversionen diverser Screenreader machen.

Das (bzw. die Downloads) klemme ich mir mal (33.6-er Analogmodem vs. fast 90 Mb (Jaws)). ;-)

Tschö, Auge

[martin hein]

hallo detlef,

ok, danke für die inputs. ich resumiere:

• h1 für hauptmenu ist inhaltlich zu gross -> klar, auf jeder seite wiederkehrenden standardelemente wie z.b. hauptmenü ist im vergleich
  zu dem speziellen inhalt der seite zweitrangig.

• display:none ist zu unsicher -> eher:
  position:absolute; left: -300px;

• sprungmarken zu den bereichen am anfang der seite machen sinn

ich sehe ausserdem noch davor einen krümelpfad vor:

'sie befinden sich hier': 'das unternehmen / news / pressemeldungen'

beste gruesse,
martin