Brugere bør kunne zoome og skalere teksten op til 500 %
Nogle svagsynede kunder har brug for at zoome langt mere end til dobbelt størrelse for at kunne læse produkttekster på mobilen. En maximum-scale-grænse under 5 begrænser, hvor meget de kan forstørre priser, beskrivelser og formularfelter.
- Regel-id
- meta-viewport-large
- Kilde
- axe-core 4.13.0
- Alvorlighed
- Mindre
- Rettelsesniveau
- AUTO
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Sørg for, at <meta name="viewport"> kan skalere betydeligt
Kun viewport-tags i dokumentet på øverste niveau kontrolleres; et tag inde i en iframe springes over. axe-core slår sit sædvanlige synlighedsfilter fra for denne regel, så tagget testes, selvom det ikke vises. Mangler content, eller er attributten tom, består tagget.
Værdien af content deles op i key=value-par ved hvert komma og semikolon, og nøgler og værdier sammenlignes med små bogstaver og uden mellemrum omkring sig. Her afgør kun maximum-scale sagen: En værdi på mindst 2 og under 5 består ikke, for eksempel maximum-scale=3. Der ses bort fra en negativ maximum-scale, og maximum-scale=yes læses som 1.
En ikke-negativ maximum-scale under 2 består denne regel, og det gør user-scalable=no også. Begge giver i stedet en fejl i den særskilte regel meta-viewport, som Validiscans scanner kører i sit gennemløb for WCAG-overensstemmelse.
Scanneren kører denne regel i sit gennemløb for god praksis, gemmer kun fejlene og holder dem ude af fremskridtet i udbedringen. Kun opmærkningen læses, så reglen kan ikke afgøre, om en side stadig kan bruges ved kraftig zoom.
Sådan retter du det
Fjern maximum-scale-værdien fra <meta name="viewport">-tagget i layoutskabelonen, eller sæt den til mindst 5, og brug ikke user-scalable=no.
WCAG-succeskriterier
God praksis: ikke knyttet til et succeskriterium i WCAG.
Hvor en opskrift retter det
Shopify: opskrift meta-viewport-zoom
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 |
|---|---|---|---|
| 6 | 6 | <html class="no-js"> | |
| 7 | 7 | <head> | |
| 8 | 8 | <meta charset="utf-8"> | |
| 9 | Fjernet | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 9 | Tilføjet | <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 Ændringer i layout/theme.focused.liquid: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 10 | 10 | <head> | |
| 11 | 11 | <meta charset="utf-8"> | |
| 12 | 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 13 | Fjernet | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 13 | Tilføjet | <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 Ændringer i layout/theme.liquid: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 11 | 11 | <head> | |
| 12 | 12 | <meta charset="utf-8"> | |
| 13 | 13 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 14 | Fjernet | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 14 | Tilføjet | <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: opskrift meta-viewport-zoom
Vis før og efter (1)
Resources/views/storefront/layout/meta.html.twig Ændringer i Resources/views/storefront/layout/meta.html.twig: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 9 | Tilføjet | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 10 | 10 | {% endblock %} | |
| 11 | 11 | ||
| 12 | 12 | {% block layout_head_meta_tags_general %} |
WooCommerce: opskrift meta-viewport-zoom
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 |
|---|---|---|---|
| 12 | 12 | <head> | |
| 13 | 13 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 14 | 14 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled. ?> | |
| 15 | Fjernet | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 15 | Tilføjet | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 16 | 16 | <?php wp_head(); ?> | |
| 17 | 17 | </head> | |
| 18 | 18 |
header.php Ændringer i header.php: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 17 | Tilføjet | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 18 | 18 | <?php wp_head(); ?> | |
| 19 | 19 | </head> | |
| 20 | 20 |
Magento: opskrift meta-viewport-zoom
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> | |
| 6 | Tilføjet | <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)"/> |
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