El idioma de la página debe estar declarado y coincidir con el contenido
Los lectores de pantalla usan el idioma declarado para elegir la pronunciación. Una tienda en alemán que declara el inglés, algo habitual cuando cada traducción conserva el idioma predeterminado, se lee con el acento equivocado, y los nombres de productos, los precios y las instrucciones se vuelven difíciles de entender. La traducción automática y el corrector ortográfico del navegador también dependen de ello.
- ID de la regla
- vs-lang
- Origen
- Comprobación de Validiscan
- Impacto
- Moderado
- Nivel de corrección
- AUTO
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Señala un atributo lang ausente o no válido en el elemento <html> y una discrepancia entre el idioma declarado y el idioma detectado en el contenido de la página (3.1.1). Sustituye a las reglas de axe html-has-lang y html-lang-valid.
La comprobación lee solo el atributo lang del elemento <html>. Un valor es válido cuando es una etiqueta BCP 47 bien formada cuya subetiqueta primaria es un código ISO 639-1 conocido de dos letras o tiene tres letras. Las etiquetas de uso privado como x-shop superan la comprobación; en_US, english y xx no.
Para la comparación, la comprobación toma el texto de main o de role="main" cuando contiene al menos 300 caracteres y, si no, el de todo el cuerpo de la página, y cuenta palabras funcionales frecuentes del inglés, el alemán, el danés, el francés, el español, el neerlandés, el italiano, el sueco, el noruego, el polaco y el portugués.
Una discrepancia es un hallazgo solo cuando el texto tiene al menos 300 caracteres y las coincidencias del idioma predominante son al menos 10, al menos el 8 % de todas las palabras, el doble de las del idioma declarado y al menos 8 más que estas. Con indicios más débiles no hay hallazgo, ni tampoco con una discrepancia en una página declarada en un idioma que no está entre estos once. El lang de otros elementos no se comprueba.
Cómo corregirlo
Genere el atributo lang de <html> a partir del idioma activo de la tienda, por ejemplo <html lang="de">, para que cada versión lingüística declare su propio código válido (de, da, fr-BE, etc.) en lugar de un valor predeterminado fijado en el código.
Criterios de conformidad de las WCAG
- 3.1.1 Language of Page, nivel A
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 3.1.1 | 9.3.1.1 | 9.3.1.1 |
Dónde lo corrige una receta
Shopify: receta html-lang
Mostrar el antes y el después (1)
layout/checkout.liquid Cambios en layout/checkout.liquid (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 3 | 3 | Checkout layout (the Shopify Plus `checkout.liquid` era). Only the first step | |
| 4 | 4 | (contact, delivery, billing) is modelled; nothing is ever submitted. | |
| 5 | 5 | {% endcomment %} | |
| 6 | Eliminada | <html class="no-js"> | |
| 6 | Añadida | <html class="no-js" lang="{{ request.locale.iso_code }}"> | |
| 7 | 7 | <head> | |
| 8 | 8 | <meta charset="utf-8"> | |
| 9 | 9 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> |
layout/theme.liquid Cambios en layout/theme.liquid (líneas añadidas: 3; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 6 | 6 | {% endcomment %} | |
| 7 | 7 | {%- liquid | |
| 8 | 8 | assign page_lang = request.locale.iso_code | |
| 9 | Añadida | if page.metafields.custom.content_language != blank | |
| 10 | Añadida | assign page_lang = page.metafields.custom.content_language | |
| 11 | Añadida | endif | |
| 9 | 12 | -%} | |
| 10 | 13 | <html class="no-js" lang="{{ page_lang }}"> | |
| 11 | 14 | <head> |
Shopware: receta html-lang
Mostrar el antes y el después (1)
Resources/views/storefront/base.html.twig Cambios en Resources/views/storefront/base.html.twig (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 9 | 9 | {% block base_doctype %}<!DOCTYPE html>{% endblock %} | |
| 10 | 10 | ||
| 11 | 11 | {% block base_html %} | |
| 12 | Eliminada | <html lang="{{ page.lang }}" itemscope="itemscope" itemtype="https://schema.org/WebPage"> | |
| 12 | Añadida | <html lang="{{ page.lang|replace({'_': '-'}) }}" itemscope="itemscope" itemtype="https://schema.org/WebPage"> | |
| 13 | 13 | {% endblock %} | |
| 14 | 14 | ||
| 15 | 15 | {% block base_head %} |
WooCommerce: receta html-lang
Mostrar el antes y el después (1)
header-checkout.php Cambios en header-checkout.php (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 8 | 8 | ||
| 9 | 9 | ?><!doctype html> | |
| 10 | 10 | <?php // VALIDISCAN-SEED vs-lang: copied from a landing-page plugin, language_attributes() is missing, so <html> has no lang. ?> | |
| 11 | Eliminada | <html> | |
| 11 | Añadida | <html <?php language_attributes(); ?>> | |
| 12 | 12 | <head> | |
| 13 | 13 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 14 | 14 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled. ?> |
Magento: receta html-lang
Mostrar el antes y el después (1)
app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 15 | 15 | ?> | |
| 16 | 16 | <!doctype html> | |
| 17 | 17 | <!-- VALIDISCAN-SEEDED vs-lang: root.phtml prints the Magento locale code (en_US) instead of a BCP 47 language tag --> | |
| 18 | Eliminada | <html lang="<?= $block->escapeHtmlAttr($htmlLocale) ?>"> | |
| 18 | Añadida | <html <?= /* @noEscape */ $htmlAttributes ?>> | |
| 19 | 19 | <head <?= /* @noEscape */ $headAttributes ?>> | |
| 20 | 20 | <?= /* @noEscape */ $requireJs ?> | |
| 21 | 21 | <?= /* @noEscape */ $headContent ?> |
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