zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Skip-Links mit label-Tag

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.10.2004, 14:40
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard Skip-Links mit label-Tag

Moin,

Habe das Thema mit den Skip-Links mal ausgearbeitet, bin zu dem Endschluß gekommen den Label-Tag dafür einzusetzen.

Vorteil ist das dieser in der Semantik keine Rolle spielt (zweifel).

Funktioniert auch wunderbar, zumal mit TABs-Bewegung sofort der nächste Skip-Link im Focus ist.

Leider hat der oben beschreiben IE6 / XPsp2 da ein Problem den LINK auch anzuzeigen falls er im FOCUS / ACTIVE steht.

Auch hier dieses Phänomen, wird erst in die BOX geklickt funktioniert auch der Focus???

Schein mir das gleiche Thema wie bei der Galerie ohne JavaScript zu sein,
http://www.xhtmlforum.de/viewtopic.php?p=10398#10398



Aber im Mozilla funktioniert es perfekt, was meint Ihr zu dieser Lösung.

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" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/ 


html,body	{
			margin: 0;
			padding: 0;
			background-color: #EECC33;
			color: #000000;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-size: 100.01%;
			}


.box		{
			height: 5em;
			
			margin: 2em;
			border: 1px solid #000000;
			padding: 1em;

			background-color: #EEEEEE;
			}

pre			{ /* sichtbar-test */
			background-color: #FF0000;
			}

/* workaround WinXP SP2 */ 
a, a:link, a:visited, a:hover, a:focus, a:active   {} 
/* ENDE / workaround WinXP SP2 */

label		{ /* nicht notwendig */
			display: block;
			}

label a,
label a:link,
label a:visited,
label a:hover
			{
			color: #EEEEEE; /* = nicht sichtbar >> #box {background-color: inherit;} */
			}

										
label a:focus,
label a:active {
		   	color: #000000;
			background-color: #FFAA22;
			}


/*]]>*/ 
</style> 

</head> 
<body><pre><label id="top"></label></pre>
<h1>skip-Links mit label-Tag</h1>

<div class="box">
<label id="skip1">skip this</label>
link
link
link
link
</div>

<div class="box">
<label id="skip2">skip this</label>
link
link
link
link
</div>

<div class="box">
<label id="skip3">skip this</label>
link
link
link
link
</div>

<div class="box">
<label id="skip4">skip this</label>
link
link
link
link
</div>



zum Seitenanfang</p>
</body></html>
<edit 11.10.2004>
Quellcode entsprechend folgendem THREAD geändert !
</edit 11.10.2004>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.10.2004, 17:23
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
Leider hat der oben beschreiben IE6 / XPsp2 da ein Problem den LINK auch anzuzeigen falls er im FOCUS / ACTIVE steht.
siehe Workaround http://www.xhtmlforum.de/viewtopic.php?p=10901#10901
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.10.2004, 12:45
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
Habe das Thema mit den Skip-Links mal ausgearbeitet, bin zu dem Endschluß gekommen den Label-Tag dafür einzusetzen.
Kein Wiederspruch zum label-Tag

@Dieter Krautkraemer, von Dir und @Toscho hatte ich einen Kommentar erwartet......, scheinbar birgt diese Lösung keine Nachteile - oder?

Immerhin benötigt diese Lösung für die Sprungziele keine CSS-Definition (label-Tag) und spart auch die DIVs ein.
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 11.10.2004, 13:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.06.2004
Beiträge: 172
beeviz befindet sich auf einem aufstrebenden Ast
Standard

verständnisfrage:
was genau sind skiplinks
Mit Zitat antworten
  #5 (permalink)  
Alt 11.10.2004, 13:33
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Damit werden bestimmte Bereiche im Dokument übersprungen, zum Beispiel Navigationen oder Formulare.

Zielgruppe sind Menschen/User die ausschliesslich mit der Tastatur, ohne Mause, arbeiten wollen/müssen!

D.h. mit normalen TABs werden alle fokusierbaren Elemente, zum Beispiel Links oder Input-Felder, von oben nach unten angesprungen, d.h. in der Reihenfolge wie diese im Dokument stehen.

Natürlich wären auch Accesskeys möglich, aber diese haben einen hohen Definitionsaufwand und sind nicht wirklich Barrierefrei.

Ein guten Beispiel ist dieser THREAD http://www.xhtmlforum.de/viewtopic.php?t=2045
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 11.10.2004, 16:33
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

