Beispiele aus dem Buch (Abschnitt 2.3: Verständlichkeit, Navigation und Orientierung)
Dies ist ein Beispiel aus dem Buch Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
AccessKey-Pad
Das AccessKey-Pad ist ein Vorschlag für die Verwendung von Tastaturkürzeln innerhalb eines Webauftritts. Als Tastaturkürzel werden nur Zahlen verwendet, weil die meisten Buchstaben in mindestens einem Browser bereits belegt sind. Verlinkt werden verständnisfördernde Seiten. Ausführliche Informationen finden Sie auf http://2bweb.de/accesskey/.
HTML
<ul id="acc">
<li><span>[Alt + </span><a accesskey="7" title="[Alt+7] Suche" href="#">7<span>: Suche</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="8" title="[Alt+8] Übersicht dieser Seite" href="#">8<span>: Übersicht dieser Seite</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="9" title="[Alt+9] Kontakt" href="#">9<span>: Kontakt</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="4" title="[Alt+4] Glossar" href="#">4<span>: Glossar</span></a><span> ] </span></li>
<li class="acc-n"><span>[Alt + </span>5<span>: (frei verfügbar) ] </span></li>
<li><span>[Alt + </span><a accesskey="6" title="[Alt+6] Gesamtübersicht / Sitemap" href="#">6<span>: Gesamtübersicht / <span lang="en">Sitemap</span></span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="1" title="[Alt+1] Hilfe" href="#">1<span>: Hilfe</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="2" title="[Alt+2] Nächste Seite" href="#">2<span>: Nächste Seite</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="3" title="[Alt+3] Vorherige Seite" href="#">3<span>: Vorherige Seite</span></a><span> ] </span></li>
<li><span>[Alt + </span><a accesskey="0" title="[Alt+0] Startseite" href="#">0<span>: Startseite</span></a><span> ] </span></li>
<li class="acc-logo"><a href="http://2bweb.de/accesskey/" title="Informationen über Tastaturkürzel"><strong lang="en" class="ac"><em>Access</em>Key</strong><span> - Informationen über Tastaturkürzel</span></a></li>
</ul>
CSS
#acc {
margin : 0;
padding : 0;
width : 10.3em;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 0.9em;
text-align : center;
line-height : 1.1em;
}
#acc li {
margin : 0 0.25em 0.25em 0;
padding : 0;
border : 1px solid #6f6f6f;
float : left;
list-style : none;
display : block;
}
#acc li a:link,
#acc li a:visited {
color : #000000;
background : #d3d3d3;
margin : 0;
padding : 0.25em 1px 0.25em 0;
width : 2.8em;
display : block;
text-decoration : none;
border-top : 0 solid #c4dde6;
border : 0 solid #c4dde6;
}
#acc li a:hover {
color : #fffff2;
background : #bf0000;
font-weight : bold;
border-top : 0 solid #c4dde6;
padding : 0.25em 1px 0.25em 0;
width : 2.8em;
}
#acc li a:focus,
#acc li a:active {
color : #fffff2;
background : #000080;
font-weight : bold;
padding : 0.25em 1px 0.25em 0;
width : 2.8em;
}
#acc .acc-n {
border : 1px dotted #d7e9ff;
border : 1px dotted #7cb7ff;
color : #000000;
background : #fff;
width : 2.8em;
padding : 0.25em 1px 0.25em 0;
}
#acc li.acc-logo {
border : 0;
width : 6.3em;
}
#acc .acc-logo a:link,
#acc .acc-logo a:visited {
padding : 0.25em 0 0.25em 0.1em;
width : 6.1em;
display : block;
color : #ff0000;
background : transparent;
letter-spacing : 0;
text-decoration : none;
border : 1px solid #E7F3F7;
}
#acc .acc-logo a:hover,
#acc .acc-logo a:focus,
#acc .acc-logo a:active {
background : #d3d3d3;
text-decoration : underline;
border : 1px solid #6f6f6f;
padding : 0.25em 0 0.25em 0.1em;
width : 6.1em;
}
#acc strong {
color : #000080;
font-variant : small-caps;
font-weight : bold;
}
#acc strong em {
color : #ff0000;
font-style : italic;
letter-spacing : 0;
}
#acc span {
width : 0;
position : absolute;
left : -1000px;
top : -1000px;
height : 0;
overflow : hidden;
}
Browseransicht
- [Alt + 7: Suche ]
- [Alt + 8: Übersicht dieser Seite ]
- [Alt + 9: Kontakt ]
- [Alt + 4: Glossar ]
- [Alt + 5: (frei verfügbar) ]
- [Alt + 6: Gesamtübersicht / Sitemap ]
- [Alt + 1: Hilfe ]
- [Alt + 2: Nächste Seite ]
- [Alt + 3: Vorherige Seite ]
- [Alt + 0: Startseite ]
- AccessKey - Informationen über Tastaturkürzel