Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 22.09.2005, 23:34
ulle ulle ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard 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>
weiterführender Link (einfach-fuer-alle.de)
__________________
</ulle>
Mit Zitat antworten
Sponsored Links