War mal einige Zeit NICHT am PC - aber jetzt bin ich wieder dabei!

Das Label-Tag ist, wenn ich richtig informiert bin, ausschliesslich zur Auszeichnung von Formularfeldern vorgesehen. Ob eine Verwendung als eigenständiges Element semantisch korrekt ist, muss ich deshalb bezweifeln.

Dass es so, wie Du es vorschlägst, möglicherweise als Skiplink sogar funktioniert, das kann sogar sein. Ob aber alle Screen-Reader damit zurecht kommen - das musst Du dann wirklich mal toscho fragen.

Aber eines noch: auch in der Hoffnung, dass zukünftige Browser die Standards immer mehr und möglicherweise eines Tages sogar perfekt umsetzen, würde ich auf solche Massnahmen verzichten.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 11.10.2004, 17:05
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 Dieter Krautkraemer
Das Label-Tag ist, wenn ich richtig informiert bin, ausschliesslich zur Auszeichnung von Formularfeldern vorgesehen.
Nein, so ist es nicht definiert...


http://www.edition-w3.de/TR/1999/REC...tml#edef-LABEL

Zitat:
Das Element LABEL kann dazu verwendet werden, Steuerelementen Informationen hinzuzufügen.
Ein [<a href="..."]-Tag ist ein Steuerelement, außerdem ist auch mein CODE Valide
Des weiteren ist es doch nicht sinnvoll zusätzliche Ziel-Container (DIVs) im CODE einzusetzen....
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 11.10.2004, 20:20
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Hi, Ulle!

Ich kenne den vor Dir benannten Artikel - verstehe ihn aber anders!

Nach meinem Dafürhalten ist Label auf "form fields", also Eingabefelder innerhalb eines Formulares beschränkt!

Was einen DIV-Container als Ziel angeht: IRGNDEIN Ziel musst Du ja benennen, entweder ein eigens dafür geschaffenes Ziel oder einen per ID identifizierbaren Bereich! Wo ist da ein Unterschied?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #9 (permalink)  
Alt 11.10.2004, 21:41
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Wo ist da ein Unterschied?
In der CSS-Definition alle entsprechenden DIVs müssen per CSS, d.h. der #id-Selektor, unsichtbar gemacht werden, das sind evtl. eine Menge definitionen.

Bei meinem CODE-Vorschlag entfällt diese #id-Definition, einmal den Label mit Nachfahre definiert, und danach Unendlich viel Skip-Links.

Zusätzlich behält das Dokument die "Form", der label-Tag hat keine Darstellung, ohne CSS bleibt alles wie es ist, keine zusätzlichen evtl. leeren Blockelemente (DIVs), die ja zum Beispiel ein TEXT-Browser liest und Zeilen dafür einfügt, bzw. Suchmaschinen die evtl. so etwas als manipulation auswerten.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.10.2004, 22:00
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von ulle
Kein Wiederspruch zum label-Tag :!: :?:
Tja, genaugenommen ist es natürlich eine Zweckentfremdung: <label> ist in HTML 4 ausdrücklich zur Etikettierung von Formularelementen gedacht, auch wenn sich das in der DTD so nicht ausdrücken läßt.
(»Steuerelement« ist übrigens wieder so eine unglückliche Übersetzung; HTML 4 spricht von »form controls«. Wenn es wichtig ist, greife man immer auf das Original zurück.)

Andererseits kann ich deinen Gedankengang schon ein wenig nachvollziehen; der mit <label> verbundene Fokuswechsel ist ja der Funktion eines Skiplinks sehr ähnlich.

Dein Beispiel zeigt nicht, wie man einen Skiplink umsetzt, der auf den Textanfang zeigt, statt auf ein anderes <label>. Wenn man das tut, hat man nämlich immer noch die Notwendigkeit eines leeren COntainers, oder übersehe ich gerade etwas?

Vielleicht kannst du mal so ein Beispiel erstellen und durchtesten?

Gruß
Thomas
__________________
toscho.de
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
Canonical Tag? gabischatz (X)HTML 3 20.12.2012 16:26
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. Picasso CSS 36 03.01.2011 20:41
Grafik des Hauptmenüpunktes bei Aktivierung eines Links des Untermenüs verschwunden makalus CSS 7 03.11.2010 10:36
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 19:20
Label Tag für Suchfeld? i-fekt Barrierefreiheit 11 10.08.2005 22:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:23 Uhr.