Ulkoasun tarkastus: palstat, teksti ja valokuvat eri näytöillä
Sivu voi mahtua näyttöön mutta olla silti vaikealukuinen. Tarkasta mittasuhteet, pitkät sisällöt ja toiminnot ennen muutoksen julkaisemista.
Kuusi toistettavaa tarkastusta
Valitse edustavat sivut
Testaa etusivu, luokka, artikkeli, palvelu, lomake ja taulukko. Ota mukaan pitkä otsikko, oikealta vasemmalle luettava kieli ja useita kuvia.
Vertaa palstoja
Tarkasta leveydet 320, 390, 768, 1280, 1440 ja 1920 px. Arvioi kohdistus, lukujärjestys ja välit. Älä piilota asetteluvirheitä ylivuodon peittämisellä.
Suurenna tekstiä
Testaa teksti 200 %:n koossa ja sisällön mukautuminen 320 CSS-pikselin leveyteen. Tietojen ja toimintojen tulee säilyä käytettävinä; taulukot voivat vieriä erikseen.
Tarkasta valokuvat
Tarkasta rajaus, aihe, mitat ja tekijätieto. Kuva ei saa venyä viereisen tekstin pituuden mukaan. Kuvaa näkyvä sisältö ja tunnista kuvapankkikuvat.
Kokeile toimintoja
Käytä valikoita, suodattimia, kysymyksiä ja lomakkeita näppäimistöllä. Tarkasta kohdistus, virheet ja tietojen säilyminen lähettämättä oikeaa yhteydenottoa.
Tallenna havainnot
Kirjaa URL, kieli, leveys, selain, virhe ja korjauksen tulos. Täydennä laboratoriomittauksia käyttäjädatalla, kun liikennettä on riittävästi.
Säilytettävä tarkastuslomake
- URL ja kieli
- Näyttö ja suurennus
- Virhe ja kuvakaappaus
- Korjaus ja uusintatarkastuksen tulos
Työmenetelmä, ei vaatimustenmukaisuustodistus. Mukauta laajuus ja dokumentoi poikkeukset.
Ennen julkaisua: kuusi toiminnallista tarkistusta
- Käy läpi valikot, linkit, lataukset ja kielenvaihdot; tarkista todellinen kohde.
- Käytä kuvitteellisia tietoja: tyhjiä kenttiä, virheellisiä osoitteita, ääkkösiä ja pitkiä tekstejä.
- Varmista, että virhe nimeää kentän, toimii näppäimistöllä ja säilyttää hyödylliset syötteet.
- Testaa myös palvelimen validointi: selaimen tarkistukset voi ohittaa.
- Erota vastaanottokuittaus varsinaisesta toimituksesta; käytä sallittua testikohdetta.
- Tarkista toiminta ilman JavaScriptiä, hylkäykset ja jatkaminen; älä tallenna salaisuuksia todisteisiin.
Tilanteet ja sopivat tarkistukset
Vieritä taulukkoa pienellä näytöllä vaakasuunnassa. Kohdista taulukko näppäimistöllä ja käytä nuolinäppäimiä.
| Tilanne | Mitä se osoittaa | Hyödyllinen tarkistus |
|---|---|---|
| Ohjain katoaa, kun teksti suurennetaan 200 prosenttiin. | Tehtävää ei voi enää käyttää suurennettuna. | Muokkaa asettelua ja testaa näppäimistöllä. |
| Kuva venyy tai jättää suuren aukon työpöydällä. | Mittasuhteet horjuttavat viereistä sisältöä. | Tarkista kokorajoitukset ja lukujärjestys. |
| overflow: hidden leikkaa taulukon. | Tietoja jää piiloon. | Anna taulukolle oma näppäimistöllä käytettävä vieritys ja rivittyvät solut. |
| Käännetty otsikko leikkautuu. | Yhden kielen testaus ei riitä. | Testaa pitkät tekstit, RTL-kielet ja todellinen kielen vaihto. |
Kuvitteellinen esimerkki
Kuvitteellinen palvelusivu näyttää hyvältä 1 440 pikselissä. 320 pikselissä pitkä käännetty otsikko leikkautuu, ja 200 prosentin tekstikoolla FAQ-ohjain ei ole käytettävissä.
Rajoita kuvan kokoa, salli sarakkeiden kutistuminen ja tekstin rivittyminen. Toista tehtävä 320, 390, 768 ja 1 440 pikselissä tekstisuurennuksella ja näppäimistöllä. Kirjaa jäljellä olevat virheet ja tarkista korjaukset.
Hyväksymiskriteerit
- Tiedot ja ohjaimet ovat luettavia edustavissa leveyksissä ja kielissä.
- Tekstisuurennus ja näppäimistö mahdollistavat tehtävän loppuun viemisen.
- Versio, selain, kieli ja uusintatarkistuksen tulokset on kirjattu.
Käytännön kysymyksiä
Riittääkö kuvakaappaus?
Ei. Se näyttää yhden tilan. Testaa myös pitkät sisällöt, näppäimistö sekä avatut, suodatetut ja virhetilat.
Onko yleispätevää fonttikokoa?
Ei. Arvioi luettavuus, rivipituus, suurennus ja kontrasti. Koko yksin ei takaa saavutettavuutta tai tasapainoa.
Miten Core Web Vitals -arvoja tulkitaan?
Hyvän kokemuksen rajat ovat LCP ≤ 2,5 s, INP ≤ 200 ms ja CLS ≤ 0,1 jakauman 75. prosenttipisteessä. Ne mittaavat latausta, vuorovaikutusta ja vakautta eivätkä korvaa ulkoasun tarkastusta.
Tarvitaanko kuvakaappaus jokaisesta mahdollisesta laitteesta?
Valitse tärkeimmät sivutyypit, hyödylliset tehtävät ja selaimet, joissa eroja havaitaan. Kirjaa kattavuuden rajat: muutama kuva ei todista kaikkien laitteiden toimivuutta.
Miten ulkoasukorjaukset priorisoidaan?
Korjaa ensin estyneet tehtävät, piilotetut tiedot ja luettavuus. Paranna sitten mittasuhteita, kohdistuksia ja välejä varmistaen muiden sivujen toimivuus.