Nagyítás engedélyezve

Sokan csak nagyítással tudják elolvasni egy weboldal szövegét: gyengénlátók, idősebbek, vagy aki egyszerűen kis kijelzőn böngészik. Ha az oldal letiltja a nagyítást, nekik nincs kerülő út. A WCAG 2.2 1.4.4-es sikerességi feltétele (Resize Text, AA szint) azt kéri, hogy a szöveg segédeszköz nélkül, 200 százalékig nagyítható legyen a tartalom és a működés elvesztése nélkül.

Ez a teszt a <head>-ben lévő viewport meta címkét nézi, mert ezzel lehet a mobilböngészőben a nagyítást letiltani.

Hogyan mérjük

A riport letölti az oldal HTML-jét (böngésző és JavaScript futtatása nélkül), és megkeresi az első olyan <meta> elemet, amelynek name értéke viewport (kis- és nagybetűre nem érzékeny).

• Megfelelő: van viewport meta, és sem a user-scalable, sem a maximum-scale nem korlátoz.
• Hiba: a content értékében user-scalable=no vagy user-scalable=0 szerepel, vagy van maximum-scale, és az értéke 2-nél kisebb (például maximum-scale=1 vagy maximum-scale=1.5).
• Nem értékelhető: az oldalon nincs viewport meta, vagy a HTML nem érhető el. Ilyenkor a nagyítás letiltásáról nincs mit mondani; a hiányzó meta címkét az Alapok kategória Viewport meta tesztje jelzi.

Figyelmeztető szint nincs, a teszt csak megfelelő, hibás vagy nem értékelhető eredményt ad.

A teszt a forráskódot nézi, nem azt, hogy a böngésző valóban megengedi-e a nagyítást. Az MDN szerint egyes böngészők, például az iOS 10 vagy újabb Safari, a beállítástól függetlenül figyelmen kívül hagyják ezeket a korlátozásokat. A hiba ettől még hiba: másik böngészőben, vagy az iOS-es böngésző későbbi változatában ugyanaz a sor ténylegesen letiltja a nagyítást.

Hogyan javítsd

A user-scalable=no és a maximum-scale értékét töröld. A legegyszerűbb, ha az egész sort lecseréled erre:

HTML

HTML (a <head>-be)

<meta name="viewport" content="width=device-width, initial-scale=1">

A meglévő viewport sor helyére írd, ne vegyél fel mellé másodikat. Ha a maximum-scale mégis kell, legalább 2 legyen az értéke; az MDN a WCAG minimumán túl az 5-szörös nagyítást ajánlja bevált gyakorlatként.

WordPress

A viewport sort a téma vagy valamelyik bővítmény írja ki. Keresd meg, hol áll a user-scalable vagy a maximum-scale (a téma header.php fájljában, a téma beállításai között vagy egy SEO-, illetve gyorsító bővítményben), és ott cseréld le a fenti sorra. Gyermektémát használj, hogy a téma frissítése ne írja felül.

Hogyan ellenőrizd

1. Nyisd meg az oldal forrását (a böngészőben Ctrl+U, Macen Cmd+Option+U), és keresd a viewport szót. A sorban ne legyen user-scalable=no és ne legyen 2-nél kisebb maximum-scale.
2. Telefonon csippentéssel nagyítsd az oldalt: ha engedi, rendben van.
3. A riportban futtasd újra a mérést; a teszt ilyenkor megfelelő lesz.