Skiplinks

Lineare Darstellung von Inhalten hat den großen Nachteil, dass man unter Umständen einen sehr weiten Weg zurücklegen muss, um zu »hinten« liegenden Inhaltsbereichen zu gelangen.

Beez kümmert sich an zwei Stellen um diese Sprungmarken. Zum einen in der index.php, wo ihre Position festgelegt wird und zum anderen in den eingesetzten Komponenten und Modulen, die Formularelemente enthalten.

14.6.1 index.php

Zu Beginn finden wir folgenden Code:

<ul>
  <li>
    <a href="#content" class="u2">
      <?php echo JText::_('Skip to Content'); ?>
    </a>
  </li>
  <li>
    <a href="#mainmenu" class="u2">
      <?php echo JText::_('Jump to Main Navigation and Login');?>
    </a>
  </li>
  <li>
    <a href="#additional" class="u2">
      <?php echo JText::_('Jump to additional Information'); ?>
    </a>
  </li>
</ul>

Diese Sprungmarken verlinken dokumentintern auf ihre entsprechenden Anker und sind semantisch korrekt mittels einer Liste angeordnet. Die JText-Anweisungen dienen der Übersetzung und werden je nach verwendetem Sprachfile automatisch in die von Ihnen ausgewählte Standardsprache übersetzt (siehe Kapitel 4.1, Seite 87).

Vor jedem Anker befindet sich eine mit CSS aus dem Viewport heraus positionierte Überschrift. Sie ist normalerweise unsichtbar, wird aber z.  B. in Screenreadern ausgegeben und erleichtert die nachvollziehbare Strukturierung des Inhaltes in hohem Maß.

<h2 class="unseen">
  <?php echo JText::_(' View, Navigation and Search'); ?>
</h2>
...
<a name="mainmenu"></a>  

Man könnte den Skiplink auch direkt auf die ID des umgebenden divs setzen, was sicherlich dem Konzept des strukturierten Dokumentes besser gerecht würde – leider gibt es jedoch einige ältere Screenreader, die damit nicht zurechtkommen.

14.6.2 Skiplinks in den Formularen

Senden Screenreader-Nutzer ein Formular ab, welches nicht mit einer Sprungmarke versehen wurde, landen sie am Seitenanfang und müssen erst umständlich zum eigentlichen Seiteninhalt navigieren. Um dies zu verhindern, verfügen die in Beez eingesetzten Formulare über Sprungmarken zum eigentlichen Seiteninhalt.

<form 
 action="<?php echo JRoute::_('index.php?option=com_search#content') ?>" 
 method="post"
 class="search_result<?php echo $this->params->get('pageclass_sfx') ?>"
>

Listing 14.1: Beispiel: die Suche