miksi verkkosivustoni hajoaa, kun käyttäjä suurentaa tekstiä

Teksti, jota ei voi suurentaa, on tunnettu WCAG-ongelma

Sivusto, joka "hajoaa" heti kun asiakas suurentaa tekstin kokoa, johtuu lähes aina kiinteistä mitoista: teksti, painikkeet tai kontit, jotka on kiinnitetty pikseleihin pikselien sijaan suuressa mittayksikköä, jotka skaalautuvat. Kun asiakas suurentaa tekstin kokoa selaimessa, kiinteän pikselikorkuuden omaava laatikko pysyy yhtä suurena, ja tekstin sisällä tulee ulos, putoaa muiden elementtien päälle tai katkaistaan. Valikot, jotka sopivat täsmälleen vakiokokoon, yhdessä kasvavat osiot ja painikkeet, joiden teksti ylittää rajan, ovat yleisimpiä oireita.

Tämä ei ole esteettinen vika vaan toimintahäiriö: jos otsikko tulee lukemattomaksi tai painiketta ei voi enää napsauttaa, koska teksti menee sen päälle, asiakas ei voi enää suorittaa vaihetta ostoprosessissa. Se koskettaa samoja haavoittuvia kohtia kuin koko tilauksen näppäimistönavigaatio: skaalausongelmapelisivuille näyttämättömästi, voi olla ratkaiseva tekijä tilausvaiheessa tai sisäänkirjautumisnäytössä. Otsikot ja väliotsikot ovat myös vaarassa: jos rakenneelementti romahtaa suurennuksen yhteydessä, lukujärjestys muuttuu oudoksi, mikä tapahtuu myös laajemmassa tarinassa otsikot, rakenne ja navigaatio.

Missä se on WCAG 2.1:ssä: suurentamiskriteeri

WCAG 2.1 määrää, että tekstiä on pystyttävä suurentamaan tiettyyn prosenttiosuuteen asti ilman että sisältö tai toiminnallisuus häviää; se on lähtökohta muutuvan tekstin kriteerille, kuten itse ohjeista näkyy. Käytännössä skannaus testaa tätä lataamalla sivun useilla tekstikoilla ja katsomalla, onko teksti katkaistu, päällekkäin vai lukematon. Mitä automaattinen testi ei näe, on se, sopiiko sivu silloin käyttäjälle vai vain teknisesti "ei rikkoutunut" — tämä ero kuuluu asioihin, joita automaattinen skannaus ei voi arvioida.