Das Dokument

Neben der Struktur gibt es viele unterstützende HTML-Elemente, die beim Entwickeln und Entwerfen für die digitale Barrierefreiheit berücksichtigt werden müssen. Im gesamten Learn Accessibility-Kurs werden viele Elemente behandelt.

Dieses Modul konzentriert sich auf sehr spezifische Elemente, die in keines der anderen Module passen, aber nützlich zu verstehen sind.

Seitentitel

Das HTML-Element <title> definiert den Inhalt der Seite oder des Bildschirms, den ein Nutzer sehen soll. Sie befindet sich im Abschnitt <head> eines HTML-Dokuments und entspricht <h1> oder dem Hauptthema der Seite. Der Titel des Titels wird auf dem Browsertab angezeigt, damit Nutzer nachvollziehen können, welche Seite sie besuchen. Er wird jedoch nicht auf der Website oder in der App selbst angezeigt.

In einer Single-Page App (SPA) wird die <title> anders gehandhabt, da Nutzer anders als auf mehrseitigen Websites zwischen Seiten wechseln. Bei SPAs kann der Wert des Attributs document.title je nach JavaScript-Framework manuell oder über ein Hilfspaket hinzugefügt werden. Die Ankündigung der aktualisierten Seitentitel für Nutzer von Screenreadern kann zusätzliche Arbeit erfordern.

Aussagekräftige Seitentitel sind sowohl für Nutzer als auch für die Suchmaschinenoptimierung (SEO) geeignet. Sie sollten jedoch nicht zu viele Keywords hinzufügen. Da der Titel das erste Mal ist, was angekündigt wird, wenn ein AT-Nutzer eine Seite besucht, muss er präzise, eindeutig und beschreibend, aber auch prägnant sein.

Beim Verfassen von Seitentiteln empfiehlt es sich außerdem, die innere Seite oder wichtige Inhalte zuerst zu laden und dann alle vorangehenden Seiten oder Informationen hinzuzufügen. Auf diese Weise müssen AT-Nutzende nicht erst nach Informationen suchen, die sie bereits gehört haben.

Don'ts
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Das sollten Sie tun:
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Sprache

Sprache der Seite

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

Es empfiehlt sich, zweistellige ISO-Sprachcodes für eine bessere Abdeckung zu verwenden, da viele dieser Codes keine erweiterten Sprachcodes unterstützen.

Wenn ein Sprachattribut vollständig fehlt, wird der AT standardmäßig in der vom Nutzer programmierten Sprache verwendet. Wenn beispielsweise ein AT auf Spanisch festgelegt war, ein Nutzer jedoch eine englische Website oder App besucht hat, versucht der AT, den englischen Text mit spanischen Akzenten und der Häufigkeit zu lesen. Diese Kombination führt zu einem unbrauchbaren digitalen Produkt und einer frustrierten Nutzenden.

Don'ts
<html>...</html>
Das sollten Sie tun:
<html lang="en">...</html>

Dem Attribut "lang" kann nur eine Sprache zugewiesen werden. Das bedeutet, dass das Attribut <html> nur eine Sprache haben kann, auch wenn die Seite mehrere Sprachen enthält. Legen Sie lang auf die primäre Sprache der Seite fest.

Don'ts
<html lang="ar,en,fr,pt">...</html>
Mehrere Sprachen werden nicht unterstützt.
Das sollten Sie tun:
<html lang="ar">...</html>
Lege nur die Hauptsprache der Seite fest. In diesem Fall ist die Sprache Arabisch.

Sprache des Bereichs

Sie können das Attribut „language“ (lang) auch für den Sprachwechsel im Content verwenden. Es gelten dieselben grundlegenden Regeln wie für das Sprachattribut für die ganze Seite, mit der Ausnahme, dass Sie das Attribut dem entsprechenden In-Page-Element und nicht dem <html>-Tag hinzufügen.

Denken Sie daran, dass die Sprache, die Sie dem <html>-Element hinzufügen, auf alle enthaltenen Elemente übertragen wird. Legen Sie daher immer die Hauptsprache des Attributs lang auf oberster Ebene der Seite fest.

Fügen Sie für In-Page-Elemente, die in einer anderen Sprache geschrieben sind, das Attribut lang dem 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>
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 den Inhalt eines Drittanbieters auf der Seite zu hosten. Im Grunde wird eine weitere Webseite innerhalb der übergeordneten Seite platziert. iFrames werden häufig für Werbung, eingebettete Videos, Webanalysen und interaktive Inhalte verwendet.

Damit dein <iframe> barrierefrei ist, musst du einige Aspekte berücksichtigen. Zuerst sollte jedes <iframe>-Element mit unterschiedlichem Inhalt ein Titelelement im übergeordneten Tag enthalten. Dieser Titel liefert AT-Nutzern weitere Informationen über den Inhalt in <iframe>.

Als Best Practice hat es sich bewährt, das Scrollen in den <iframe>-Tag-Einstellungen auf „Automatisch“ oder „Ja“ zu setzen. So können Menschen mit eingeschränktem Sehvermögen in <iframe> zu Inhalten scrollen, die sie sonst möglicherweise nicht sehen würden. Idealerweise wäre der <iframe>-Container auch in Höhe und Breite flexibel.

Don'ts
<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>

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über die Barrierefreiheit von Dokumenten.

Ihre Website ist ein mehrsprachiges Online-Lehrbuch, in dem mehrere Sprachen auf einer Seite angezeigt werden. Wie lässt sich die Sprache des Textes für assistive Technologien am besten bestimmen?

Keine Sorge, der AT kann automatisch jede Sprache lesen.
Auch wenn einige AT über eine Spracherkennung verfügen, können Sie nicht garantieren, dass er richtig raten wird.
Schließen Sie alle Sprachen im <html>-Element ein. Beispiel: <html lang="en,lt,pl,pt">
Dem Attribut lang kann nur eine Sprache zugeordnet sein.
Lege eine primäre lang für <html> sowie zusätzliche Sprachen für jedes Element fest, das Inhalte in einer anderen Sprache hat.
Der AT verlässt sich zum Lesen des Dokuments hauptsächlich auf das Sprachattribut <html>. Wenn du mehrsprachigen Text hast, musst du dem entsprechenden Element (z. B. einem Abschnitt oder Absatz) ein lang-Attribut mit dem korrekten aus zwei Buchstaben bestehenden ISO-Code hinzufügen.