Das Dokument

Neben der Struktur gibt es viele unterstützende HTML-Elemente, die Sie beim Entwerfen und Entwickeln für die digitale Barrierefreiheit berücksichtigen sollten. Im Kurs „Barrierefreiheit lernen“ werden viele Elemente behandelt.

In diesem Modul liegt der Schwerpunkt auf sehr spezifischen Elementen, die in keines der anderen Module passen, aber nützlich sind.

Seitentitel

Das HTML-Element <title> definiert den Inhalt der Seite oder des Bildschirms, den ein Nutzer sehen wird. Sie finden sie im Abschnitt <head> eines HTML-Dokuments und entspricht dem <h1> oder dem Hauptthema der Seite. Der Titelinhalt wird auf dem Browsertab angezeigt und hilft Nutzern zu verstehen, welche Seite sie gerade 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 behandelt, da Nutzer nicht wie auf Websites mit mehreren Seiten zwischen Seiten wechseln. Bei SPAs kann der Wert des Attributs document.title je nach JavaScript-Framework manuell oder über ein Hilfspaket hinzugefügt werden. Es kann etwas zusätzliche Arbeit erfordern, Screenreader-Nutzern die aktualisierten Seitentitel anzukündigen.

Beschreibende Seitentitel sind sowohl für Nutzer als auch für die Suchmaschinenoptimierung (SEO) von Vorteil. Geben Sie jedoch nicht zu viele Keywords an. Da der Titel das erste ist, was ein Nutzer mit Sprachaktivierung hört, wenn er eine Seite besucht, muss er korrekt, eindeutig und aussagekräftig, aber auch prägnant sein.

Bei der Erstellung von Seitentiteln empfiehlt es sich außerdem, zuerst die Hauptseite oder wichtige Inhalte an den Anfang zu stellen und dann die vorangehenden Seiten oder Informationen hinzuzufügen. So müssen sich Nutzer von AT nicht noch einmal Informationen anhören, die sie bereits kennen.

Don'ts

<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>

<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Sprache

Seitensprache

Mit dem Attribut „Seitensprache“ (lang) wird die Standardsprache für die gesamte Seite festgelegt. Dieses Attribut wird dem <html>-Tag hinzugefügt. Jede Seite sollte ein gültiges Sprachattribut haben, da es dem AT signalisiert, welche Sprache verwendet werden soll.

Wir empfehlen, ISO-Sprachcodes mit zwei Zeichen zu verwenden, um eine größere Abdeckung zu erzielen, da viele von ihnen erweiterte Sprachcodes nicht unterstützen.

Wenn ein Sprachattribut fehlt, wird die programmierte Sprache des Nutzers als Standard verwendet. Wenn beispielsweise eine Sprachausgabe auf Spanisch eingestellt ist, ein Nutzer aber eine englischsprachige Website oder App besucht, versucht die Sprachausgabe, den englischen Text mit spanischen Akzenten und einer spanischen Kadenz zu lesen. Diese Kombination führt zu einem unbrauchbaren digitalen Produkt und frustrierten Nutzern.

Don'ts

<html>...</html>

<html lang="en">...</html>

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

Don'ts

<html lang="ar,en,fr,pt">...</html>

Mehrere Sprachen werden nicht unterstützt.

<html lang="ar">...</html>

Legen Sie nur die primäre Sprache der Seite fest. In diesem Fall ist die Sprache Arabisch.

Sprache des Abschnitts

Du kannst das Sprachattribut (lang) auch für Sprachwechsel in den Inhalten selbst verwenden. Es gelten dieselben grundlegenden Regeln wie für das Sprachattribut für die gesamte Seite, mit der Ausnahme, dass es dem entsprechenden Element auf der Seite hinzugefügt wird und nicht dem <html>-Tag.

Die Sprache, die Sie dem <html>-Element hinzufügen, wird kaskadierend auf alle enthaltenen Elemente angewendet. Legen Sie daher immer zuerst das lang-Attribut der obersten Ebene der Seite als Hauptsprache fest.

Fügen Sie allen In-Page-Elementen, die in einer anderen Sprache verfasst sind, dieses lang-Attribut zum entsprechenden Wrapper-Element hinzu. Dadurch wird die Spracheinstellung der obersten Ebene überschrieben, bis dieses Element geschlossen wird.

Don'ts

<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>

<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 von Drittanbietern auf der Seite zu hosten. Es wird im Grunde eine andere Webseite in die übergeordnete Seite eingefügt. IFrames werden häufig für Werbung, eingebettete Videos, Webanalysen und interaktive Inhalte verwendet.

Es gibt einige Aspekte, die Sie beachten sollten, um Ihre <iframe> barrierefrei zu gestalten. Erstens: Jedes <iframe> mit unterschiedlichen Inhalten sollte ein Titelelement innerhalb des übergeordneten Tags enthalten. Dieser Titel enthält zusätzliche Informationen zu den Inhalten in der <iframe>.

Zweitens: Es empfiehlt sich, das Scrollen in den <iframe>-Tag-Einstellungen auf „auto“ oder „yes“ festzulegen. So können Nutzer mit eingeschränktem Sehvermögen Inhalte in der <iframe> scrollen, die sie sonst möglicherweise nicht sehen würden. Idealerweise sollte der <iframe>-Container auch in Bezug auf Höhe und Breite flexibel sein.

Don'ts

<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>

<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

Wissen testen

Testen Sie Ihr Wissen über die Barrierefreiheit von Dokumenten.

Ihre Website ist ein mehrsprachiges Online-Lehrbuch, auf dem mehrere Sprachen auf einer Seite angezeigt werden. Wie können Sie Hilfstechnologien am besten die Sprache des Texts mitteilen?

Keine Sorge, die Bedienungshilfe kann jede Sprache automatisch lesen.

Einige ATs können zwar die Sprache erkennen, aber es gibt keine Garantie dafür, dass die Sprache richtig erkannt wird.

Fügen Sie alle Sprachen in das <html>-Element ein. Beispiel: <html lang="en,lt,pl,pt">

Dem lang-Attribut kann nur eine Sprache zugeordnet werden.

Legen Sie eine primäre lang für die <html> fest und zusätzliche Sprachen für alle Elemente, die Inhalte in einer anderen Sprache enthalten.

Der AT verwendet hauptsächlich das Sprachattribut <html>, um das Dokument zu lesen. Wenn Sie mehrsprachigen Text haben, fügen Sie dem entsprechenden Element (z. B. einem Abschnitt oder Absatz) das Attribut lang mit dem richtigen zweistelligen ISO-Code hinzu.