Saavutettavien verkkosivujen suunnitteluopas
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/selkea_sivupohja.png)
Suunnittele selkeät sivupohjat
Varmista, että pääsisältö erottuu selkeästi sivunäkymän muista osioista.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/selkea_lomake.png)
Suunnittele selkeitä lomakkeita
Varmista, että kaikki sivustolla olevat lomakkeet ovat selkeitä, loogisia ja käytettäviä myös avustavilla teknologioilla.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/kuville_tekstivastine_1.png)
Lisää tekstivastineet kaikelle ei-tekstuaaliselle sisällölle
Kaikille kuville, videoille ja äänitiedostoille täytyy olla vaihtoehtoinen esitystapa näkö- ja kuulorajoitteisia käyttäjiä varten.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/interaktiivinen_elementti.png)
Tee sivuston interaktiivisista elementeistä tunnistettavia
Varmista, että linkeistä, painikkeista ja muista interaktiivisista kohteista käy ilmi, mitä tapahtuu, kun niitä käytetään.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/tekstin_koko.png)
Tekstin koko ja kirjasintyyppi
Kirjoita riittävän suurta tekstiä ja käytä selkeää, päätteetöntä kirjasintyyppiä.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/lukemisjarjestys.png)
Looginen lukemisjärjestys
Varmista, että sivun lukemisjärjestys on ruudunlukuohjelmalla ja näppäimistöllä käytettäessä sama kuin visuaalisesti.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/selkeaa_kielta.png)
Käytä selkeää ja ymmärrettävää kieltä
Kirjoita sisällöt selkeällä ja hyvällä yleiskielellä. Vältä monimutkaisia lauserakenteita, sanontoja ja hankalien sanojen käyttöä.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/ladattava_tiedosto.png)
Varmista, että sivustolta ladattavat tiedostot ovat saavutettavia
Myös sivustolta ladattavien tiedostojen, kuten PDF-dokumenttien, on oltava saavutettavia.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/taulukko.png)
Käytä taulukkoja harkiten
Käytä taulukkoja vain suurten datamassojen esittämiseen. Älä käytä taulukkoja muotoilutarkoitukseen.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/otsikkorakenne.png)
Suunnittele sivun otsikkorakenne huolellisesti
Varmista, että sivun pääsisällöllä on yksi ensimmäisen tason otsikko. Otsikkorakennetta voi ajatella ikään kuin sivunäkymän sisällysluettelona.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/otsikot_linkit.png)
Nimeä linkit ja otsikot ymmärrettävästi
Linkin nimestä tulee käydä ilmi, mihin se vie käyttäjän ja otsikon nimestä tulee selvitä, mitä sen alla on.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/riittava_tummuuskontrasti.png)
Muista riittävä tummuuskontrasti
Tekstin ja elementtien sekä taustan välisen tummuuskontrastin on oltava riittävä.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/linkki_suoraan_sisaltoon.png)
Lisää ”Hyppää sisältöön”-linkki
Sivunäkymän ensimmäisen elementin kannattaa olla ”Hyppää sisältöön”-niminen linkki, joka siirtää käyttäjän suoraan sivun pääsisältöön.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/etusivu.png)
Lisää jokaiselle sivulle linkki sivuston etusivulle
Jokaisessa sivunäkymässä on oltava helposti löydettävä linkki koko sivuston etusivulle.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/kayttajan_kieli.png)
Varmista, että sisällölle on määritelty kieli
Sisällölle pitää määritellä kieli HTML-koodiin, jotta esimerkiksi ruudunlukuohjelmat ja hakukoneet voivat päätellä sivuston kielen ohjelmallisesti.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/korostus.png)
Asioiden korostaminen
Käytä useaa erilaista visuaalista keinoa kohteiden korostamiseen ja merkityksen välittämiseen.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/pause.png)
Automaattisesti käynnistyvä mediasisältö
Älä käytä verkkosivuilla pitkiä, itsestään käynnistyviä mediasisältöjä. Varmista, että käyttäjän on helppo pysäyttää mediasisältö.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/nimeaminen.png)
Sivun nimeäminen (title)
Nimeä verkkosivuston jokainen yksittäinen alasivu ymmärrettävästi ja selkeästi.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/nakyva_kohdistin.png)
Näkyvä kohdistin
Varmista, että jokaisen toiminnallisen elementin ympärille piirtyy reunat, kun verkkosivua selataan käyttäen sarkainta (Tab ↹)
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/sisallon_maara_sivulla.png)
Sisällön määrä
Kiinnitä huomiota siihen, ettei sivunäkymässä ole liikaa sisältöä ja erilaisia kohteita.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/kayttajan_sijainti.png)
Käyttäjän sijainti sivulla
Varmista, että käyttäjän on helppo päätellä, missä kohtaa sivustoa hän sijaitsee.
![](https://papunet.net/saavutettavuus/wp-content/uploads/2023/01/hakutoiminto.png)
Hakutoiminto
Lisää keskisuurille ja suurille sivustoille hakutoiminto.