Jokainen uusi kuva, linkki ja otsikko voi joko ylläpitää tai rikkoa verkkosivujesi saavutettavuutta. Näillä neljällä muistisäännöllä varmistat, että sisältösi pysyy saavutettavana päivitysten jälkeenkin.
Yhdistyksesi on vihdoin saanut saavutettavat verkkosivut ja huokahdat helpotuksesta – nyt ei enää tarvitse murehtia siitä asiasta, vai tarvitseeko? Verkkosivut, jotka päivittyvät säännöllisesti sisällöltään, tarvitsevat jatkuvaa saavutettavuuden huomioimista.
Verkkosivujen saavutettavuuteen kuuluu muutakin kuin sivuston alkuperäinen luominen WCAG-ohjeistuksen mukaisesti ja saavutettavuusselosteen lisääminen. Kun sivuille tuotetaan uutta sisältöä, kuten uutisartikkeleita, blogikirjoituksia tai ohjelmiston kuvauksia, on tärkeää huomioida muutakin kuin ovatko pisteet ja pilkut kohdillaan.
1. Kuvien vaihtoehtoiset tekstit
Kun lisäät sivuille uusia kuvia, varmista, että kuville on määritetty alt-teksti. Tämä on WCAG 2.2 -ohjeistuksen vaatimus (onnistumiskriteeri 1.1.1: Non-text Content). Alt-tekstin sisältö riippuu kuvan tarkoituksesta. Informatiivinen kuva kuvaillaan ytimekkäästi, toiminnallisen kuvan (kuten linkkinä toimivan kuvan) alt-teksti kertoo kuvan funktion, ja puhtaasti koristeellinen kuva merkitään tyhjällä alt-attribuutilla (alt=""), jolloin ruudunlukija ohittaa sen.
2. Otsikkotasot ja rakenne
Tekstisisältöön voi kuulua muitakin otsikoita kuin vain pääotsikko. Pääotsikko saa useimmissa tapauksissa automaattisesti isoimman otsikkotyylin (h1). Jos haluat tekstiisi väliotsikon, sinun tulisi käyttää seuraavaksi suurinta otsikon kokoa, joka on todennäköisesti h2 tai h3. Otsikkotasojen yli hyppääminen on ristiriidassa WCAG 2.2:n kriteerin 1.3.1 kanssa ja vaikeuttaa sivun rakenteen hahmottamista erityisesti ruudunlukijoiden käyttäjille. Selvitä siis sivustosi otsikkorakenne ja valitse otsikkotaso, joka tulee hierarkisesti seuraavana. Pelkästään visuaalisin perustein valittu otsikkotaso ei välttämättä täytä kriteerin 1.3.1 vaatimuksia.
Väliotsikoiden suhteen on myös tärkeää huomioida, että ne käyttävät otsikkotyylejä, eikä vain paksunnettua tekstiä, jota ruudunlukijat eivät tulkitse otsikoksi.
3. Kuvaavat linkkitekstit
Linkit ovat kolmas asia, johon kannattaa kiinnittää huomiota sisältöä päivittäessäsi. “Klikkaa tästä” tai “tästä” ovat hyvin tyypillisiä sanaratkaisuja, mutta ne eivät ole saavutettavuusvaatimuksia täyttäviä linkkien teksteinä. Ruudunlukijat voivat listata sivun kaikki linkit irrallaan muusta sisällöstä, ja tässä tapauksessa “klikkaa tästä” -linkki menettää ympäröivän kontekstinsa. WCAG 2.2:n onnistumiskriteeri 2.4.4 (Link Purpose in Context) edellyttää, että linkin tarkoitus on ymmärrettävissä pelkän linkkitekstin perusteella tai sen välittömän kontekstin avulla.
Linkkitekstin on parasta kertoa lukijalle, mihin linkki vie. Voit muotoilla sen myös käskymuotoon. Esimerkiksi linkkiteksti “[Lue yhdistyksen vuoden 2025 toimintakertomus]” on huomattavasti parempi kuin “Lue [täältä] yhdistyksen vuoden 2025 toimintakertomus”. Ensimmäinen esimerkki on saavutettavuuden kannalta parempi, koska ruudunlukija lukee koko linkkitekstin antaen kävijälle selkeämmän kontekstin linkin sisällöstä.
Jos aiemmassa esimerkissä olisi kyse linkistä PDF-tiedostoon, se olisi hyvä tuoda ilmi. Tässä tapauksessa linkin teksti voisi olla “[Lue yhdistyksen vuoden 2025 toimintakertomus (PDF-tiedosto, 3.2MB)]”. Tämä kertoisi käyttäjälle heti, että linkin takaa ei löydykään toinen sivu vaan tiedosto, jonka avaamiseen tarvitaan mahdollisesti toista ohjelmistoa. Tiedostokoko kertoo myös kävijälle minkä kokoisesta latauksesta on kyse. Tämä voi olla hyödyllistä tilanteissa, joissa ollaan esimerkiksi mobiilidatan varassa.
Lisävinkki: Linkit uuteen ikkunaan
Linkit, jotka vievät toiselle sivustolle, avautuvat usein uuteen ikkunaan tai välilehteen. Tällaisista linkeistä on hyvä kertoa käyttäjälle. Yksinkertaisimmillaan se tarkoittaa, että linkkitekstiin lisätään teksti "(avautuu uuteen ikkunaan)".
Uuteen ikkunaan aukeavat linkit voidaan myös toteuttaa tavalla, jossa niiden perään ilmestyy automaattisesti neliö-kuvake, jonka kulmassa on nuoli. Symboli on tyypillinen tämänkaltaisille linkeille, mutta se ei kuitenkaan yksinään riitä. Kuvakkeen lisäksi linkissä tulisi olla joko näkyvänä tai piilotettuna teksti, jossa kerrotaan linkin avautuvan uuteen ikkunaan.
4. Riittävä värikontrasti
Neljänneksi on tärkeää muistaa huolehtia värien riittävästä kontrastista ja yhteensopivuudesta. Liian heikko kontrasti voi tehdä sisällöstä vaikeammin luettavaa monelle eri kohderyhmälle. Kontrastin tarkistaminen on erityisen tärkeää mainoskuvissa ja esitteissä, joita saatat liittää verkkosivuillesi tai jakaa sosiaalisen median alustoilla.
Yksi helpoimmista tavoista tarkistaa värien kontrasti on syöttää tai valita ne WebAIM:n työkalulla kontrastin tarkistamiseenLinkki avautuu uuteen ikkunaan. WCAG 2.2:n onnistumiskriteeri 1.4.3 (Contrast Minimum) edellyttää, että tavallisen tekstin ja taustan välinen kontrastisuhde on vähintään 4.5:1 ja suuren tekstin osalta vähintään 3:1.
Seuraavan kerran kun teet yhdistyksellesi julistetta tai mainosta Canvassa tai muussa vastaavassa ohjelmassa, muista tarkistaa kontrastit ennen julkaisua. Samoin valokuvan päälle sijoittuvien tekstien kanssa kiinnitä huomiota siihen, että teksti on luettavaa koko tekstin osalta.
Koulutusta saavutettavuuden haltuun ottoon
Kuulostaako lukemasi järkevältä, mutta mietit, miten opit kannattaisi viedä käytäntöön? Jos organisaatiosi kaipaa koulutusta aiheen tiimoilta tai verkkosivujen uudistusta saavutettavammiksi, niin ota yhteyttä ja jutellaan aiheesta lisää. Koulutuksessa voidaan teorian lisäksi esimerkiksi tehdä käytännönharjoituksia, jolloin opitut asiat jäävät paremmin mieleen ja tulevat tavaksi.