Mitä uutta
Tarkempi katsaus uusimpiin ominaisuuksiin, saavutettavuusparannuksiin ja suorituskykyyn.
Suorituskyky ja metriikat
Nopeammat sivut moderneilla kuvaformaateilla (AVIF/WebP), paremmalla välimuistilla ja kuvalatauksen ”kikoilla”, kuten sumeilla blur-up-paikkamerkeillä ja priorisoidulla LCP-latauksella.
Nämä kuvakaappaukset ovat Google Lighthouse (PageSpeed Insights) -testistä Mobile-asetuksella. Lighthouse ajaa toistettavan labratestin Chromessa simuloidulla laitteella ja verkkorajoituksella.
Mitä muuttui
- Modernit kuvaformaatit (AVIF/WebP) ja responsiivinen koko pienentävät siirtomäärää jopa 80 %.
- Sumeat esikatselukuvat (blur-up) ja priorisoitu lataus tärkeille kuville minimoivat koetun latausajan.
- Vähemmän blokkaavaa JavaScriptiä ja fiksumpi lataus pienentävät Total Blocking Time -arvoa.
Tärkeimmät hyödyt
- Suorituskyky: 62 → 99
- LCP: 8,8s → 2,0s
- Total Blocking Time: 130ms → 40ms
Yhteensopivuus ja standardit
Jokainen ominaisuus tukee tiettyjä WCAG-kriteerejä. Näin suunnitteluratkaisut linkittyvät globaaleihin saavutettavuusstandardeihin.
| Ominaisuus | WCAG-kriteeri | Taso | Vaikutus |
|---|---|---|---|
| Kiinnitetty navigointi | 3.2.3 Consistent Navigation | AA | Valikko pysyy samassa paikassa sivulta toiselle, mikä vähentää kognitiivista kuormaa. |
| Fokusindikaattorit | 2.4.7 Focus Visible | AA | Näppäimistökäyttäjä näkee aina, missä fokus on, eikä eksy. |
| Tekstin skaalaus | 1.4.4 Resize Text | AA | Asettelu mukautuu 200% zoomauksessa ja toiminnallisuus säilyy. |
| Tumma tila | 1.4.3 Contrast (Minimum) | AA | Tekstin kontrasti säilyy riittävänä sekä vaaleassa että tummassa teemassa. |
| Liikkeen hallinta | 2.2.2 Pause, Stop, Hide | A | Liikettä voi vähentää häiriöiden ja vestibulaaristen oireiden välttämiseksi. |
| Tilaviestit | 4.1.3 Status Messages | AA | Ruudunlukija ilmoittaa latauksesta ja tyhjistä tiloista siirtämättä fokusta. |
| Semanttiset maamerkit | 1.3.1 Info and Relations | A | Navigointi ja pääsisältö tunnistetaan oikein, jotta apuvälineet voivat hypätä suoraan niihin. |
| Hakudialogi | 2.1.2 No Keyboard Trap | A | Hakupaneeli hallitsee fokusta ollessaan auki ja sen voi aina sulkea Esc-näppäimellä. |
| Syötekenttien etiketit | 3.3.2 Labels or Instructions | A | Hakukentillä on saavutettavat etiketit, jotta ruudunlukija kertoo mitä kirjoittaa. |
| Vähennetty liike | 2.3.3 Animation from Interactions | AAA | Animaatiot kunnioittavat käyttöjärjestelmän vähennetyn liikkeen asetusta. |
| Äänihaku | 2.5.1 Pointer Gestures | A | Tarjoaa vaihtoehtoisen syöttötavan käyttäjille, joille kirjoittaminen on vaikeaa. |
| Ääneenluku | 3.1.5 Reading Level | AAA | Tarjoaa äänivaihtoehdon pitkälle tekstille ja tukee lukivaikeutta sekä kognitiivista saavutettavuutta. |
Selkeä navigointi
Johdonmukainen ylätunniste, joka pitää tärkeät toiminnot lähellä.
Perustelu
Ennustettava navigointi vähentää kognitiivista kuormaa. Käyttäjän ei pitäisi arvailla, missä valikko tai haku on.
Saavutettavuus
Kiinnitetty ylätunniste tukee suuntautumista ja muistia, ja selkeät fokusindikaattorit parantavat näppäimistökäyttöä.
Saavutettavuusvalikko
Säädöt tekstin koosta ja väleistä kontrastiin, liikkeeseen, fokukseen ja linkkien tyyliin. Täyttää WCAG 2.5.8 -kohdan kosketuskohteen koosta.
Perustelu
Saavutettavuus on ydinarvo. Käyttäjän omat säädöt tarkoittavat, että sivusto mukautuu tarpeisiin.
Saavutettavuus
Tukee tekstin suurentamista, kontrastia ja vähennettyä liikettä. Suuremmat kosketuskohteet auttavat motorisissa haasteissa.
Lue ääneen (Web Speech)
Sisäänrakennettu ääneenluku toistopainikkeilla. Tukee WCAG 1.1.1 (Ei-tekstuaalinen sisältö) tarjoamalla äänivaihtoehdon.
Perustelu
Pitkän tekstin lukeminen voi väsyttää. Ääneenluku helpottaa sisällön kuluttamista myös handsfree.
Saavutettavuus
Auttaa käyttäjiä, joilla on lukivaikeus, heikompi näkö tai kuormittumista ja jotka hyötyvät äänituesta.
Haku ja löydettävyys
Haku, joka ymmärtää tarkoituksen, tukee synonyymejä ja sisältää ääniohjauksen.
Perustelu
Sisällön pitää löytyä nopeasti. Fiksumpi haku vähentää kitkaa käsittelemällä kirjoitusvirheitä ja kontekstia.
Saavutettavuus
Äänihaku tukee handsfree-syöttöä. Selkeät tilaviestit parantavat ruudunlukijakokemusta.
Kalenteri ja esitysten polut
Viilatut kalenteri- ja esitysnäkymät selkeämmillä hover/fokus-tiloilla ja erillisillä lipunostopoluilla.
Perustelu
Kalenteri on ydinominaisuus. Selkeä visuaalinen palaute vähentää virhepainalluksia ja epäselvyyttä. Selkeys siitä, mitkä liput ovat loppuunmyytyjä ja missä on vielä paikkoja, helpottaa navigointia.
Saavutettavuus
Vahvat fokusindikaattorit ja paremmat nimikkeet auttavat tiheiden kalenterinäkymien käytössä.
Tietosuoja ja suostumus
Yksityisyyttä kunnioittava lähestymistapa, joka kunnioittaa kävijän rajoja harkitun suunnittelun kautta ja välttää invasiivista kolmannen osapuolen seurantaa oletuksena.
Perustelu
Kolmannen osapuolen widgetit (kuten Instagram tai Google Maps) lataavat usein ulkoisia resursseja, jotka keräävät kävijädataa ilman suostumusta. Estämme kaikki kolmannen osapuolen evästeet ja pyynnöt, kunnes nimenomainen suostumus annetaan, priorisoiden yksityisyyttä ilman toiminnallisuuden uhraamista.
Saavutettavuus
Korvaamme Instagramin kolmannen osapuolen widgetin omalla galleriallamme, mikä poistaa evästeseurannan säilyttäen toiminnallisuuden.
Hiilijalanjälki ja kestävyys
Optimoitu suorituskyky vähentää energiankulutusta. Uusi sivusto saa “B”-luokituksen verrattuna edellisen version “F”:ään.
Perustelu
Vähemmän tiedonsiirtoa ja vähemmän työtä selaimessa tarkoittaa pienempiä päästöjä sivukatselua kohden.
Saavutettavuus
Kevyet sivut toimivat paremmin vanhoilla laitteilla ja rajatuilla datapaketeilla, mikä parantaa saavutettavuutta.