Zoomen und Skalieren dürfen nicht deaktiviert sein
Viele Kundinnen und Kunden mit Sehbehinderung zoomen am Smartphone hinein, um Preise, Produktdetails und Felder im Checkout zu lesen. Eine Viewport-Einstellung, die das Zoomen sperrt (user-scalable=no oder maximum-scale=1), lässt kleine Schrift unlesbar und kann sie davon abhalten, einen Kauf abzuschließen.
- Regel-ID
- meta-viewport
- Quelle
- axe-core 4.13.0
- Auswirkung
- Mittel
- Korrekturstufe
- AUTO
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Sicherstellen, dass <meta name="viewport"> das Skalieren von Text und das Zoomen nicht verhindert
Die Regel liest das content-Attribut jedes <meta name="viewport">-Elements im Dokument der obersten Ebene. Viewport-Tags in iframes werden nicht getestet, und ein Tag, dessen content fehlt oder leer ist, besteht.
axe-core zerlegt den Inhalt an Kommas und Semikolons in Paare der Form key=value, ignoriert Groß- und Kleinschreibung sowie Leerzeichen um Schlüssel und Werte und wertet das Tag in drei Fällen als Verstoß:
user-scalable=no- ein numerischer Wert für
user-scalable, der größer als -1 und kleiner als 1 ist, etwauser-scalable=0 - ein
maximum-scale-Wert unter 2, wobeimaximum-scale=yesals 1 gelesen und ein negativer Wert ignoriert wird
Andere Schlüssel wie width, initial-scale und minimum-scale spielen keine Rolle. Die Fehlermeldung nennt die Einstellung, die das Zoomen sperrt.
Die Regel liest nur das Markup und zoomt die Seite nicht. Ob Text bei 200 % lesbar bleibt, kann sie deshalb nicht feststellen. Der Scanner von Validiscan fasst Befunde nach Regel, Selektor und Struktur des HTML zusammen, sodass dasselbe Viewport-Tag auf allen Seiten eines Themes einen einzigen Befund ergibt.
So wird es behoben
Entfernen Sie user-scalable=no und jeden maximum-scale-Wert unter 2 aus dem <meta name="viewport">-Tag im Layout-Template; content="width=device-width, initial-scale=1" genügt.
WCAG-Erfolgskriterien
- 1.4.4 Resize Text, Stufe AA
Abschnitte der EN 301 549
| WCAG-Kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.4.4 | 9.1.4.4 | 9.1.4.4 |
Wo ein Rezept es behebt
Shopify: Rezept meta-viewport-zoom
Vorher und nachher anzeigen (1)
layout/checkout.liquid Änderungen an layout/checkout.liquid: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 6 | 6 | <html class="no-js"> | |
| 7 | 7 | <head> | |
| 8 | 8 | <meta charset="utf-8"> | |
| 9 | Entfernt | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 9 | Hinzugefügt | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 10 | 10 | <meta name="robots" content="noindex"> | |
| 11 | 11 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 12 | 12 | <!-- Checkout assets: //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/ (served locally by the fixture server) --> |
layout/theme.focused.liquid Änderungen an layout/theme.focused.liquid: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 10 | 10 | <head> | |
| 11 | 11 | <meta charset="utf-8"> | |
| 12 | 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 13 | Entfernt | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 13 | Hinzugefügt | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 14 | 14 | <title></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) --> |
layout/theme.liquid Änderungen an layout/theme.liquid: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 11 | 11 | <head> | |
| 12 | 12 | <meta charset="utf-8"> | |
| 13 | 13 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 14 | Entfernt | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 14 | Hinzugefügt | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 15 | 15 | <meta name="theme-color" content="{{ settings.color_background }}"> | |
| 16 | 16 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 17 | 17 | {%- comment -%} On the live store theme assets load from //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/; the fixture serves them from {{ routes.root_url }}assets/. {%- endcomment %} |
Shopware: Rezept meta-viewport-zoom
Vorher und nachher anzeigen (1)
Resources/views/storefront/layout/meta.html.twig Änderungen an Resources/views/storefront/layout/meta.html.twig: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 6 | 6 | ||
| 7 | 7 | {% block layout_head_meta_tags_viewport %} | |
| 8 | 8 | {# Added by the merchant's agency to stop "zoom jumps" on iOS. #} | |
| 9 | Entfernt | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 9 | Hinzugefügt | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 10 | 10 | {% endblock %} | |
| 11 | 11 | ||
| 12 | 12 | {% block layout_head_meta_tags_general %} |
WooCommerce: Rezept meta-viewport-zoom
Vorher und nachher anzeigen (1)
header-checkout.php Änderungen an header-checkout.php: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 12 | 12 | <head> | |
| 13 | 13 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 14 | 14 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled. ?> | |
| 15 | Entfernt | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 15 | Hinzugefügt | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 16 | 16 | <?php wp_head(); ?> | |
| 17 | 17 | </head> | |
| 18 | 18 |
header.php Änderungen an header.php: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 14 | 14 | <head> | |
| 15 | 15 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 16 | 16 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled ("stops iOS zooming into inputs"). ?> | |
| 17 | Entfernt | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 17 | Hinzugefügt | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 18 | 18 | <?php wp_head(); ?> | |
| 19 | 19 | </head> | |
| 20 | 20 |
Magento: Rezept meta-viewport-zoom
Vorher und nachher anzeigen (1)
app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 3 | 3 | <head> | |
| 4 | 4 | <!-- VALIDISCAN-SEEDED meta-viewport: pinch zoom disabled (Luma 2.0-2.3 default kept by the theme). | |
| 5 | 5 | Fixed variant: content="width=device-width, initial-scale=1". --> | |
| 6 | Entfernt | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> | |
| 6 | Hinzugefügt | <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| 7 | 7 | <meta name="format-detection" content="telephone=no"/> | |
| 8 | 8 | <css src="css/styles-m.css"/> | |
| 9 | 9 | <css src="css/styles-l.css" media="screen and (min-width: 768px)"/> |
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 anfordernOder 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