HTML Head Bereich (Metainformationen im Quellcode)
[Materialsammlung]
Bedeutung des Head (Kopfbereich einer HTML-Datei)
Im <head> (Kopfbereich) einer HTML-Datei werden technische und inhaltliche Metainformationen festgelegt. Diese sind im Gegensatz zum BODY-Bereich nicht unmittelbar sichtbar, haben aber Auswirkungen auf die Darstellung und Funktionalitäten von Inhalten im BODY. Deshalb sind sie auch teilweise von Interesse für die Barrierefreiheit.
HTML Version
Richtlinien versuchen allgemein, für eine gewisse Zeit von den Umständen unabhängig brauchbar zu bleiben. Auch die WCAG Richtlinien sind so konzipiert, dass sie technische Varianten nicht diskriminieren, sondern auch mögliche Entwicklungen mitberücksichtigen. Es ist daher klar, dass einzelne Technologien von den WCAG nicht kommentiert werden und schon gar nicht Versionen der Entwicklung von Technoligen.
In den WCAG wird daher nicht explizit auf HTML referenziert und schon gar nicht auf einzelne HTML-Versionen. Trotzdem ist es bei der Entwicklung von Webtechnologien und Webseiten wichtig, die Verwendung von HTML-Versionen zu reflektieren.
Die HTML-Version ist aus folgenden Gründen von Relevanz für die Barrierefreiheit:
- Aktuelle HTML-Versionen verfügen über umfangreichere Funktionalitäten zur Verbesserung der Barrierefreiheit. Insbesondere HTML5 bietet durch die Regionen verbesserte Navigationsunterstützung.
- Menschen mit besonderen Bedürfnissen verfügen wohl nicht unbedingt über die aktuellste Arbeitsumgebung. Es muss daher überlegt werden, inwieweit Funktionalitäten auch für ältere Arbeitsumgebungen verfügbar gemacht werden (Betriebssysteme, Browser, Assistierende Technologien, …).
Sprache der Seite (lang)
Bedeutung der natürlichen Sprache eines Webauftritts bzw. einer Website
Die Festlegung der natürlichen Sprache (Deutsch, Englisch, …) ist für Menschen, die mit einer Sprachausgabe arbeiten höchst wichtig. Fehlt die Sprachauszeichnung oder ist sie fehlerhaft, versucht die Sprachausgabe etwa, einen deutschen Text mit der englischen Sprachausgabe vorzulesen. Das ist fatal unverständlich, wie alle verstehen werden, die eine Unterhaltung mit einem starken fremdsprachigen Akzent erlebt haben. Mit einer falschen Sprachausgabe klingt es nur noch viel schlimmer.
Ist die natürliche Sprache einer Webseite korrekt angegeben, müssen spezielle Zeichen, wie sie in vielen Sprachen vorkommen, auch nicht mehr extra codiert werden. (ä = ä)
Techniken zur Festlegung der natürlichen Sprache
In älteren HTML-Versionen erfolgt die Festlegung der Sprache gemeinsam mit anderen Anweisungen im HTML-Tag. Das kann folgendermaßen aussehen:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
In HTML5 sieht der Code dafür schon einfacher und übersichtlicher aus:
<html lang="de">
WCAG Richtlinie zur Kennzeichnung der natürlichen Sprache
In den WCAG 2.0 wird auch die exakte Kennzeichnung der natürlichen Sprache einer Seite als Level A Kriterium 2.4.2 angesehen:
Die natürliche Standardsprache jeder Webseite kann programmtechnisch festgelegt werden.
Anmerkung
Ich würde für die Alltagspraxis sinngemäß folgendermaßen präzisieren:
Die natürliche Standardsprache jeder Webseite ist technisch festgelegt.
Erfolgskriterium 3.1.1 Sprache der Seite (
Titel der Seite (<title>)
Bedeutung von Seitentiteln
Wenn Sie auf Ihren Bildschirm schauen, sehen sie rasch, wo Sie sich befinden. Blinde mit Screen Readern oder Sehbehinderte mit einem vergrößerten Bildschirmausschnitt haben keine entsprechende unmittelbare Wahrnehmung. Für sie ist es daher wichtig, dass ihnen technisch die Informationen über das aktive Bildschirmfenster bereitgestellt werden. Dies erfolgt über das TITLE-Attribut.
Der Titel der Seite wird im Browser üblicherweise in der oberen Fensterleiste angezeigt. Screen Reader lesen diese Titelleiste durch Drücken eines Shortcuts vor. Auf diese Weise ist der Titel rasch verfügbar. Dies erleichtert die Navigation zwischen geöffneten Anwendungen und Fenstern.
Auch Menschen mit Lernbeeinträchtigungen oder Gedächtnisproblemen profitieren von adäquaten Seitentiteln. Sie sehen oben immer, wo sie gerade umgehen.
Der Text des Seitentitels wird vielfach auch zur Beschriftung von Verlinkungen in sozialen Medien verwendet.
Der Titel der im HTML Kopfbereich festgelegt wird, erscheint auch als Treffertext in Suchmaschinen oder bei Suchfunktionalitäten auf Webauftritten. Dies sollte ein zusätzlicher Ansporn sein, sich beim Texting des Seitentitels auch im Hinblick auf SEO gründlich Gedanken zu machen.
Anmerkung
Der title einer Webseite ist vom TITLE-Attribut für HTML-Elemente zu unterscheiden.
Formulierung des Seitentitels
Der Titel muss für jede Webseite innerhalb eines Webauftritts individuell formuliert werden. Er muss den Inhalt oder die Funktionalität der jeweiligen Seite knapp und präzise wiedergeben.
In der Regel wird sich die Formulierung des Seitentitels eng an die Formulierung der Überschrift des Hauptinhalts anlehnen. Ausnahmen können spezielle Seiten oder im Einzelfall Seiten mit kreativen Hauptüberschriften sein. Es ist also nicht nur der Inhalt, sondern auch der Kontext beim Texting zu berücksichtigen.
<title> |
<h1> |
|---|---|
| Angebote | Angebote |
| Startseite | Willkommen! |
| Shakespeare | Sein oder nicht sein ... |
Länge des Seitentitels
Der Seitentitel muss aus folgenden Gründen knapp und präzise sein.
- Je kürzer, desto schneller wahrnehmbar, egal ob visuell oder mit Sprachausgabe.
- Eine kürzere Zeichenkette ist für Smart Phones mit kleinerem Display von Relevanz, aber auch allgemein bei vergrößerter Darstellung.
- Der Großbuchstabe W ist wesentlich breiter als ein i. Von der durchgängigen Verwendung von Großbuchstaben ist daher dringend abzuraten.
- Die Länge eines Seitentitels ist für die Wahrnehmbarkeit in Suchmaschinen von Relevanz. Nach einer bestimmten Pixelzahl wird der Text von Suchmaschinen einfach abgeschnitten. Für Google wird beispielsweise empfohlen, den Seitentitel auf 50 bis 60 Zeichen zu beschränken. Der Spielraum hängt von der Breite der einzelnen Zeichen ab.
Wenn der Projektname immer im Seitentitel verwendet werden soll, muss er jedenfalls sehr kurz sein. Wo möglich wird eine Abkürzung verwendet, etwa BSV
für Blinden- und Sehbehindertenverband
.
Projektbezeichnung im Seitentitel
Sollte der eigene Projektname in jedem Titel enthalten sein, und wenn ja, vor oder hinter dem eigentlichen Seiteninhalt? Welche folgender Varianten wäre also zu bevorzugen:
Angebote
Angebote - Zweiter Blick
Zweiter Blick: Angebote
Jede Variante birgt im Bezug auf die Useability Vor- und Nachteile in sich.
Ich habe mich für die letztere Variante auf zweiterblick.at entschieden, und zwar aus folgendem Grund:
Mein Screen Reader verfügt über eine Funktionalität, die alle offenen Programmfenster auflistet (JAWSTASTE + F10). Der Anfangsbuchstabe des Fenstertitels dient dabei quasi als Kurztaste. Wenn Zweiter Blick am Anfang all meiner Webseiten steht, komme ich durch Drücken der Taste Z sehr effizient auf das Fenster mit meiner Webseite. Das ist sehr praktisch, weil ich meist sehr viele Programmfenster parallel offen habe. Aber nicht nur ich: In der Windows Taskleiste am unteren Bildschirmrand wird ebenso der Anfang des Seitentitels eingeblendet.
Trennzeichen zwischen Seite und Unterseite
Wenn auf einer Webseite im Seitentitel sowohl eine Bezeichnung des gesamten Webauftritts, als auch der Unterseite vorgesehen wird, muss zwischen diesen beiden Ebenen ein passendes Trennzeichen eingefügt werden. Selbst für dieses kleine Zeichen gilt es, Überlegungen bei der Festlegung vorzunehmen:
Kriterien zur Auswahl eines Trennzeichens zwischen Seite und Unterseite
- Das Zeichen soll als Trennung zwischen den Ebenen Webauftritt und Webseite intuitiv verständlich oder bekannt sein.
- Das Zeichen soll horizontal möglichst wenig Platz benötigen.
- Das Zeichen soll visuell gut als Trennung wahrnehmbar sein.
- Das Zeichen darf für Screen Reader keine semantische Verwirrung bewirken. Insbesondere sollte getestet werden, wie das Trennzeichen von einer Sprachausgabe interpretiert wird.
- Ein Trennzeichen sollte natürlich innerhalb eines Webauftritts konsistent beibehalten werden.
Beispiele für Trennzeichen zwischen Seite und Unterseite
Unterschiedliche Trennzeichen stehen zur Abgrenzung zwischen der Bezeichnung des gesamten Webauftritts und der aktuellen Seite im Seitentitel zur Verfügung. Im Folgenden eine Liste möglicher Trennzeichen und deren Vor- und Nachteile:
| Zeichen | Überlegungen |
|---|---|
| : (Doppelpunkt) |
Der Doppelpunkt unmittelbar an die Bezeichnung des Webauftritts angefügt nimmt horizontal am wenigsten Platzt ein. Wenn er visuell vergleichsweise auch weniger wahrnehmbar ist, hat er sich auf vielen einschlägigen Webauftritten mit Affinität für Barrierefreiheit doch eingebürgert. Ich verwende ihn daher auch auf zweiterblick.at. |
| | (Senkrechter Strich) | Ein simpler vertikaler Strich hat den Vorteil, sehr schmal zu sein. Allerdings kann er visuell mit dem Großbuchstaben I oder dem Kleinbuchstaben l verwechselt werden. Ich würde ihn daher nur als die zweitbeste Wahl ansehen. Der senkrechte Strich wird auf der PC-Tastatur übrigens mit AltGr + < getippt. |
| > (Größerzeichen. Code: >) |
Das Größer-Zeichen ist auch in den Standortangaben (Breadcrumbs) als Trennzeichen zwischen Ebenen innerhalb eines Webauftritts gebräuchlich. Es repräsentiert also verständlich eine Seitenhierarchie. Allerdings interpretiert JAWS das >-Zeichen als Satzzeichen, das in der Standardkonfiguration überhaupt nicht vorgelesen wird und daher als Trennzeichen nicht wahrnehmbar ist. |
| - (Bindestrich) | Ein Bindestrich als Trennzeichen wird zu einem Problem, wenn ein Bindestrich auch im Titeltext benötigt wird. Zudem nimmt er verhältnismäßig viel horizontale Breite in Anspruch. Ich würde daher den Bindestrich nicht als Trennzeichen empfehlen. |
| • (Aufzählungszeichen. Code: •)
|
Ein • stellt visuell eine deutliche Abgrenzung dar. Allerdings wird das Zeichen vom Screen Reader als Kennzeichen für ein Element innerhalb einer Liste interpretiert. JAWS etwa liest das Zeichen als Aufzählungvor. Ich würde daher von dessen Verwendung abraten. |
Anmerkung: Für die Konfiguration eines Screen Readers empfiehlt es sich, die Ansage von Satzzeichen nicht gänzlich zu deaktivieren. Ansonsten wird bei der Nutzung einer Sprachausgabe nicht einmal ein : oder - als Trennzeichen wiedergegeben.
Links zum Seitentitel
Beschreibung der Seite (description)
Im HTML <head&/gt; können unterschiedliche Metainformationen festgelegt werden. Eine auch für die Zugänglichkeit sinnvolle Eintragung kann die DESCRIPTION (Beschreibung) sein. In ihr soll der Inhalt einer Seite knapp zusammengefasst werden. Suchmaschinen können diese Beschreibung bei den Suchergebnissen einblenden. Dadurch kann die Auswahl der Treffer erleichtert werden, wenn die Beschreibung angemessen ist.
Die Beschreibung sollte nicht länger als ca. 160 bis 180 Zeichen haben, wobei die zentralen Informationen in den ersten 70 bis 80 Zeichen enthalten sein sollten.
Beispiel
<meta name="description" content=" Barrierefreiheit im HTML Kopfbereich: Titel und Sprachkennzeichnung sind erforderlich, aber auch eine Beschreibung kann bei der Verwendung von Suchmaschinen helfen." />
Anmerkung
Für den Einsatz von Beschreibungen gibt es keine Richtlinien in den WCAG. Ich würde sie, wenn möglich trotzdem als kleiner Tipp für die Verständlichkeit des Web, respektive für Suchmaschinen, empfehlen.
Technisches Design der Darstellung (styles)
Im HTML <head> können und sollten auch Anweisungen für die visuelle Darstellung zentral für Elemente des Webauftritts festgelegt werden.
Scripts zur technischen Realisierung von Funktionalitäten
Scripts dienen vielfach bewusst oder unbewusst zur Verbesserung der Barrierefreiheit von Webseiten. Scripts, die ohne den Fokus oder die Berücksichtigung der Barrierefreiheit eingesetzt werden, sind jedoch allzu oft problematisch.
Es gibt leider kein verlässliches Framework, Scripts barrierefrei zu programmieren. Die einzige Möglichkeit, die Barrierefreiheit von einzelnen JavaScripts zu gewährleisten ist, sie einzeln zu prüfen und für jedes gefundene Problem eine individuelle Lösung zu finden.