Skiplinks als Seitenelement

Wir entwerfen mit dem fortschrittlichsten Responsive Frontend Framework der Welt. Die Fokussierung ist damit klar.

Die Nutzung mobiler Endgeräte revolutionieren unser Business.

Kundenorientierung, Verfügbarkeit, Vernetzung, Mobilität und Intelligenz werden kombiniert und ergeben neuartige Möglichkeiten.
r23
Beiträge: 1594
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Skiplinks als Seitenelement

Beitragvon r23 » 26.04.2009, 11:39

Hallo,
Viele Seiten, vor allem die mit viel Inhalt, setzen mittlerweile auf „Skiplinks“
(Sprungmarken) für Textbrowser und Screenreader. Also Links, welche für
den Otto-Normal User nicht sichtbar sind, einem Textbrowser- oder
Screenreader-User jedoch die Navigation durch die Seite erleichtern
(können). Ein Skiplink kann beispielsweise dafür sorgen, dass der User direkt
zum eigentlichen Inhalt der Seite klicken kann, ohne sich zum x-ten Mal die
Navigation vorlesen lassen zu müssen.
http://www.manuel-bieh.de/blog/skiplink ... tenelement

Code: Alles auswählen

<span class="skiplink"> <a href="#navi" title="Direkt zur Navigation springen" tabindex="1"> Zur Navigation springen</a></span> <span class="skiplink"> <a href="#content" title="Direkt zum Content springen" tabindex="2"> Zum Content springen</a> </span>


Beispiel, wie die Blog Software serendipity in einem Smarty Template verwendet

Code: Alles auswählen

<!-- #skiplinks: these are links used to navigate quickly in text-based browsers --> <!-- they are of little use in modern graphical browsers, so the are --> <!-- hidden using CSS <div id="skiplinks"> <ul> {if $template_option.sitenavpos != 'none'}<li lang="en"><a href="{if $template_option.sitenavpos == 'left'}#sbsitenav{elseif $template_option.sitenavpos == 'right'}#sbsitenav{else}#sitenav{/if}">Skip to site navigation</a></li>{/if} <li lang="en"><a href="#content">Skip to blog entries</a></li> <li lang="en"><a href="{$serendipityBaseURL}index.php?/archive">Skip to archive page</a></li> {if $template_option.layouttype != '2bs'}<li lang="en"><a href="#serendipityLeftSideBar">Skip to left sidebar</a></li>{/if} {if $template_option.layouttype != '2sb'}<li lang="en"><a href="#serendipityRightSideBar">Skip to right sidebar</a></li>{/if} </ul> </div>
Hier die Anleitung von YAML

http://www.yaml.de/de/dokumentation/gru ... links.html

Diese Art der Navigationshilfe kann selbstverständlich durch zusätzliche Sprungmarken
erweitert werden. Dies liegt im Ermessen des Webdesigners und sollte wohlüberlegt
und zurückhaltend geschehen.
Ich denke zurzeit an folgende Skiplinks für MyOOS

Code: Alles auswählen

<!-- start: skip link navigation --> <a class="skip" href="#navigation" title="skip link">skip to navigation</a><span class="hideme">.</span> <a class="skip" href="#content" title="skip link">skip to content</a><span class="hideme">.</span> <a class="skip" href="{html_href_link modul=$modules.info file=$filename.info_sitemap anchor=content}" title="skip link">Skip to sitemap page</a><span class="hideme">.</span> <!-- end: skip link navigation -->

Und wie möchtest du dies in deinem Shop haben? Oder hast du dies bereits schon?
Welche Skiplinks verwendest du?

cu

ralf

Zurück zu „WebDesign für MyOOS“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast