Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Beispiele aus dem Buch (Abschnitt 2.3: Verständlichkeit, Navigation und Orientierung)

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch Extern: "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

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 Extern: 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