Warum bieten wir Menschen, die auf ein Bildschirmvorlesegerät (Screenreader) angewiesen sind und solchen, die sich aufgrund motorischer Einschränkungen mit der Tab-Taste durch eine Website hangeln, nicht ein kleines bißchen Komfort?
Skiplinks am Anfang einer Seite, mit denen man direkt zum Inhalt und/oder zur Navigation springen kann. Das Gleiche am Ende einer jeden Seite, damit man wieder zurück zur Navigation und/oder zum Anfang Inhalt springen kann.
Damit die Durchtabber auch in den Genuß dieser Skiplinks kommen, ist es doch im Grunde nur eine Kleinigkeit die Skiplinks mit etwas CSS für diese Menschen sichtbar zu machen, wenn sie beim Durchtabben an den entsprechenden Stellen ankommen.
Zuerst das XHTML:
<div id="kopf"><h1>Hauptüberschrift</h1> <ul><li class="skiplink"><a href="#inhalt" class="skiplinktab">Zum Inhalt springen</a></li><li class="skiplink"><a href="#navigation" class="skiplinktab">Zur Navigation springen</a></li></ul></div><-- Ende #kopf --> <div id="fuss"><ul><li class="skiplink"><a href="#navigation" class="skiplinktab">Zurück zur Navigation</a></li><li class="skiplink"><a href="#inhalt" class="skiplinktab">Zurück zum Anfang Inhalt</a></li></ul></div><-- Ende #fuss -->Es sollten nicht mehr als drei Skiplinks oben und unten sein, sonst wird es etwas unübersichtlich.
Legt euch einfach eine skiplink.htm an und speichert sie in eurem Vorlagenordner ab. Bei Bedarf können die Skiplinks einfach rauskopiert werden.
Das CSS dazu:
.skiplink {position:absolute;top:-9999px;left:-9999px;width:0px;height:0px;}.skiplinktab:focus,.skiplinktab:active {position:absolute;top:9999px;left:9999px;width:13em;background-color:#fff;color:#000;padding:0.6em;border:2px solid #000;}Damit die Skiplinktabs nicht immer ganz oben links, bzw. ganz unten links im Browser erscheinen solltet ihr #kopf und #fuss position:relative; mit auf den Weg geben, damit sich die absoluten Skiplinks daran orientieren können.
Je nachdem wo die Skiplinktabs im #kopf oder #fuss erscheinen sollen müssen die Werte für top/left angepaßt werden.
Die beiden CSS-Blöcke könnt ihr in euren vorlagen.css gespeichert werden, wo sie bei Bedarf nur noch rauskopiert werden müssen.
Das funktioniert zumindest im Firefox und Internet Explorer einwandfrei.
Wenn ich mich im WWW so umschauen, werden diese einfachen Maßnahmen um Menschen mit körperlichen Einschränkungen etwas Komfort beim Erkunden einer Website zu bieten leider so gut wie nie ergriffen.
« Navi – Flyout 2 – Navi – Tabs »
Jetzt muss ich kurz mal nachfragen:
Die Positionsangaben bei den Pseudoklassen beziehen sich doch in dem Fall auf den body, unabhängig von den zuvor gesetzten werten. Also ist 9999px für top und left doch etwas viel, oder?
Hi David,
Zuerst wird der Skiplink mit -9999px aus dem Viewport geschoben und beim Tabben durch 9999px wieder genau an die Stelle zurückgeschoben, wo er stehen würde, wenn er nicht rausgeschoben worden wäre. (Klingt wie von hinten durch die Brust ins Auge.
)
Bei position:absolute ist der Bezugspunkt ja body, wenn du dem umgebenden Container kein position:relative gibst,also würden die Skiplinks dann ganz oben links im sichtbaren Bereich erscheinen.
Ich gebe dem Header und dem Footer immer position:relative;, damit die jeweiligen Skiplinks im entsprechenden Container erscheinen.
Du kannst natürlich den Wert für top/left bei .skiplinktabs verändern, damit die Skiplinks an der gewünschten Stelle im jeweiligen Container erscheinen.
Sollten es für Header und Footer unterschiedliche Stellen sein dann brauchst du für die skiplinktabs noch eine Klasse mehr, z.B. .skiplinktabs_fuss.
Die Positionsangaben beziehen sich doch aber immer auf das Elternelement bzw. den body und nicht den zuvor definierten Wert für dieses Element. Das sich die beiden Werte addieren ist mir wahrlich neu.
Moin David,
mmmh…, also wenn du nichts definierst, dann gilt left:0; und top:0; von body bzw. dem Elternelement (wenn es position:relative; hat!) von den Skiplinks.
Das ist die linke obere Ecke von body oder dem Elternelement.
Per CSS werden die Skiplinks dann um -9999px von Null aus verschoben.
Damit sie beim Durchtabben wieder auf Null landen, muss ich sie ja von den -9999px wieder zurückholen.
Wenn ich sie vorher mit -9999px rausgeschoben habe, muss ich sie durch den Wert +9999px wieder zurückholen, damit sie wieder bei Null landen.
-9999 und +9999 = 0
Sollte ich z.B. für das Zurückholen bei left:10100px eintragen entspricht das left:101px. Der Skiplink wird dann nicht ganz links oben eingeblendet sondern um 101px nach rechts verschoben.
Jetzt etwas klarer?
Klaus, ich weis, was du meinst, allerdings überrascht es mich wirklich, dass es so funktioniert! Offensichtlich war ich bisher ziemlich auf dem Holzweg.
Vieleicht noch mal meine Vorstellung:
Ein Elternelement der Skiplinks bekommt position:relative, damit ist sicher gestellt, dass sich die Positionsangaben der Links an diesem Elternelement ausrichten, das Elternelement stellt quasi das Koordinatensystem dar.
.skiplink {
top:-1000px;
}
Das bedeutet, ich schiebe den Link 1000px von der Oberkante des Elternelements aus nach oben. Bezugspunkt ist – logisch – das Elternelement!
.skiplink:focus {
top:1000px;
}
Diese Angabe müsste ja dann bedeuten, dass ich von der Oberkante des Elternelements 1000px nach unten gehe. Aber hier scheint sich das Verhalten zu ändern, denn jetzt ist ja nicht mehr das Elternelement der Bezugspunkt, sondern das Element selbst in seiner ursprünglichen Positionierung. Warum?
Hi,
nein, weil die ursprüngliche Position ja -1000 ausgehend von der linken Oberkante des Elternelementes ist, das habe ich ja per CSS so festgelegt.
Durch den focus (von 1000) wird es wieder zurückgeholt.
Der Bezugspunkt bei den Positionsangaben ist immer das Elternelement, d.h. ich habe es erst von der Oberkante nach oben verschoben und dann wieder an die gleiche Stelle zurückgeholt.
Das konnte ich durch nur Lesen auch nicht begreifen, ich habe das öfter mal ausprobiert und mit den Werten gespielt.
Das Verständnis kam trotzdem erst nach und nach bei mir.
Sehr lange fand ich das sehr unlogisch.
Danke, dass du so geduldig mit mir bist.
Ansich erscheint mir das schon logisch. Allerdings nahm ich bisher an, dass sich bei jeder definition für die Pseudoklassen, die Werte wieder „nullen“ also die zuvor gesetzen Werte irrelevant sind. Offenbar hab ich mich da getäuscht. Ich werd das, wenn ich denn mal wieder Zeit habe, auch noch mal ausgiebig testen.
Gruß
[...] [...]