04_AccessibilityBasics

Code-Dateien

DateinameAktion
CODECode_Accessibility.zipDownload

Videos

DateinameAktion
VIDEOVideo_AccessibilityAbspielen

Lernmaterialien

Accessibility

Ein Produkt, eine Website, eine App oder ein Gebäude ist accessible, wenn alle Menschen es gut nutzen können – auch Menschen mit Einschränkungen.

Zum Beispiel:

  • jemand sieht schlecht oder gar nicht

  • jemand hört schlecht oder gar nicht

  • jemand kann keine Maus benutzen

  • jemand hat Schwierigkeiten beim Lesen oder Verstehen

  • jemand ist vorübergehend eingeschränkt, etwa mit gebrochenem Arm

Bei einer Website heißt das zum Beispiel:

  • Texte sind gut lesbar

  • Farben haben genug Kontrast

  • Bilder haben Beschreibungen

  • man kann alles auch mit der Tastatur bedienen

  • Videos haben Untertitel

Warum ist Accessibility so wichtig?

Weil sonst viele Menschen ausgeschlossen werden.
Eine Website oder App kann noch so schön sein – wenn manche sie nicht benutzen können, ist sie für diese Menschen praktisch wertlos.

Accessibility ist wichtig, weil sie:

1. Teilhabe ermöglicht
Alle sollen Informationen, Dienste und Produkte nutzen können.

2. fair ist
Niemand sollte ausgeschlossen werden, nur weil er eine Einschränkung hat.

3. vielen Menschen hilft, nicht nur Menschen mit Behinderung
Zum Beispiel:

  • Untertitel helfen auch in lauter Umgebung

  • klare Texte helfen auch Nicht-Muttersprachlern

  • gute Kontraste helfen auch bei Sonne am Handy

  • Tastaturbedienung hilft auch Power-Usern

4. oft gesetzlich gefordert ist
Viele digitale Angebote müssen heute barrierefrei sein.

5. die Qualität insgesamt verbessert
Barrierefreie Produkte sind oft klarer, verständlicher und leichter zu bedienen – für alle.

Beispiel

Stell dir eine Website von einer Universität vor.

Ein Student möchte dort:

  • den Stundenplan lesen

  • sich für Prüfungen anmelden

  • wichtige Infos finden

Ohne Accessibility kann es Probleme geben:

  • Die Schrift ist zu klein.

  • Die Farben sind schlecht erkennbar.

  • Ein Bild enthält wichtige Infos, aber ohne Textbeschreibung.

  • Das Menü funktioniert nur mit der Maus.

  • Ein Video hat keine Untertitel.

Dann können manche Studierende die Seite nicht richtig nutzen, zum Beispiel:

  • blinde Menschen

  • Menschen mit Sehschwäche

  • gehörlose Menschen

  • Menschen mit motorischen Einschränkungen

  • Menschen mit Lernschwierigkeiten

Mit Accessibility wäre die Website besser gemacht:

  • klare, gut lesbare Texte

  • hohe Kontraste

  • Bilder mit Alternativtext

  • Bedienung per Tastatur

  • Untertitel für Videos

  • einfache, verständliche Sprache

Warum das wichtig ist:

Die Informationen sind für alle da. Wenn ein Teil der Studierenden sie nicht nutzen kann, werden diese Menschen benachteiligt. Dann ist die Website nicht wirklich gut.

Ein ganz simples Bild dazu:

Eine Rampe für Rollstuhlfahrer ist Accessibility in einem Gebäude.
Untertitel, klare Texte und Tastaturbedienung sind Accessibility im Internet.

Ohne Accessibility

Hier ist ein einfaches HTML-Beispiel für eine Website ohne Accessibility:

<!DOCTYPE html>
<html>
<head>
  <title>Uni Info</title>
</head>
<body style="background:white; color:#cccccc; font-size:10px;">

  <div onclick="alert('Menü geöffnet')">Menü</div>

  <h1>Willkommen</h1>

  <img src="pruefung.png">

  <p>Klicken Sie dort für wichtige Informationen zur Prüfungsanmeldung.</p>

  <video controls>
    <source src="info.mp4" type="video/mp4">
  </video>

  <form>
    <input type="text">
    <input type="text">
    <button>OK</button>
  </form>

</body>
</html>

Warum ist das nicht barrierefrei?

Dieses Beispiel hat viele Probleme:

  • Sehr kleine Schrift → schwer lesbar

  • Schlechter Kontrast (hellgrau auf weiß) → für viele kaum erkennbar

  • Menü nur per Mausklick → schlecht für Tastatur-Nutzer

  • Bild ohne Alternativtext → blinde Menschen verstehen den Inhalt nicht

  • Video ohne Untertitel → schlecht für gehörlose Menschen

  • Formular ohne Beschriftung → man weiß nicht, was man eingeben soll

  • Unklare Schaltfläche „OK“ → sagt nicht, was passiert

Was wäre besser?

Barrierefrei wäre zum Beispiel:

  • größere, gut lesbare Schrift

  • hoher Kontrast

  • alt-Text bei Bildern

  • echte Buttons statt klickbare divs

  • Labels für Formularfelder

  • Untertitel für Videos

Hier ein Beispiel aus dem schlechten Code:

<img src="pruefung.png">

Problem: Das Bild hat keine Beschreibung.

Besser wäre:

<img src="pruefung.png" alt="Link zur Prüfungsanmeldung">

Und statt:

<input type="text">

besser:

<label for="name">Name</label>
<input id="name" type="text">

Ich kann dir als Nächstes auch dieselbe Seite in barrierefreiem HTML zeigen.

Mit Accessibility

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uni Info</title>
</head>
<body style="background:white; color:black; font-size:18px; line-height:1.5;">

  <header>
    <h1>Willkommen auf der Uni-Informationsseite</h1>
    <nav aria-label="Hauptnavigation">
      <button type="button">Menü öffnen</button>
    </nav>
  </header>

  <main>
    <section>
      <h2>Prüfungsanmeldung</h2>
      <img src="pruefung.png" alt="Symbolbild zur Prüfungsanmeldung">
      <p>
        Hier finden Sie wichtige Informationen zur Prüfungsanmeldung.
      </p>
      <a href="pruefung-anmeldung.html">Zur Prüfungsanmeldung</a>
    </section>

    <section>
      <h2>Wichtige Informationen als Video</h2>
      <video controls>
        <source src="info.mp4" type="video/mp4">
        Ihr Browser unterstützt dieses Video nicht.
      </video>
      <p>Zum Video gehören Untertitel.</p>
    </section>

    <section>
      <h2>Kontaktformular</h2>
      <form>
        <div>
          <label for="name">Name</label>
          <input id="name" type="text" name="name">
        </div>

        <div>
          <label for="email">E-Mail</label>
          <input id="email" type="email" name="email">
        </div>

        <div>
          <button type="submit">Formular absenden</button>
        </div>
      </form>
    </section>
  </main>

</body>
</html>

Warum ist dieses Beispiel besser?

  • größere Schrift → besser lesbar

  • schwarzer Text auf weißem Hintergrund → guter Kontrast

  • Sprache lang="de" → hilfreich für Screenreader

  • echte Struktur mit header, nav, main, section → klarer Aufbau

  • Bild mit alt-Text → auch blinde Nutzer verstehen den Inhalt

  • Button statt klickbarer div → besser bedienbar

  • Formular mit label → jedes Feld ist verständlich

  • klarer Linktext und klarer Buttontext → man weiß, was passiert