Los documentos deben tener un elemento <title> que facilite la navegación
El título de la página es lo primero que anuncia un lector de pantalla y el texto que aparece en las pestañas y los marcadores del navegador. Sin él, los clientes ciegos y cualquiera que tenga varias pestañas abiertas no pueden saber si están en la página de producto, en el carrito o en el proceso de pago.
- ID de la regla
- document-title
- Origen
- axe-core 4.13.0
- Impacto
- Grave
- Nivel de corrección
- AUTO
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Comprueba que cada documento HTML contiene un elemento <title> no vacío
La regla solo comprueba el documento de nivel superior en el que se inició axe-core; los títulos de los documentos dentro de un iframe no se comprueban.
La comprobación lee document.title, el título tal como lo comunica el navegador en ese momento, no el HTML sin procesar. El escáner de Validiscan inicia axe-core después de esperar, con un tiempo máximo, a que la página cargue y cese su actividad de red, así que el título que un script establezca antes de ese momento es el que se comprueba. Al texto se le quitan los espacios iniciales y finales, y los espacios de no separación cuentan como espacios; si queda algo, la página supera la prueba. Fallan tanto un <title> ausente como uno que solo contiene espacios en blanco. La evaluación devuelve un simple verdadero o falso, así que no existe el resultado «pendiente de revisión».
No se mide ningún aspecto de la redacción, y los títulos no se comparan entre páginas. El mismo título «Inicio» en todas las plantillas supera la prueba, igual que el nombre de la tienda por sí solo en una página de producto. Si un título describe su página y la distingue de las demás es algo que debe decidir una persona.
Cómo corregirlo
Dé a cada página un <title> único y descriptivo, definido una sola vez en la plantilla base del tema con el formato «Nombre de la página – Nombre de la tienda» (por ejemplo «Bufanda de lana – Tienda de ejemplo»). Asegúrese de que las plantillas de búsqueda, de cuenta de cliente y de error también generan un título.
Criterios de conformidad de las WCAG
- 2.4.2 Page Titled, nivel A
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 2.4.2 | 9.2.4.2 | 9.2.4.2 |
Dónde lo corrige una receta
Shopify: receta document-title-template
Mostrar el antes y el después (1)
layout/theme.focused.liquid Cambios en layout/theme.focused.liquid (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Eliminada | <title></title> | |
| 14 | Añadida | <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: receta document-title-template
Mostrar el antes y el después (1)
Resources/views/storefront/layout/meta.html.twig Cambios en Resources/views/storefront/layout/meta.html.twig (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 36 | 36 | {% endblock %} | |
| 37 | 37 | ||
| 38 | 38 | {% block layout_head_title %} | |
| 39 | Eliminada | <title>{{ page.metaTitle }}</title> | |
| 39 | Añadida | <title>{{ page.metaTitle|default(shop.name) }}</title> | |
| 40 | 40 | {% endblock %} | |
| 41 | 41 | ||
| 42 | 42 | {% block layout_head_stylesheet %} |
WooCommerce: receta document-title-template
Mostrar el antes y el después (1)
functions.php Cambios en functions.php (líneas añadidas: 2; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Eliminada | return (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ); | |
| 90 | Añadida | $custom_title = trim( (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ) ); | |
| 91 | Añadida | return '' !== $custom_title ? $custom_title : $title; | |
| 91 | 92 | } | |
| 92 | 93 | return $title; | |
| 93 | 94 | } |
Magento: receta document-title-template
Mostrar el antes y el después (1)
app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml Cambios en app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml (líneas añadidas: 0; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Eliminada | <title> </title> | |
| 8 | 7 | </head> | |
| 9 | 8 | <body> | |
| 10 | 9 | <referenceBlock name="search_result_list" template="Magento_Catalog::product/list.phtml"/> |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa