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.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<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.
<html>...</html>
<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.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
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.
<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>) 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.
<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 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?
<html> alle Sprachen hinzu. Beispiel: <html lang="en,lt,pl,pt">lang kann nur eine Sprache verknüpft werden.lang für die <html> und zusätzliche Sprachen für jedes Element fest, das Inhalte in einer anderen Sprache enthält.<html>. Wenn Sie mehrsprachigen Text haben, müssen Sie dem entsprechenden Element (z. B. einem Abschnitt oder Absatz) ein lang-Attribut mit dem korrekten aus zwei Buchstaben bestehenden ISO-Code hinzufügen.