Die Seitensprache muss angegeben sein und zum Inhalt passen

Screenreader wählen die Aussprache anhand der angegebenen Sprache. Ein deutscher Shop, der Englisch angibt, was häufig vorkommt, wenn jede Übersetzung die Standardsprache beibehält, wird mit falschem Akzent vorgelesen, sodass Produktnamen, Preise und Hinweise schwer zu verstehen sind. Auch die Übersetzungsfunktion und die Rechtschreibprüfung des Browsers hängen davon ab.

Kostenlosen Check anfordern

Regel-ID: vs-lang
Quelle: Validiscan-Prüfung
Auswirkung: Mittel
Korrekturstufe: AUTO; auf Shopify, Shopware, WooCommerce und Magento
Status: wird ausgeführt

Was geprüft wird

Markiert ein fehlendes oder ungültiges lang-Attribut am <html>-Element sowie Abweichungen zwischen der angegebenen Sprache und der im Seiteninhalt erkannten Sprache (3.1.1). Ersetzt die axe-Regeln html-has-lang und html-lang-valid.

Die Prüfung liest nur das Attribut lang des Elements <html>. Ein Wert ist gültig, wenn er ein wohlgeformtes Sprach-Tag nach BCP 47 ist, dessen primäres Subtag ein bekannter zweibuchstabiger Code nach ISO 639-1 ist oder aus drei Buchstaben besteht. Sprach-Tags für den privaten Gebrauch wie x-shop bestehen, en_US, english und xx dagegen nicht.

Für den Vergleich nimmt die Prüfung den Text von main oder role="main", wenn er mindestens 300 Zeichen umfasst, sonst den gesamten Body. Darin zählt sie häufige Funktionswörter für Englisch, Deutsch, Dänisch, Französisch, Spanisch, Niederländisch, Italienisch, Schwedisch, Norwegisch, Polnisch und Portugiesisch.

Eine Abweichung wird nur zum Befund, wenn der Text mindestens 300 Zeichen hat und die führende Sprache mindestens 10 Treffer erzielt. Diese Treffer müssen mindestens 8 % aller Wörter ausmachen, mindestens doppelt so zahlreich sein wie die der angegebenen Sprache und diese um mindestens 8 übertreffen. Schwächere Anzeichen ergeben keinen Befund, ebenso wenig eine Abweichung auf einer Seite, die eine Sprache außerhalb dieser elf angibt. lang an anderen Elementen wird nicht geprüft.

So wird es behoben

Geben Sie das lang-Attribut am <html>-Element aus der aktuellen Sprache des Shops aus, zum Beispiel <html lang="de">, damit jede Sprachversion ihren eigenen gültigen Code angibt (de, da, fr-BE und so weiter) statt eines fest codierten Standardwerts.

WCAG-Erfolgskriterien

3.1.1 Language of Page, Stufe A

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
WCAG-Kriterium	Version 3.2.1	Version 4.1.1
3.1.1	9.3.1.1	9.3.1.1

Wo ein Rezept es behebt

Shopify: Rezept html-lang

Vorher und nachher anzeigen (1)

Vorher und nachher Beispieldaten

layout/checkout.liquid Änderungen an layout/checkout.liquid: 1 hinzugefügt, 1 entfernt

Änderungen an layout/checkout.liquid: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<html class="no-js">
	6	Hinzugefügt	<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 Änderungen an layout/theme.liquid: 3 hinzugefügt, 0 entfernt

Änderungen an layout/theme.liquid: 3 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
6	6		{% endcomment %}
7	7		{%- liquid
8	8		assign page_lang = request.locale.iso_code
	9	Hinzugefügt	if page.metafields.custom.content_language != blank
	10	Hinzugefügt	assign page_lang = page.metafields.custom.content_language
	11	Hinzugefügt	endif
9	12		-%}
10	13		<html class="no-js" lang="{{ page_lang }}">
11	14		<head>

Shopware: Rezept html-lang

Vorher und nachher anzeigen (1)

normalises the locale code of the base layout; German content pages are left to the merchant Beispieldaten

Resources/views/storefront/base.html.twig Änderungen an Resources/views/storefront/base.html.twig: 1 hinzugefügt, 1 entfernt

Änderungen an Resources/views/storefront/base.html.twig: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
9	9		{% block base_doctype %}<!DOCTYPE html>{% endblock %}
10	10
11	11		{% block base_html %}
12		Entfernt	<html lang="{{ page.lang }}" itemscope="itemscope" itemtype="https://schema.org/WebPage">
	12	Hinzugefügt	<html lang="{{ page.lang\|replace({'_': '-'}) }}" itemscope="itemscope" itemtype="https://schema.org/WebPage">
13	13		{% endblock %}
14	14
15	15		{% block base_head %}

WooCommerce: Rezept html-lang

Vorher und nachher anzeigen (1)

adds language_attributes() to the checkout header of the fixture theme Beispieldaten

header-checkout.php Änderungen an header-checkout.php: 1 hinzugefügt, 1 entfernt

Änderungen an header-checkout.php: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<html>
	11	Hinzugefügt	<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: Rezept html-lang

Vorher und nachher anzeigen (1)

fixes the vs-lang finding in root.phtml and validates Beispieldaten

app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<html lang="<?= $block->escapeHtmlAttr($htmlLocale) ?>">
	18	Hinzugefügt	<html <?= /* @noEscape */ $htmlAttributes ?>>
19	19		<head <?= /* @noEscape */ $headAttributes ?>>
20	20		<?= /* @noEscape */ $requireJs ?>
21	21		<?= /* @noEscape */ $headContent ?>

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 anfordern

Oder 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