zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Barrierefrei + Semantisch | WEBkrauts gefordert ;-)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.09.2005, 22:34
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
  #2 (permalink)  
Alt 23.09.2005, 01:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.06.2004
Beiträge: 172
beeviz befindet sich auf einem aufstrebenden Ast
Standard

Was möchtest Du denn da genau diskutieren? ich finds sehr gut gelöst. Hut ab!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.09.2005, 08:28
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Ich möchte Diskutieren über:

1.
Den gewählten TAG/Inhalt [i] :
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:
[*]<strong title="Standort"><dfn>3.3.2 </dfn>Standort:Geschichten.[/b]
Den gewählten TAG [i] innerhalb des [b]:
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>
Mit Zitat antworten
  #4 (permalink)  
Alt 23.09.2005, 10:59
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle
Das h4-Element, könnte auch nur ein em-Element sein?
Zitat:
Zitat von w3c
EM:
Kennzeichnet Betonungen.

STRONG:
Kennzeichnet stärkere Betonungen.

DFN:
Kennzeichnet die definierende Instanz des eingeschlossenen Terms.


"EM und STRONG werden benutzt, um Betonungen zu kennzeichnen"

Quelle: HTML 4.01-Spezifikation (deu)
Je länger ich darüber nachdenke, desto sinnvoller erscheint mir auch die Menü-Überschrift (h4) lieber als "phrase elements" (em) auszuzeichnen.

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 23.09.2005, 13:00
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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."
Mit Zitat antworten
  #6 (permalink)  
Alt 23.09.2005, 13:12
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 23.09.2005, 13:25
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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:
Du hast Dir die Site auch in der Druckansicht angeschaut?
Ja, im FF 1.06 und im IE 6.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #8 (permalink)  
Alt 23.09.2005, 13:49
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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:">&gt; Hinweise </span>
Das sind unteranderem genau die Dinge die ich alternativ Diskutieren möchte, und Du beziehst Dich nur auf den echten Test.

Was/Wo ist da die Sematik?

Als WEBkraut kommst Du mir nicht so leicht davon.
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 23.09.2005, 13:58
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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."
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.09.2005, 14:07
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Im übrigen ist das hier
Zitat:
<span class="current" title="Sie befinden sich hier:">&gt; Hinweise </span>
ein Tooltipp für Mausbenutzer; "title" bei <span> wird so gut wie von keinem Screen Reader interpretiert.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ist eine Tabelle barrierefrei? maggie Barrierefreiheit 21 10.02.2007 15:43
<dl> semantisch korrekt daro (X)HTML 2 05.05.2006 20:54
Ist diese Seite barrierefrei? jobo Barrierefreiheit 5 15.07.2005 07:08
Alle Browser, semantisch und barrierefrei? magick Site- und Layoutcheck 20 22.01.2005 22:45
Sind Selectboxen barrierefrei? ani Barrierefreiheit 4 13.10.2004 15:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:35 Uhr.