|
|||
Barrierefrei + Semantisch | WEBkrauts gefordert ;-)
Moin,
Ihr wißt ja wie ich bin, immer ein wenig respektlos und fern der eingetretenen Wege... lange Rede gar kein Sinn. Stellt Euch vor Ihr bewegt Euch in einer WEBsite mit einer 3 Stufigen Navigation. Das macht der Mensch mit dem totalen Augenfehler (Blind) natürlich auch gerne. Nur wie bringen wir diesem Mensch nun am besten die Navigation rüber? Er bekommt sie Vorgelesen - klar. Aber kann er sich alles vorstellen was er hört? Was wenn diese Stufen nicht alle geschachtelt sind, da wird es wohl schwierig. Ich habe einfach eine WEBsite gebaut, diese hat eine visuelle Darstellung , diese ist aber für die Diskussion egal/unwichtig. Wichtig ist das eine Navigationsstufe alleine steht, die 2. und 3, ist geschachtelt. So wie wir es wohl in vielen WEBsites finden. CODE am besten kopieren und im Browser anschauen. Die WEBsite die nun dargestellt wird befindet sich in der 3.Ebene URLAUB / SCHWEIZ / GESCHICHTEN. Wenn Ihr es seht ist es Euch klar. Aber was müßtet Ihr hören damit es genauso klar ist ?? Nun einfach mal die Druckansicht aufrufen, nun seht Ihr das was ein Screenreader wohl vorlesen wird. Und das möchte ich zur Diskussion stellen Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; border-collapse:collapse; border-spacing: 0; } html[xmlns] { height : 100%; padding-bottom : .005em; } html, body { color: #000000; background: #FFFFFF; line-height: 1.45; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 0 0 0 1em; } .containing-float:after { content: "."; visibility: hidden; height: 0; display: block; clear: both; } .containing-float { display: inline-table; /* fuer alle Browser; * verbergen IE-Mac \*/ display: block; /* ende verbergen IE-Mac */ height: auto ! important; /* verbergen IE-Mac \*/ height: 1%; /* ende verbergen IE-Mac */ } #menu { width: 50em; margin: 1em 1em 1em 0; padding: 0 0 2em 0; background-color: #FFFFFF; } #menu ul { list-style-type: none; margin: 0; border-bottom: 2px solid #666666; padding: 1em 0 0px 2em; font-size: .8em; line-height: 1.3; background-color: #EEEEEE; } #menu li { float: left; margin: 0 .7em 0 0; } #menu li strong, #menu li.on a, #menu li a { display: block; width: auto ! important; width: 1px; margin: 0; border: 1px solid #555555; border-bottom: 0 none; padding: 0 .5em; color: #666666; background-color: #FFFEEE; text-decoration: none; font-weight: bold; white-space: nowrap; } #menu li a:hover, #menu li a:focus, #menu li a:active, #menu li.on a:hover, #menu li.on a:focus, #menu li.on a:active { color: #000000; background-color: #FFFF00; } #menu li.on a, #menu li strong { position: relative; top: 2px; margin: 0 .5em; border: 2px solid #000000; border-bottom: 0 none; color: #000000; background-color: #FFFFFF; cursor: default; } #sub-menu { float: left; width: 9em; margin: 0 6em 0 0; border-left: 2px solid #555555; padding: 1em 0 2em 0; background-color: #FFFFFF; } #sub-menu ul { list-style-type: none; margin: 0; padding: 0; font-size: .8em; line-height: 1.3; background-color: #EEEEEE; } #sub-menu ul ul { position: relative; left: 3em; font-size: 1em; } #sub-menu li strong, #sub-menu li.on a, #sub-menu li a { display: block; height: auto ! important; height: 1px; margin: 0; border: 1px solid #555555; padding: 0 .5em; color: #666666; background-color: #FFFEEE; text-decoration: none; font-weight: bold; } #sub-menu li.on a { background-color: #FFFBBB; } #sub-menu li a:hover, #sub-menu li a:focus, #sub-menu li a:active, #sub-menu li.on a:hover, #sub-menu li.on a:focus, #sub-menu li.on a:active { color: #000000; background-color: #FFFF00; } #sub-menu li strong { color: #000000; background-color: #FFFFFF; border: 1px solid #000000; border-right: 0 none; padding: .2em 0 .2em 1.5em; cursor: default; } /* Barrierefrei-Screenreader-CODE */ #menu em, #menu dfn, #menu h4, #sub-menu em, #sub-menu dfn, #sub-menu h4 { /* * display: none; * visibility: hidden; * * koennen nicht benutzt werden da Screenreader * es nicht vorlesen würden !! * (also ab ins Nirvana) */ position: absolute; top: -1000px; left: -1000px; width: 0; height: 0; overflow: hidden; display: inline; line-height: 0; } /*]]>*/ </style> </head> <body> <div id="menu" title="Hauptmenu"><h4>Navigation (1.Ebene)</h4> <ul class="containing-float"> [*]<dfn>1 </dfn><span lang="en">Home</span>. [*]<dfn>2 </dfn>Rezepte. <li class="on"><dfn>3 </dfn>Rubrik geöffnet:Urlaub. [*]<dfn>4 </dfn>Familie. [/list]</div> <div id="sub-menu" title="Untermenu"><h4><span lang="en">Sub</span>-Navigation (2.Ebene und eingebetete 3.Ebene)</h4> <ul> [*]<dfn>3.1 </dfn>Spanien. [*]<dfn>3.2 </dfn>Italien. <li class="on"><dfn>3.3 </dfn>Rubrik geöffnet:Schweiz. <ul> [*]<dfn>3.3.1 </dfn>Bilder. [*]<strong title="Standort"><dfn>3.3.2 </dfn>Standort:Geschichten.[/b] [*]<dfn>3.3.3 </dfn>Orte. [*]<dfn>3.3.4 </dfn>Berge. [/list] [*]<dfn>3.4 </dfn>Daheim. [*]<dfn>3.5 </dfn>Sonstwo. [/list]</div> <h1>Geschichten der Schweiz</h1> Die helvetischen Stämme der Tiguriner und der Toygener traten mit dem Zug der Kimbern und Teutonen 107 v. Chr. in die Geschichte ein. Nach einer siegreichen Schlacht unter ihrem König Divico gegen die Römer unter Lucius Cassius Longinus wurden die Toygener 102 v. Chr. mit den Teutonen bei Arausio vernichtet, die mit den Kimbern und Ambronen nach Italien gewanderten Tiguriner........ </p> </body></html>
__________________
</ulle> |
Sponsored Links |
|
|||
Ich möchte Diskutieren über:
1. Zitat:
Ich bin der Meinung das der Hinweis (Rubrik geöffnet) nicht fehlen sollte, aber bisher noch nirgends empfohlen wurde. Es könnte ja auch eine Text/Inhalt zwischen dem Haupt-Menü und dem Sub-Menü sein. Der Punkt ist das geforderte Trennzeichen zwischen den LINKs. Der gewählte TAG soll eine andere Betonung erzwingen. Gleichzeitig wird das Markup durch den [i] minimiert, gegenüber einer <span class="hidden">. 2. Zitat:
Ich verspreche mir dadurch 2 verschiedene Betonungen. Ist der Titel im [b] sinnvoll ? Oder wäre hier nicht [aktuell angezeigt WEBsite] sinnvoller? Geschütztes Leerzeichen - oder besser nicht so wie im dfn-Element? Das h4-Element, könnte auch nur ein em-Element sein? Übrigens - wer die WEBkrauts noch nicht kennt !! (Google)
__________________
</ulle> |
|
|||
Zitat:
Zitat:
Zumal die Überschriften Hirachie des Dokuments durch h4 gestört wird, da meist die h1/h2/h3 im Elementen-Fluss nach der Navigation folgen. Weiterer Vorteil wäre eine gleichmäßige Betonung für alle Menü/Navigations Oriendierungshilfen, da ja nur auf em und dfn reduziert
__________________
</ulle> |
|
||||
Hi, Ulle,
hier kommt es zu folgendem Problem: sobald ich (oder ein Anderer) Deinen Code kopiere und daraus eine Seite erstelle, die ich mir zur besseren Veranschaulichung Deiner Lösung dann auch wirklich anschaue, bin ich danach nicht mehr in der Lage, den die Seite nicht sehen könnenden blinden User zu simulieren! Du musst diesen Test mit einer Person, die diese Seite NICHT kennt machen! Ansonsten finde ich Deinen Denkansatz sehr interessant; aber wie gesagt, auf Praxistauglichkeit kannst Du so etwas NICHT allein theoretisch testen (lassen)!
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
|||
Hmmm... Du meinst da Du die visuelle Ansicht gesehen hast bist Du vorbelastet?
Abgesehen davon sind ja die Verfahren schon getestet und empfohlen, mir geht es ja um "meine" weiteren Ansätze. Wir wissen das em,dfn und strong beim vorlesen anders betont werden. Ich denke mal es wird vorgelesen wie es in der Druchvorschau zu sehen ist. @Dieter - Du hast Dir die Site auch in der Druckansicht angeschaut?
__________________
</ulle> |
|
||||
Hallo, Ulle!
Ich habe irgendwann feststellen müssen, dass der schlechteste Tester derjenige ist, der eine Seite kennt. Er ist umso schlechter bzw. ungeeigneter, je besser er die Seite kennt. Das heisst, der Macher einer Seite scheidet in aller Regel als Tester per se aus. Ebenso ausscheiden muss jeder, der sich eine Seite testweise intensiv angesehen hat! Und ich habe intensiv hingeschaut! Zitat:
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
|||
Lieber Dieter,
Du selbst benutzt folgendes Markup: Code:
<h1>Navigation</h1> <h2>Allgemeines</h2> <ul>[*]<a href=......... ##########oder <span class="unsichtbar">.</span> ##########oder [*]<span class="current" title="Sie befinden sich hier:">> Hinweise </span> Was/Wo ist da die Sematik? Als WEBkraut kommst Du mir nicht so leicht davon.
__________________
</ulle> |
|
||||
Ulle,
mir ging es beim Testen nicht so sehr um [i], [b] oder <span> - das sind ja lediglich mehr oder weniger taugliche Mittel zum Zweck. Was mir viel wichtiger erscheint, ist die Frage, ob sich einem blinden User die Aufteilung der Navigation erschliesst und ob er seinen "Standort" absolut und innerhalb der Hierarchie erkennen kann. Und dies unvoreingenommen zu beurteilen ist dann nicht mehr möglich, wenn man die Seite optisch bereits erfasst hast!
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
Sponsored Links |
|
||||
Im übrigen ist das hier
Zitat:
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CMS: welches ist am barrierefrei freundlichsten ?? | bastien | Barrierefreiheit | 42 | 24.12.2007 21:40 |
Ist eine Tabelle barrierefrei? | maggie | Barrierefreiheit | 21 | 10.02.2007 16:43 |
Pflichtfelder barrierefrei markieren | Xavier | Barrierefreiheit | 15 | 24.06.2006 01:19 |
Alle Browser, semantisch und barrierefrei? | magick | Site- und Layoutcheck | 20 | 22.01.2005 23:45 |
Sind Selectboxen barrierefrei? | ani | Barrierefreiheit | 4 | 13.10.2004 16:27 |