Das Dokument

Neben der Struktur gibt es viele unterstützende HTML-Elemente, die beim Erstellen und Gestalten für digitale Barrierefreiheit berücksichtigt werden müssen. Im Kurs „Barrierefreiheit lernen“ werden viele Elemente behandelt.

In diesem Modul geht es um sehr spezifische Elemente, die nicht in die anderen Module passen, aber dennoch nützlich sind.

Seitentitel

Das HTML-Element <title> definiert den Inhalt der Seite oder des Bildschirms, die bzw. den ein Nutzer demnächst sehen wird. Sie befindet sich im Abschnitt <head> eines HTML-Dokuments und entspricht dem <h1> oder Hauptthema der Seite. Der Titelinhalt wird im Browser-Tab angezeigt und hilft Nutzern, zu verstehen, welche Seite sie besuchen. Er wird jedoch nicht auf der Website oder in der App selbst angezeigt.

In einer Single-Page-Anwendung (SPA) wird die <title> etwas anders gehandhabt, da Nutzer nicht wie auf Websites mit mehreren Seiten zwischen Seiten wechseln. Bei SPAs kann der Wert der Property document.title je nach JavaScript-Framework manuell oder über ein Hilfspaket hinzugefügt werden. Die aktualisierten Seitentitel für einen Screenreader-Nutzer anzukündigen, kann etwas mehr Aufwand erfordern.

Aussagekräftige Seitentitel sind sowohl für Nutzer als auch für die Suchmaschinenoptimierung (SEO) von Vorteil. Sie sollten es jedoch nicht übertreiben und viele Keywords hinzufügen. Da der Titel das Erste ist, was vorgelesen wird, wenn ein Nutzer mit einer AT eine Seite besucht, muss er zutreffend, eindeutig, beschreibend und gleichzeitig prägnant sein.

Beim Schreiben von Seitentiteln ist es auch am besten, die Innenseite oder wichtige Inhalte zuerst zu platzieren und dann alle vorhergehenden Seiten oder Informationen hinzuzufügen. So müssen Nutzer von AT nicht die Informationen anhören, die sie bereits gehört haben.

Was Sie nicht tun sollten
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Das sollten Sie tun:
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Sprache

Seitensprache

Mit dem Attribut „page language“ (lang) wird die Standardsprache für die gesamte Seite festgelegt. Dieses Attribut wird dem <html>-Tag hinzugefügt. Jeder Seite sollte ein gültiges Sprachattribut hinzugefügt werden, da es angibt, welche Sprache die AT verwenden soll.

Wir empfehlen, zweistellige ISO-Sprachcodes zu verwenden, um eine größere AT-Abdeckung zu erzielen, da viele von ihnen keine erweiterten Sprachcodes unterstützen.

Wenn ein Sprachattribut vollständig fehlt, wird standardmäßig die vom Nutzer programmierte Sprache verwendet. Wenn beispielsweise eine AT auf Spanisch eingestellt war, ein Nutzer aber eine englische Website oder App besucht hat, hat die AT versucht, den englischen Text mit spanischen Akzenten und Rhythmus vorzulesen. Diese Kombination führt zu einem unbrauchbaren digitalen Produkt und einem frustrierten Nutzer.

Was Sie nicht tun sollten
<html>...</html>
Das sollten Sie tun:
<html lang="en">...</html>

Dem Attribut „lang“ kann nur eine Sprache zugeordnet sein. Das bedeutet, dass das Attribut <html> nur eine Sprache haben kann, auch wenn auf der Seite mehrere Sprachen vorhanden sind. Legen Sie für lang die primäre Sprache der Seite fest.

Was Sie nicht tun sollten
<html lang="ar,en,fr,pt">...</html>
 Mehrere Sprachen werden nicht unterstützt.
Das sollten Sie tun:
<html lang="ar">...</html>
 Legen Sie nur die primäre Sprache der Seite fest. In diesem Fall ist die Sprache Arabisch.

Sprache des Abschnitts

Sie können das Sprachattribut (lang) auch für Sprachwechsel im Inhalt selbst verwenden. Es gelten dieselben grundlegenden Regeln wie für das Sprachattribut für die ganze Seite. Sie fügen es jedoch dem entsprechenden In-Page-Element und nicht dem <html>-Tag hinzu.

Die Sprache, die Sie dem <html>-Element hinzufügen, wird auf alle enthaltenen Elemente übertragen. Legen Sie daher immer zuerst die primäre Sprache der Seite mit dem lang-Attribut auf oberster Ebene fest.

Fügen Sie für alle In-Page-Elemente, die in einer anderen Sprache verfasst sind, das Attribut lang dem entsprechenden Wrapper-Element hinzu. Dadurch wird die Spracheinstellung auf oberster Ebene überschrieben, bis das Element geschlossen wird.

Was Sie nicht tun sollten
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
Das sollten Sie tun:
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iFrames

Das iFrame-Element (<iframe>) wird verwendet, um eine andere HTML-Seite oder Inhalte eines Drittanbieters auf der Seite zu hosten. Dabei wird im Grunde eine andere Webseite in die übergeordnete Seite eingefügt. iFrames werden häufig für Werbung, eingebettete Videos, Webanalyse und interaktive Inhalte verwendet.

Damit Ihre <iframe> barrierefrei ist, müssen Sie einige Aspekte berücksichtigen. Zuerst sollte jedes <iframe> mit unterschiedlichen Inhalten ein title-Element innerhalb des übergeordneten Tags enthalten. Dieser Titel liefert Nutzern von AT weitere Informationen zum Inhalt von <iframe>.

Zweitens empfiehlt es sich, das Scrollen in den <iframe>-Tag-Einstellungen auf „auto“ oder „yes“ zu setzen. So können Menschen mit eingeschränktem Sehvermögen Inhalte im <iframe> aufrufen, die sie sonst möglicherweise nicht sehen könnten. Im Idealfall ist der <iframe>-Container auch in Höhe und Breite flexibel.

Was Sie nicht tun sollten
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Das sollten Sie tun:
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>
Zurück
Inhaltsstruktur
Weiter
Tastaturfokus