Dokumente müssen ein <title>-Element haben, das die Navigation erleichtert
Der Seitentitel ist das Erste, was ein Screenreader ansagt, und der Text, der in Browser-Tabs und Lesezeichen erscheint. Ohne ihn können blinde Kundinnen und Kunden und alle, die mehrere Tabs geöffnet haben, nicht erkennen, ob sie auf der Produktseite, im Warenkorb oder im Checkout sind.
- Regel-ID
- document-title
- Quelle
- axe-core 4.13.0
- Auswirkung
- Schwerwiegend
- Korrekturstufe
- AUTO
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Sicherstellen, dass jedes HTML-Dokument ein nicht leeres <title>-Element enthält
Die Regel testet nur das Dokument der obersten Ebene, in dem axe-core gestartet wurde. Die Titel von Dokumenten in einem iframe werden nicht getestet.
Die Prüfung liest document.title, also den Titel, den der Browser in diesem Moment meldet, nicht das rohe HTML. Bevor der Scanner von Validiscan axe-core startet, wartet er bis zu einem Zeitlimit darauf, dass die Seite geladen ist und ihr Netzwerkverkehr zur Ruhe kommt. Setzt ein Skript den Titel bis dahin, wird dieser Titel getestet. Leerraum am Anfang und Ende des Textes wird entfernt, geschützte Leerzeichen zählen dabei als Leerzeichen; bleibt etwas übrig, besteht die Seite. Ein fehlendes <title>-Element gilt ebenso als Verstoß wie eines, das nur Leerraum enthält. Die Auswertung liefert schlicht wahr oder falsch. Ein Ergebnis „zu prüfen“ gibt es daher nicht.
Den Wortlaut misst die Regel nicht, und sie vergleicht die Titel verschiedener Seiten nicht miteinander. Derselbe Titel „Startseite“ auf jedem Seitentyp besteht, ebenso der Shopname allein auf einer Produktseite. Ob ein Titel seine Seite beschreibt und sie von den anderen unterscheidet, muss ein Mensch entscheiden.
So wird es behoben
Geben Sie jeder Seite einen eindeutigen, aussagekräftigen <title>, den Sie einmal im Layout-Template des Themes im Format „Seitenname – Shopname“ setzen (zum Beispiel „Wollschal – Beispielshop“). Stellen Sie sicher, dass auch die Templates für Suche, Kundenkonto und Fehlerseiten einen Titel ausgeben.
WCAG-Erfolgskriterien
- 2.4.2 Page Titled, Stufe A
Abschnitte der EN 301 549
| WCAG-Kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.4.2 | 9.2.4.2 | 9.2.4.2 |
Wo ein Rezept es behebt
Shopify: Rezept document-title-template
Vorher und nachher anzeigen (1)
layout/theme.focused.liquid Änderungen an layout/theme.focused.liquid: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 11 | 11 | <meta charset="utf-8"> | |
| 12 | 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 13 | 13 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 14 | Entfernt | <title></title> | |
| 14 | Hinzugefügt | <title>{{ page_title }}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}</title> | |
| 15 | 15 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 16 | 16 | <!-- Theme assets: //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/ (served locally by the fixture server) --> | |
| 17 | 17 | {% render 'meta-tags' %} |
Shopware: Rezept document-title-template
Vorher und nachher anzeigen (1)
Resources/views/storefront/layout/meta.html.twig Änderungen an Resources/views/storefront/layout/meta.html.twig: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 36 | 36 | {% endblock %} | |
| 37 | 37 | ||
| 38 | 38 | {% block layout_head_title %} | |
| 39 | Entfernt | <title>{{ page.metaTitle }}</title> | |
| 39 | Hinzugefügt | <title>{{ page.metaTitle|default(shop.name) }}</title> | |
| 40 | 40 | {% endblock %} | |
| 41 | 41 | ||
| 42 | 42 | {% block layout_head_stylesheet %} |
WooCommerce: Rezept document-title-template
Vorher und nachher anzeigen (1)
functions.php Änderungen an functions.php: 2 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 87 | 87 | if ( is_singular() && metadata_exists( 'post', get_the_ID(), '_kb_seo_title' ) ) { | |
| 88 | 88 | // VALIDISCAN-SEED document-title: the Contact page has the field saved empty, and an empty | |
| 89 | 89 | // string wins over the generated title, so <title> is empty there. | |
| 90 | Entfernt | return (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ); | |
| 90 | Hinzugefügt | $custom_title = trim( (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ) ); | |
| 91 | Hinzugefügt | return '' !== $custom_title ? $custom_title : $title; | |
| 91 | 92 | } | |
| 92 | 93 | return $title; | |
| 93 | 94 | } |
Magento: Rezept document-title-template
Vorher und nachher anzeigen (1)
app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml Änderungen an app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml: 0 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 4 | 4 | <!-- VALIDISCAN-SEEDED document-title: a "hide the SEO title" customisation sets an empty page title, | |
| 5 | 5 | so the rendered <title></title> is empty. The visible h1 is set separately by the page.main.title block. | |
| 6 | 6 | Fixed variant: <title>Search results for: 'jacket'</title>. --> | |
| 7 | Entfernt | <title> </title> | |
| 8 | 7 | </head> | |
| 9 | 8 | <body> | |
| 10 | 9 | <referenceBlock name="search_result_list" template="Magento_Catalog::product/list.phtml"/> |
Beginnen Sie mit einem kostenlosen Check Ihres Shops.
Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.
Kostenlosen Check anfordernOder schreiben Sie an info@validiscan.com.
Was der kostenlose Check umfasst und was nicht- Sie senden
- die Adresse Ihres Shops
- Gescannte Seiten
- bis zu 15
- Sie erhalten
- jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
- In Ihrem Shop
- nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
- Was er nicht ist
- ein vollständiges Audit