Text sollte sich auf bis zu 500 % zoomen und skalieren lassen
Manche Kundinnen und Kunden mit Sehbehinderung müssen am Smartphone weit über die doppelte Größe hinaus zoomen, um Produkttexte zu lesen. Eine maximum-scale-Grenze unter 5 begrenzt, wie stark sie Preise, Beschreibungen und Formularfelder vergrößern können.
- Regel-ID
- meta-viewport-large
- Quelle
- axe-core 4.13.0
- Auswirkung
- Gering
- Korrekturstufe
- AUTO
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Sicherstellen, dass <meta name="viewport"> eine deutliche Vergrößerung zulässt
Geprüft werden nur Viewport-Tags im Dokument der obersten Ebene; ein Tag innerhalb eines iframes wird übersprungen. Für diese Regel schaltet axe-core seinen üblichen Sichtbarkeitsfilter ab, deshalb wird das Tag getestet, obwohl es nicht angezeigt wird. Fehlt das Attribut content oder ist es leer, besteht das Tag.
Der Wert von content wird an jedem Komma und jedem Semikolon in Paare der Form key=value zerlegt. Schlüssel und Werte werden in Kleinbuchstaben verglichen, Leerzeichen davor und danach werden entfernt. Entscheidend ist hier allein maximum-scale: Ein Wert von mindestens 2 und unter 5 gilt als Verstoß, zum Beispiel maximum-scale=3. Ein negativer Wert für maximum-scale wird verworfen, und maximum-scale=yes wird als 1 gelesen.
Ein nicht negativer Wert für maximum-scale unter 2 besteht diese Regel, ebenso user-scalable=no. Beides verstößt stattdessen gegen die gesonderte Regel meta-viewport, die der Scanner von Validiscan in seinem Durchlauf für die WCAG-Konformität ausführt.
Diese Regel führt der Scanner in seinem Durchlauf für gute Praxis aus. Er speichert nur Verstöße und rechnet sie nicht in den Fortschritt der Behebung ein. Gelesen wird allein das Markup, deshalb kann die Regel nicht erkennen, ob eine Seite bei starker Vergrößerung benutzbar bleibt.
So wird es behoben
Entfernen Sie den maximum-scale-Wert aus dem <meta name="viewport">-Tag im Layout-Template oder setzen Sie ihn auf mindestens 5, und setzen Sie nicht user-scalable=no.
WCAG-Erfolgskriterien
Gute Praxis: keinem WCAG-Erfolgskriterium zugeordnet.
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