Sidens sprog skal være angivet og passe til indholdet
Skærmlæsere bruger det angivne sprog til at vælge udtalen. En dansk webshop, der angiver engelsk, hvilket er almindeligt, når alle oversættelser beholder standardsproget, bliver læst op med forkert accent, så produktnavne, priser og vejledninger bliver svære at forstå. Browseroversættelse og stavekontrol afhænger også af det.
- Regel-id
- vs-lang
- Kilde
- Validiscan-kontrol
- Alvorlighed
- Moderat
- Rettelsesniveau
- AUTO
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Markerer en manglende eller ugyldig lang-attribut på <html>-elementet og uoverensstemmelse mellem det angivne sprog og det sprog, der genkendes i sidens indhold (3.1.1). Erstatter axe-reglerne html-has-lang og html-lang-valid.
Kontrollen læser kun lang-attributten på <html>-elementet. En værdi er gyldig, når den er et velformet BCP 47-tag, hvis primære subtag er en kendt ISO 639-1-kode på to bogstaver eller har tre bogstaver. Tags til privat brug som x-shop består; en_US, english og xx består ikke.
Til sammenligningen tager kontrollen teksten i main eller role="main", når den indeholder mindst 300 tegn, ellers hele body-elementet. Den tæller almindelige funktionsord på engelsk, tysk, dansk, fransk, spansk, nederlandsk, italiensk, svensk, norsk, polsk og portugisisk.
En uoverensstemmelse er kun et fund, når teksten har mindst 300 tegn, og sproget med flest træffere har mindst 10 træffere, mindst 8 % af alle ord, dobbelt så mange træffere som det angivne sprog og mindst 8 flere. Svagere belæg giver intet fund, og det samme gælder en uoverensstemmelse på en side, der er angivet til et sprog uden for disse elleve. lang på andre elementer kontrolleres ikke.
Sådan retter du det
Generér lang-attributten på <html> ud fra webshoppens aktuelle sprog, for eksempel <html lang="da">, så hver sprogversion angiver sin egen gyldige kode (de, da, fr-BE og så videre) i stedet for en fastkodet standardværdi.
WCAG-succeskriterier
- 3.1.1 Language of Page, niveau A
Afsnit i EN 301 549
| WCAG-kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 3.1.1 | 9.3.1.1 | 9.3.1.1 |
Hvor en opskrift retter det
Shopify: opskrift html-lang
Vis før og efter (1)
layout/checkout.liquid Ændringer i layout/checkout.liquid: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <html class="no-js"> | |
| 6 | Tilføjet | <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 Ændringer i layout/theme.liquid: 3 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 6 | 6 | {% endcomment %} | |
| 7 | 7 | {%- liquid | |
| 8 | 8 | assign page_lang = request.locale.iso_code | |
| 9 | Tilføjet | if page.metafields.custom.content_language != blank | |
| 10 | Tilføjet | assign page_lang = page.metafields.custom.content_language | |
| 11 | Tilføjet | endif | |
| 9 | 12 | -%} | |
| 10 | 13 | <html class="no-js" lang="{{ page_lang }}"> | |
| 11 | 14 | <head> |
Shopware: opskrift html-lang
Vis før og efter (1)
Resources/views/storefront/base.html.twig Ændringer i Resources/views/storefront/base.html.twig: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 9 | 9 | {% block base_doctype %}<!DOCTYPE html>{% endblock %} | |
| 10 | 10 | ||
| 11 | 11 | {% block base_html %} | |
| 12 | Fjernet | <html lang="{{ page.lang }}" itemscope="itemscope" itemtype="https://schema.org/WebPage"> | |
| 12 | Tilføjet | <html lang="{{ page.lang|replace({'_': '-'}) }}" itemscope="itemscope" itemtype="https://schema.org/WebPage"> | |
| 13 | 13 | {% endblock %} | |
| 14 | 14 | ||
| 15 | 15 | {% block base_head %} |
WooCommerce: opskrift html-lang
Vis før og efter (1)
header-checkout.php Ændringer i header-checkout.php: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <html> | |
| 11 | Tilføjet | <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: opskrift html-lang
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <html lang="<?= $block->escapeHtmlAttr($htmlLocale) ?>"> | |
| 18 | Tilføjet | <html <?= /* @noEscape */ $htmlAttributes ?>> | |
| 19 | 19 | <head <?= /* @noEscape */ $headAttributes ?>> | |
| 20 | 20 | <?= /* @noEscape */ $requireJs ?> | |
| 21 | 21 | <?= /* @noEscape */ $headContent ?> |
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