Semantische HTML-Struktur für eine barrierefreie und benutzerfreundliche Webseite

Möchtest du eine barrierefreie und benutzerfreundliche Webseite erstellen? Dann solltest du darauf achten, dass die HTML-Struktur semantisch sinnvoll ist und den Inhalt der Seite widerspiegelt. In diesem Artikel zeige ich dir ein Beispielcode für eine Webseite mit einem Kopfbereich mit Hauptnavigation, einem Inhaltsbereich neben einer Sidebar und einem Footer mit sekundärer Navigation. Außerdem gebe ich dir Tipps, wie du eine barrierefreie Webseite erstellen kannst.

HTML-Editor mit beispielhaften HTML-Code. — Bild von James Osborne über die Plattform Pixabay

Grundsätzlich solltest du bei der Erstellung einer Webseite darauf achten, dass die HTML-Struktur semantisch sinnvoll ist und den Inhalt der Seite widerspiegelt. Eine gut strukturierte Webseite hilft nicht nur bei der Suchmaschinenoptimierung, sondern auch bei der Barrierefreiheit und der Benutzerfreundlichkeit.

Im Folgenden zeige ich dir einen Beispielcode für eine Webseite mit einem Kopfbereich mit Hauptnavigation, einem Inhaltsbereich neben einer Sidebar und einem Footer mit sekundärer Navigation.

HTML-Struktur:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Beispiel Webseite</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Produkte</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h1>Willkommen auf unserer Webseite</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada augue quis arcu ullamcorper bibendum. Ut at nibh et mauris malesuada aliquet.</p>
    </section>
    <aside>
      <h2>Aktuelle Angebote</h2>
      <ul>
        <li><a href="#">Angebot 1</a></li>
        <li><a href="#">Angebot 2</a></li>
        <li><a href="#">Angebot 3</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <nav>
      <ul>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Datenschutz</a></li>
        <li><a href="#">AGB</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

In diesem Beispiel habe ich einen Kopfbereich mit einer Hauptnavigation, die in einem nav-Element eingebettet ist. Die Hauptnavigation ist eine ungeordnete Liste (ul) mit Links (a) zu verschiedenen Seiten der Webseite.

Der Inhaltsbereich ist in einem main-Element enthalten und besteht aus einer section, die den Hauptinhalt der Seite enthält, und einer aside, die als Sidebar dient und in diesem Beispiel aktuelle Angebote enthält.

Der Footer enthält eine sekundäre Navigation, die in einem nav-Element eingebettet ist und ebenfalls eine ungeordnete Liste mit Links zu verschiedenen Seiten enthält.

Das obige Beispiel ist natürlich nur ein Grundgerüst und kann je nach Bedarf angepasst werden. Wichtig ist jedoch, dass die HTML-Struktur semantisch sinnvoll ist und den Inhalt der Seite widerspiegelt.

Mögliches CSS:

/* Header */
header {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

/* Main */
main {
  display: flex;
}

section {
  flex: 2;
  padding: 20px;
}

aside {
  flex: 1;
  background-color: #eee;
  padding: 20px;
}

/* Footer */
footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

footer nav ul {
  display: flex;
}

footer nav li {
  margin-right: 20px;
}

footer nav a {
  color: #fff;
  text-decoration: none;
}

In diesem CSS-Code haben wir das Styling für den Header, das Hauptmenü, den Inhaltsbereich, die Sidebar und den Footer definiert. Die Styles sind recht einfach gehalten und dienen nur als Beispiel. Natürlich kannst du die Styles je nach Bedarf anpassen und verfeinern.

Die wichtigsten Elemente sind header, nav, main, section, aside und footer, die jeweils spezifische Styles erhalten. Die Hauptnavigation und die sekundäre Navigation sind als Listen definiert und als Flexboxen dargestellt, um sie horizontal anzuordnen.

Zusätzliche Attribute und Tags

Wenn du eine Webseite erstellst, solltest du sicherstellen, dass sie für alle Nutzer zugänglich ist, einschließlich Nutzer mit Behinderungen. Dazu solltest Du nicht nur eine sinnvolle HTML-Struktur und semantische HTML-Tags verwenden, um die Navigation und den Inhalt deiner Webseite zu organisieren.

Allerdings kann es auch Situationen geben, in denen zusätzliche Attribute und Tags benötigt werden, um die Zugänglichkeit für Nutzer mit Behinderungen zu verbessern. role-Attribute und aria-Tags sind dafür gedacht, die Funktion und Bedeutung von HTML-Elementen für assistive Technologien zu beschreiben.

Es ist wichtig zu beachten, dass die Verwendung von role-Attributen und aria-Tags allein nicht ausreicht, um eine barrierefreie Webseite zu erstellen. Eine zugängliche Webseite erfordert eine Kombination aus geeigneter HTML-Struktur, semantischen Tags, role-Attributen und aria-Tags sowie weiteren Überlegungen, wie z.B. Farbkontraste, Schriftgröße und Tastaturbedienbarkeit.

Semantische HTML-Struktur für eine barrierefreie und benutzerfreundliche Webseite

HTML-Struktur:

Mögliches CSS:

Zusätzliche Attribute und Tags

Weitere Artikel