|
|||
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> Quellcode entsprechend folgendem THREAD geändert ! </edit 11.10.2004>
__________________
</ulle> |
Sponsored Links |
|
|||
Zitat:
__________________
</ulle> |
Sponsored Links |
|
|||
Zitat:
@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> |
|
|||
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> |
|
||||
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." |
|
|||
Zitat:
http://www.edition-w3.de/TR/1999/REC...tml#edef-LABEL Zitat:
Des weiteren ist es doch nicht sinnvoll zusätzliche Ziel-Container (DIVs) im CODE einzusetzen....
__________________
</ulle> |
|
||||
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." |
|
|||
Zitat:
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> |
Sponsored Links |
|
||||
Zitat:
(»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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |