Dokumenter skal have et <title>-element som hjælp til navigationen
Sidetitlen er det første, en skærmlæser siger, og den tekst, der vises i browserfaner og bogmærker. Uden den kan blinde kunder og alle med flere faner åbne ikke vide, om de er på produktsiden, i kurven eller i kassen.
- Regel-id
- document-title
- Kilde
- axe-core 4.13.0
- Alvorlighed
- Alvorlig
- Rettelsesniveau
- AUTO
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Sørg for, at hvert HTML-dokument indeholder et <title>-element, der ikke er tomt
Reglen tester kun det dokument på øverste niveau, som axe-core blev startet i. Titlerne på dokumenter inde i en iframe testes ikke.
Kontrollen aflæser document.title, altså titlen, som browseren angiver den i det øjeblik, ikke den rå HTML. Validiscans scanner venter på, at siden er indlæst, og at netværkstrafikken er faldet til ro, dog højst til en tidsgrænse, og starter derefter axe-core. En titel, som et script sætter inden da, er derfor den, der testes. Blanktegn i begyndelsen og slutningen af teksten fjernes, og hårde mellemrum regnes som mellemrum; er der noget tilbage, består siden. Et manglende <title> og et, der kun indeholder blanktegn, fejler begge. Evalueringen returnerer blot sand eller falsk, så resultatet »kræver gennemgang« forekommer ikke.
Ordlyden måles slet ikke, og titler sammenlignes ikke på tværs af sider. Den samme titel »Forside« på alle sidetyper består, og det gør webshoppens navn alene på en produktside også. Om en titel beskriver sin side og adskiller den fra de andre, må et menneske afgøre.
Sådan retter du det
Giv hver side en unik, beskrivende <title>, sat én gang i temaets layoutskabelon i formen »Sidenavn – Butiksnavn« (for eksempel »Uldtørklæde – Eksempelbutik«). Sørg for, at skabelonerne til søgning, konto og fejlsider også indeholder en titel.
WCAG-succeskriterier
- 2.4.2 Page Titled, niveau A
Afsnit i EN 301 549
| WCAG-kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.4.2 | 9.2.4.2 | 9.2.4.2 |
Hvor en opskrift retter det
Shopify: opskrift document-title-template
Vis før og efter (1)
layout/theme.focused.liquid Ændringer i layout/theme.focused.liquid: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <title></title> | |
| 14 | Tilføjet | <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: opskrift document-title-template
Vis før og efter (1)
Resources/views/storefront/layout/meta.html.twig Ændringer i Resources/views/storefront/layout/meta.html.twig: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 36 | 36 | {% endblock %} | |
| 37 | 37 | ||
| 38 | 38 | {% block layout_head_title %} | |
| 39 | Fjernet | <title>{{ page.metaTitle }}</title> | |
| 39 | Tilføjet | <title>{{ page.metaTitle|default(shop.name) }}</title> | |
| 40 | 40 | {% endblock %} | |
| 41 | 41 | ||
| 42 | 42 | {% block layout_head_stylesheet %} |
WooCommerce: opskrift document-title-template
Vis før og efter (1)
functions.php Ændringer i functions.php: 2 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | return (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ); | |
| 90 | Tilføjet | $custom_title = trim( (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ) ); | |
| 91 | Tilføjet | return '' !== $custom_title ? $custom_title : $title; | |
| 91 | 92 | } | |
| 92 | 93 | return $title; | |
| 93 | 94 | } |
Magento: opskrift document-title-template
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml Ændringer i app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml: 0 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <title> </title> | |
| 8 | 7 | </head> | |
| 9 | 8 | <body> | |
| 10 | 9 | <referenceBlock name="search_result_list" template="Magento_Catalog::product/list.phtml"/> |
Begynd med et gratis tjek af din webshop.
Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.
Bestil et gratis tjekEller skriv til info@validiscan.com.
Hvad det gratis tjek omfatter, og hvad det udelader- Du sender
- din webshops adresse
- Sider, der scannes
- op til 15
- Du får
- hver fejl, scanningen kan påvise, med siden og koden
- På din webshop
- kun offentlige sider; intet login, intet købt, ingen formularer sendt
- Hvad det ikke er
- et fuldt audit