Wenn wir über den „Seitentitel“ sprechen, sprechen wir nicht unbedingt über den Text im primären h1 -Element. Vielmehr ist der Text, der im Browser-Tab erscheint, derselbe Text, der im title im head des Dokuments platziert wird.
Obwohl dieser Inhalt häufig den des primären h1 widerspiegelt, ist es wichtig zu wissen, warum dieser Inhalt für die Schaffung einer barrierefreien Benutzererfahrung von entscheidender Bedeutung ist und wann er aktualisiert werden muss.
Der Seitentitel ist die erste Information, die von einem Screenreader angesagt wird.
Der Grund, warum ein klarer und eindeutiger Titelinhalt für jede Seite der Website wichtig ist, liegt in der Tatsache, dass dies die erste Information ist, die von einem Screenreader angesagt wird.
Um einen Kontext dafür bereitzustellen, wo sich der Benutzer gerade in einer Aufgabe befindet oder ob er auf einen Link von einer Social-Media-Website direkt zu einer Seite geklickt hat, ist es wichtig, diese Informationen sofort bereitzustellen. Der Titeltext hilft dabei, ein sofortiges Feedback darüber zu geben, wo sich der Benutzer gerade befindet.
Titeltext schreiben
Was im title landet, hängt tatsächlich von der aktuellen Seite oder dem Status der Site ab. Idealerweise lautet der Informationsfluss im title von links nach rechts: Zustand | Seite | Seite? ˅.
Zum Beispiel würde ein Homepage-Titel einfach den Seitennamen widerspiegeln:
<title>Website</title>
Der Titel für eine Kontaktseite könnte lauten:
<title>Contact | Website</title>
Ein Blogbeitrag würde den title des Beitrags im Titelelement enthalten:
<title>How to make pasta sauce | Website</title> Beachten Sie, dass die Seitenhierarchie nicht in den Titel aufgenommen wird. Dadurch soll verhindert werden, dass Screenreader zu viele Informationen auf einmal ankündigen.
Aktualisieren des Zustands
Die Verwendung des title zur Übermittlung des aktuellen Zustands einer Website ist ein zusätzlicher Bonus für jemanden, der einen Bildschirmleser verwendet. Damit erhalten sie die Nachricht sofort und können sich das Durchwühlen von Seiteninhalten ersparen, um den aktuellen Stand der Dinge zu finden.
Wenn beispielsweise jemand ein Formular mit ungültigen Daten übermittelt, was zu einer vollständigen Seitenaktualisierung führt, wäre es hilfreich, wenn der Titel diesen Status widerspiegelt, um den Benutzer schnell über den Fehlerstatus des Formulars zu informieren.
<title>Error | Contact | Website</title>
Wenn jemand ein mehrstufiges Formular ausfüllt, vielleicht einen Online-Kauf tätigt, könnte der Titel den aktuellen Schritt des Prozesses widerspiegeln, den er gerade abschließen wird.
<title>Payment information (Step 3 of 4) | Shop | Website</title> Mit klaren und eindeutigen title profitieren sowohl sehende Benutzer als auch Benutzer von Screenreadern davon, genau zu wissen, wo sie sich auf Ihrer Website befinden.
Single-Page-Apps
Also, hier ist das Problem. Beim Durchsuchen einer Single-Page-App (SPA) mit einem Screenreader neigt das Laden einer neuen Seite oder Ansicht dazu, die anfängliche Seitenankündigung zu wiederholen. Wieso den? In der Regel bleibt das title bei einer SPA statisch. Dies liegt daran, dass App-Autoren ihren Wert einmal in der globalen Vorlage festgelegt haben und nie wieder wirklich darüber nachdenken.
Wie wir gelernt haben, ist das Festlegen eines eindeutigen Werts für den title entscheidend für die Generierung einer positiven Benutzererfahrung. Wie lösen wir also dieses Problem des Festlegens eines eindeutigen Seitentitels in einer SPA? Eine der einfachsten Methoden ist die Verwendung der globalen JavaScript-Eigenschaft document.title .
Beispiel reagieren
Ein Beispiel für die Verwendung dieser globalen Eigenschaft ist innerhalb einer React- componentDidMount() Lebenszyklusmethode :
componentDidMount() { document.title = 'My page title'; }
Der Code innerhalb dieser Funktion wird ausgeführt, wenn die Komponente auf den Bildschirm geladen wird. Die einzelne Zeile innerhalb dieser Funktion verwendet document.title , um einen Zeichenfolgenwert von „Mein Seitentitel“ festzulegen. Wenn diese Komponente also geladen wird, wird der title auf diesen Wert gesetzt.
Es ist erwähnenswert, dass document.title nicht spezifisch oder einzigartig für React ist; Diese Methode kann in jeder JavaScript-basierten SPA oder Website verwendet werden.
WCAG-Erfolgskriterien
Dies kommt auf 2.4.2 zurück: Seite mit Titel, wo es heißt:
"Webseiten haben Titel, die das Thema oder den Zweck beschreiben."