Das Dokument

Neben der Struktur gibt es viele unterstützende HTML-Elemente, die bei der Erstellung bei der Entwicklung und Designentwicklung für digitale Barrierefreiheit. Während des gesamten In diesem Kurs zur Barrierefreiheit werden viele Elemente behandelt.

Dieses Modul konzentriert sich auf sehr spezifische Elemente, die in keine der in den anderen Modulen an, aber es ist hilfreich, sie zu verstehen.

Seitentitel

Der HTML-Code <title> definiert den Inhalt der Seite oder des Bildschirms, den ein Nutzer gleich starten wird. Nutzererfahrung. Sie finden sie in der Abschnitt <head> von ein HTML-Dokument ist und dem <h1> oder dem Hauptthema der Seite entspricht. Die wird im Browsertab angezeigt. So wissen Nutzer, aufgerufen, aber nicht auf der Website oder in der App selbst angezeigt.

In einer Single-Page-App (SPA) Die <title> wird etwas anders gehandhabt, da Nutzer nicht zwischen wie auf mehrseitigen Websites. Für SPAs ist der Wert des document.title kann manuell oder über ein Hilfspaket hinzugefügt werden. JavaScript-Framework. Bekanntgabe der aktualisierte Seitentitel Screenreader-Nutzer können zusätzliche Arbeit erfordern.

Aussagekräftige Seitentitel sind sowohl für Nutzer als auch Suchmaschinenoptimierung (SEO), und fügen Sie nicht zu viele Keywords hinzu. Da der Titel der erste die beim Besuch einer Seite durch einen AT-Nutzer angekündigt werden, muss diese korrekt, eindeutig und beschreibend, aber auch prägnant.

Beim Verfassen von Seitentiteln sollten Sie das Innere oder wichtigen Inhalten zuerst und fügen Sie dann die vorhergehenden Seiten oder Informationen hinzu. danach. So müssen sich AT-Nutzende nicht erst lange mit den Informationen auseinandersetzen, schon gehört haben.

Don'ts
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Do
<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. Jeder Seite sollte ein gültiges Sprachattribut hinzugefügt werden, da es dem AT signalisiert, welche Sprache verwendet werden soll.

Es wird empfohlen, zwei Zeichen ISO-Sprachcodes für eine bessere Abdeckung, da viele von ihnen erweiterten Sprachcodes.

Wenn ein Sprachattribut vollständig fehlt, wird für AT standardmäßig die Programmiersprache des Nutzers. Wenn beispielsweise AT auf Spanisch eingestellt ist, aber eine eine englische Website oder App aufgerufen hat, versucht die AT, die englischen Begriffe Text mit spanischen Akzenten und Kadenz. Diese Kombination führt zu einer digitales Produkt und frustrierte Nutzende.

Don'ts
<html>...</html>
Do
<html lang="en">...</html>

Mit dem lang-Attribut kann nur eine Sprache verknüpft werden. Das bedeutet, Das Attribut <html> kann nur eine Sprache haben, auch wenn es mehrere gibt Sprachen auf der Seite. Lege lang auf die primäre Sprache der Seite fest.

Don'ts
<html lang="ar,en,fr,pt">...</html>
<ph type="x-smartling-placeholder"></ph> Mehrere Sprachen werden nicht unterstützt.
Do
<html lang="ar">...</html>
<ph type="x-smartling-placeholder"></ph> Legen Sie nur die Hauptsprache der Seite fest. In diesem Fall ist die Sprache Arabisch.

Sprache des Bereichs

Sie können das Attribut „Sprache“ (lang) auch für Sprachwechsel im Inhalt selbst verwenden. Es gelten dieselben grundlegenden Regeln wie für das ganzseitige Sprachattribut, mit der Ausnahme, dass Sie es 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, an alle der enthaltenen Elemente. Legen Sie daher immer die primäre Sprache der Seite fest. lang-Attribut der obersten Ebene zuerst.

Fügen Sie für alle In-Page-Elemente, die in einer anderen Sprache verfasst sind, lang hinzu. dem entsprechenden Wrapper-Element hinzu. Dadurch wird die der obersten Ebene der Spracheinstellung hinzugefügt, bis das Element geschlossen ist.

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>
Do
<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>) ist zum Hosten einer anderen HTML-Seite oder von Inhalten Dritter auf der Seite verwendet wird. Es eine weitere Webseite innerhalb der übergeordneten Seite platziert. iFrames werden häufig die für Werbung, eingebettete Videos, Webanalysen und interaktive Inhalte.

Für den Zugriff auf <iframe> sind einige Aspekte zu berücksichtigen. Erstens sollte jede <iframe> mit unterschiedlichem Inhalt ein Titelelement im übergeordneten Tag enthalten. Dieser Titel bietet AT-Nutzern weitere Informationen zu den Inhalten im <iframe>.

Außerdem empfiehlt es sich, das Scrollen auf „Automatisch“ zu setzen. oder „Ja“ in den <iframe>-Tag-Einstellungen. So können Menschen mit eingeschränktem Sehvermögen im <iframe> zu Inhalten scrollen, die sie sonst möglicherweise nicht sehen könnten. Idealerweise wäre auch der <iframe>-Container in seiner Höhe und Breite flexibel.

Don'ts
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Do
<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 Zugänglichkeit von Dokumenten.

Ihre Website ist ein mehrsprachiges Online-Lehrbuch, in dem mehrere Sprachen auf einer Seite angezeigt werden. Wie lässt sich am besten die Sprache der Kopie für Hilfstechnologien erkennen?

Legen Sie eine primäre lang für die <html> und zusätzliche Sprachen für jedes Element fest, das Inhalte in einer anderen Sprache enthält.
Keine Sorge, das AT kann automatisch jede Sprache vorlesen.
Füge im Element <html> alle Sprachen hinzu. Beispiel: <html lang="en,lt,pl,pt">