Jos sivujen html-määritykset tehdään hyvien tapojen ja oikeasti html:n periaatteiden mukaisesti, siinä on käytännössä kaikki, mitä saavutettavan verkkosivun tekemiseen tarvitaan. Kun asiat on määritelty html-tasolla oikein, esimerkiksi ruudunlukuohjelmat ymmärtävät ne myös oikein. Ongelmia alkaa tulla vastaan lähinnä siinä vaiheessa, jos lähdetään kikkailemaan.
Käytännössä kaikelle sivun mahdolliselle sisällölle löytyy html:stä oma semanttinen vastineensa. Ne ovat olemassa ihan siksi, että niitä voisi käyttää – oikeassa semanttisessa tarkoituksessaan. Jos teet taulukon, tee taulukko (table). Jos teet listan, tee lista (ol tai ul). Ehkä kuitenkin kaikkein tärkein semanttinen asia ruudunlukukäyttäjän näkökulmasta on otsikkotasot (h-elementit). Jos otsikko on tehty pelkästään tyylejä käyttämällä, ei sitä pysty sokea käyttäjä löytämään tai erottamaan otsikoksi. Eikä taas käänteisesti muuta kuin otsikkoa saisi laittaa h-elementin sisään, vaikka siinä vähän "ilmaiseksi" saisi muotoiluja.
Sen lisäksi, että taulukoita tulisi käyttää vain taulukkomuotoisen datan esittämiseen (ei layoutin tekemiseen – edes sähköpostiin lähetettävässä uutiskirjeessä), taulukoissa on muutakin semantiikkaa kuin pelkkä table-elementti. Ruudunlukuohjelmalle paremmin toimivan taulukon saa aikaan, kun taulukon otsikko- ja sisältösoluihin on käytetty oikeita elementtejä: otsikot ovat th ja sisältö td. Näin ruudunlukuohjelma osaa kertoa solussa myös sen sarakkeen otsikon, eikä käyttäjän tarvitse taulukkoa solu kerrallaan lukiessa yrittää laskea ja muistaa, mikä oli minkäkin sarakkeen otsikko.
Otsikoiden, eli niiden h-elementtien, tasot ovat myös tärkeitä sivuston hierarkian ymmärtämiseksi: sivun pääotsikko on h1, eikä samalla sivulla ole pääsisällössä toista h1-elementtiä. Alaotsikot menevät sitten hierarkkisesti numeroissa eteenpäin. Esimerkiksi Googlen hakusivulla haun tekemisen jälkeen on h1 "Google", h2 "Hakutulokset" ja jokaisella hakutuloksella on h3-otsikko.
Linkillä (a) ja painikkeella (button on eroa. Kyllä, linkin saa muistuttamaan visuaalisesti ja toiminnallisesti painiketta ja päinvastoin, mutta miksei sitten käyttäisi sitä, miltä haluaa elementin näyttävän ja joka sopii semanttisesti tilanteeseen paremmin. Ruudunlukuohjelman käyttäjän näkökulmasta on äärimmäisen hämmentävää, jos esimerkiksi ohjeissa puhutaan painikkeesta, eikä sivulla olekaan yhtään painiketta. Koodataan siis nekin tarkoituksensa mukaisilla elementeillä.
Lomakkeissa on tärkeä muistaa laittaa lomake-elementteihin liittyville label-elementeille for-attribuutit oikein. Näin ruudunlukuohjelma osaa lomake-elementtiin (tekstikenttä, checkbox yms) mennessään kertoa, mihin lomakkeen kohtaan ko. elementti kuuluu. Se siis kertoo esimerkiksi "sukunimi, tekstikenttä", ei pelkästään "tekstikenttä".
Kuvien alt-attribuutti on tärkeä ruudunlukuohjelman kannalta; ilman sitä ruudunlukuohjelma lukee kuvan tiedostonimen, tyyliin "h1938243_iso.png" (kylllä, näitä näkee paljon). Jos kuva on merkityksellinen sivuston toiminnan tai sisällön kannalta, alt-teksteihin on syytä kiinnittää erityistä huomiota.
Tärkein paikka alt-teksteille on silloin, kun kuva toimii linkkiinä: silloin alt-tekstin tulee olla käyttäjälle relevantti siinä tilanteessa. Jos vaikkapa verkkokaupassa valitaan pankki, jonka kautta maksu suoritetaan ja pankkien palveluihin vie kuvakkeet, on niillä oltava selkeät alt-tekstit joista tietää, mikä linkki vie mihinkin pankkiin. Linkkinä toimivan kuvan alt-tekstissä on oltava siis sama tieto, jonka näkevä saa kuvaa katsoessaan.
Tehtävien kooditiedostot ovat JSFiddlessä. Tässä pieni toimintaohje:
Palauta tehtävät sähköpostilla ronja.oja@helsinki.fi.
Illallisten ilmoittautumislomakkeessa on muutamia saavutettavuusongelmia. Laita labelit kohdilleen yms tarpeellista.
Verkkokaupan etusivu on täynnä pienempiä ja suurempia ongelmia. Ainakin kuville ja otsikoille pitäisi tehdä jotain. Tyylimäärityksiin ei ole pakko koskea – mutta saa, jos haluaa.
Kelan asiointipalvelu on ruudunlukuohjelman käyttäjälle melkoinen haaste. Lisää sivulle otsikoita ja pyri pääsemään eroon taulukolla tehdystä layoutista.