Barrierefreie Navigation für eine Webseite erstellen – Anleitung

In diesem Blogartikel erkläre ich wie Sie eine barrierefreie Navigation für eine Webseite mit HTML und CSS erstellen können.

Barrierefreie Navigation – Was ist das

Sicherlich bist du bereits mit dem Konzept der Website-Navigation vertraut, das auch oft als Website-Menü bezeichnet wird. Dieses wichtige Element ist die horizontale Leiste, sie kann auch vertikal sein, die auf einer Webseite platziert ist und dir ermöglicht, mühelos zwischen verschiedenen Unterseiten zu navigieren. Hier findest du Links, auf die du klicken kannst, um direkt zu verschiedenen Zielseiten zu gelangen. Diese Leiste muss so programmiert sein, dass sie für Menschen mit unterschiedlichen Behinderungen oder anderen körperlichen Einschränkungen bedienbar ist.

Barrierefreie Navigation – Das HTML

Hier das HTML zur barrierefreien Navigation:

    <nav>
      <ul class="nav-list">
        <li>
          <a href="index.html" accesskey="s"><span class="buchstabe_unterstreichen">S</span>tartseite</a>
        </li>
        <li>
          <a href="index.html" accesskey="l">Dienst<span class="buchstabe_unterstreichen">l</span>eistungen</a>
        </li>
        <li>
          <a href="index.html" accesskey="ü"><span class="buchstabe_unterstreichen">&Uuml;</span>ber uns</a>
        </li>
        <li>
          <a href="index.html" accesskey="k"><span class="buchstabe_unterstreichen">K</span>ontakt</a>
        </li>
      </ul>
    </nav>

Barrierefreie Navigation – Erklärung von HTML

Seit HTML5 gibt es ein <nav>-Tag. Dieses sollten Sie unbedingt bei der Programmierung einer Webseiten-Navigation verwenden. Die Navigationspunkte werden als unordered list, unsortierte Liste, erstellt.

Barrierefreie Navigation – Links per Tastenkürzel anklickbar machen

Damit die Navigationsmenüpunkte auch per Tastenkürzel ausgeführt werden können, bekommen sie das Attribut accesskey. Die gesetzten Tastenkürzel können in Kombination mit der Taste „Alt“ ausgeführt werden. accesskey=“s“ bedeutet, dass Taste Alt + s den Link Startseite „anklickt“. Das der Buchstabe der als Tastenkürzel gesetzt wurde unterstrichen dargestellt wird, realisiere ich mit CSS. Das CSS wird im HTML mit Hilfe des <span>-Tag gesetzt.

Barrierefreie Navigation – Das CSS

Hier das CSS zur barrierefreien Navigation:

html{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoij", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 100%;
}

h1{
    text-align: center;
}

.nav-list{
      list-style: none;
      text-align: center;
}
    
.nav-list li{
      display: inline-block;
      margin: 0 20px 0 20px;
}

.buchstabe_unterstreichen {
    text-decoration: underline;
  }

ul.nav-list a:hover,
ul.nav-list a:focus,
ul.nav-list a:active {
  background-color: yellow;
}

a:link {
    text-decoration: none;
}

Barrierefreie Navigation – Erklärung von CSS

In diesem Abschnitt erkläre ich das CSS für die barrierefreie Navigation.

Barrierefreie Navigation – Listenpunkte entfernen

list-style: none;: Diese Eigenschaft entfernt die standardmäßigen Aufzählungszeichen oder Nummerierungszeichen (Listenpunkte) von einer ungeordneten Liste (<ul>) oder einer geordneten Liste (<ol>). Das bedeutet, dass die Listenelemente in deiner .nav-list-Klasse keine Aufzählungspunkte (wie Punkte oder Zahlen) vor den Einträgen haben werden.

Barrierefreie Navigation – Navigationsmenüs horizontal Zentrieren

