Der perfekte Skiplink? - Seite 7

Dieter · #61 (**permalink**) 06.12.2006, 19:31

Zitat:

Empfindest du beispielsweise die in Beitrag #52 gezeigte Variante als hilfreich?

Je nach Komplexität einer Seite - ja!

Das ist doch nur eine Hilfestellung für SR-Nutzer. Für andere User wird das doch garnicht sichtbar!

Dieter · #62 (**permalink**) 06.12.2006, 19:34

Schau Dir doch mal diese Seite T-Com an und stell Dir vor, die Seite wird Dir vorgelesen. Wärst Du nicht froh, wenn Du zu bestimmten Seitenteilen springen könntest?

Geronimo · #63 (**permalink**) 07.12.2006, 09:09

Zitat:

Zitat von Dieter Krautkraemer

Wärst Du nicht froh, wenn Du zu bestimmten Seitenteilen springen könntest?

Nein. Froh wäre ich über eine grundlegende Überarbeitung.

Ich hab' heute ein wenig mit „Skiplinks“ herumgespielt und bin dabei auf ein Problem gestoßen: Wie mache ich die Dinger wieder sichtbar, nachdem ich sie mit den folgenden CSS-Anweisungen gewissermaßen ausgeblendet habe?

Code:

div#sprungziele {
  position: absolute;
  left: -3000px;
  top: -2000px;
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: inline;
}

Code:

      <div id="sprungziele">

        <h2>Sprungziele</h2>

        <ul>
          <li><a href="#navigation">Navigation</a></li>
          <li><a href="#standort">Standort</a></li>
          <li><a href="#inhalt">Inhalt</a></li>
        </ul>

      </div>

heiko_rs · #64 (**permalink**) 07.12.2006, 09:22

Wegen des IE kannst Du nur die Links ansprechen, und die natürlich mit den Pseudoklassen :focus und (für den IE) :active. Übrigens genügen die ersten 3 Eigenschaften, alles andere ist etwas "over the top"

(und muß ja auch wieder zurückgesetzt werden.)

Dieter · #65 (**permalink**) 07.12.2006, 09:40

Das, was Ihr beide da vorschlagt, ist so eine Art "Standardlösung". Ob man die verwendet, muss man aber vom Layout der Seite abhängig machen.

Ich habe schon mehrfach Seiten gesehen, auf denen diese Lösung verwendet wurde und in denen dann der Skiplink für einen Tastaturbediener völlig überraschend auttaucht und irgendwie ins Layout reingequetscht wurde.

Deshalb arbeite ich mit einer Art optischem Platzhalter über der Seite, in die dann der Skiplink bei Bedarf eingeblendet wird.

Aber wie gesagt, die zu verwendende Lösung ist layoutabhängig.

Geronimo · #66 (**permalink**) 07.12.2006, 09:53

Seltsam. Im FF werden die Skiplinks jetzt angezeigt, der IE weigert sich allerdings beharrlich.

Code:

div#sprungziele {
  position: absolute;
  left: -200em;
}

div#sprungziele a:active,
div#sprungziele a:focus {
  position: absolute;
  left: 214.8em;
  top: 11em;
}

heiko_rs · #67 (**permalink**) 07.12.2006, 09:54

Zitat:

Zitat von Dieter Krautkraemer

in denen dann der Skiplink für einen Tastaturbediener völlig überraschend auttaucht und irgendwie ins Layout reingequetscht wurde.

Darauf muß man natürlich achten, das ist klar. Andererseits muß das Design das auch hergeben; ich finde es auch nicht zwangsläufig verkehrt, wenn der Skiplink mit deutlich sichtbarer Hintergrundfarbe links oben eingeblendet wird, auch wenn er dabei z.B. einen Teil des Logos überdeckt. Dann fällt er wenigstens sofort auf! Aber wie gesagt, wenn das Design es ermöglicht, ist ein Platzhalter natürlich schöner.

Zitat:

Zitat von Dieter Krautkraemer

Deshalb arbeite ich mit einer Art optischem Platzhalter über der Seite, in die dann der Skiplink bei Bedarf eingeblendet wird.

Dann würde ich statt absolute einfach relative nehmen, mit left: -9999px; (top sollte besser entfallen), denn dann paßt sich die Höhe des vorgesehenen Platzes bei Textvergrößerung der Höhe des Links an (und zwar immer, d.h. auch wenn der Link gerade ausgeblendet ist).

heiko_rs · #68 (**permalink**) 07.12.2006, 09:57

Zitat:

Zitat von designfanatiker

der IE weigert sich allerdings beharrlich.

Versuche mal folgendes:

Code:

div#sprungziele a:active,
div#sprungziele a:focus {
  position: absolute;
  left: 214.8em;
  top: 11em;
  border: none;
}

Geronimo · #69 (**permalink**) 07.12.2006, 10:00

Macht keinen Unterschied.

heiko_rs · #70 (**permalink**) 07.12.2006, 10:05

Dann gibt es noch eine zweite Möglichkeit: Die Selektoren für den Skiplink müssen exakt den allgemeinen Selektoren für a enstsprechen, d.h.

Code:

a,
a:link,
a:visited { ... }

a:active,
a:focus { ... }

#id a,
#id a:link,
#id a:visited { ... }

#id a:active,
#id a:focus { ... }

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Perfekte 1 Pixel Linie in Illustrator 14	wurzelchensen	Grafik, Design, Typografie	8	05.10.2009 10:45
Horizontale Navi mit Trennzeichen: perfekte Lösung?	AndreasB	CSS	29	16.05.2009 09:02
Skiplink direkt in ein Suchfeld?	andir	Barrierefreiheit	5	13.12.2007 18:53
Skiplink zum Inhaltsverzeichnis?	hubspe	Barrierefreiheit	43	21.10.2007 15:24