text-align: center;: Diese Eigenschaft zentriert den Text innerhalb der Elemente in deiner .nav-list. In diesem Fall werden die Texte innerhalb der Listenelemente horizontal zentriert. Dies ist besonders nützlich, wenn Sie beispielsweise eine horizontale Navigationsleiste erstellen und die verknüpften Texte in der Mitte der Leiste zentrieren möchten.

Barrierefreie Navigation – Navigationsmenüpunkte als Inline und Block

display: inline-block; wird verwendet, um ein HTML-Element sowohl als Inline-Element als auch als Blockelement zu rendern. Dies bedeutet, dass das Element auf der Seite inline mit den umgebenden Elementen fließt, gleichzeitig jedoch die Eigenschaften eines Blockelements beibehält.

Barrierefreie Navigation – Abstände für Navigationsmenüpunkte

margin: 0 20px 0 20px; sorgt dafür, dass jeder Navigationspunkt rechts und links einen Abstand von 20 Pixel hat.

Barrierefreie Navigation – Buchstaben für Tastenkürzel unterstrichen darstellen

.buchstabe_unterstreichen {
    text-decoration: underline;
  }

Mit dem HTML Attribut accesskey habe ich dafür gesorgt, dass Navigations-Menüpunkte per Tastatur erreichbar sind. Leider ist für den Webseitenbesucher nicht erkennbar, welche Buchstaben in der Navigation Tastaturkürzel sind. Deswegen muss ich mit CSS nachhelfen und dafür sorgen, dass der Buchstabe den ich mit dem HTML Attribut accesskey als Tastaturkürzel definiert wird unterstrichen angezeigt wird. Warum unterstreiche ich die Buchstaben und mache sie nicht fettgedruckt? Bei Windows-Programmen werden Menüshortcuts (Shortcut = Tastaturkürzel) auch unterstrichen dargestellt.

Barrierefreie Navigation – Warum ::first-letter nicht immer eingesetzt werden kann

Den ersten Buchstaben eines Wortes zu unterstreichen geht mit ::first-letter. Der Grund warum ich hier darauf verzichtet habe ::first-letter zu verwenden ist, es kann bei der Navigation einer Webseite vorkommen, dass zwei Navigationspunkte mit dem gleichen Buchstaben beginnen, dann funktioniert ::first-letter nicht.

Barrierefreie Navigation – Der Einsatz von text-decoration: underline

text-decoration: underline unterstreicht ein oder mehrere Zeichen. Mit der CSS-Klasse .buchstabe_unterstreichen kann ich selbst entscheiden welcher Buchstabe unterstrichen angezeigt wird.

Barrierefreie Navigation – aktiven Navigationspunkt gut sichtbar darstellen

Damit Menschen mit einer Sehbehinderung erkennen, welches der aktive Navigationsmenü ist bzw. über welchem Navigationsmenü die Computermaus schwebt kann folgendes CSS verwendet werden:

ul.nav-list a:hover,
ul.nav-list a:focus,
ul.nav-list a:active {
  background-color: yellow;
}

ul.nav-list a:hover:wird angewendet, wenn der Mauszeiger über den Link bewegt wird (Hover-Zustand). Wenn Sie also mit der Maus über den Link fahren, wird die Hintergrundfarbe des Links gelb.
ul.nav-list a:focus: wird angewendet, wenn der Link den Fokus erhält, normalerweise durch die Tabulatortaste.
ul.nav-list a:active: wird angewendet, wenn der Link aktiviert oder geklickt wird, während er gerade gedrückt wird. Die Hintergrundfarbe des Links wird auch hier gelb, um die Rückmeldung zu geben, dass der Link geklickt wurde.

Barrierefreie Navigation für eine Webseite erstellen – Anleitung als Video

Für alle diejenigen die lieber ein Video anschauen, hier das Video zu Blogartikel:

Schlussbemerkung

Eine barrierefreie Navigation für Webseiten ist sehr wichtig. Ich hoffe dass dieser Blogartikel dazu beiträgt, dass es selbstverständlich wird das eine Navigation auf einer Internetseite barrierefrei ist.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .