WWW-sivujen toteuttaminen esteettömästi
Esteettömien WWW-sivujen toteuttaminen on jaettu kolmeen artikkeliin,
joissa käsitellään WWW-sivujen tekemistä aina perusteista hieman monimutkaisempiin rakenteisiin saakka. Artikkeleissa
käsitellään ainoastaan WWW-sivujen rakenteellista puolta, joten ulkoasuun liittyviä asioihin voi perehtyä erikseen
CSS-osuudessa.
Esteettömän WWW-sivun rakenne
Esteettömän WWW-sivun toteuttaminen aloitetaan jo sivun tai sivuston suunnitteluvaiheessa.
Ensimmäinen tehtävä on erottaa rakenne ja ulkoasu toisistaan, jonka jälkeen paneudutaan
sisällön rakenteen merkitsemiseen. Sivun tekemisessä kannattaa myös vältellä esteellisiä ratkaisuja, kuten taulukkotaittoa, kehyksiä ja liian tiukkoja oletuksia sivun käyttäjistä. Lue lisää artikkelista "Esteettömän WWW-sivun rakenne".
Esteettömän WWW-sivun toteuttaminen
Yksinkertainen WWW-sivu saadaan toteutettua valmiilla dokumenttirungolla ja muutamien rakenteellisien HTML-elementtien avulla. Tarpeellisimpia HTML-elementeistä ovat eritasoiset otsikot, leipätekstikappaleet sekä järjestämätön ja järjestetty lista. Lisäksi tarvitaan myös yleisiä korostuksia varten omat rakenteelliset määrityksensä. WWW-sivun valmistuessa on tärkeää tarkistaa WWW-sivulle tehtyjen määritysten oikeellisuus validaattorin avulla. Lue lisää artikkelista "Esteettömän WWW-sivun toteuttaminen".
Usein tarvittavia HTML-rakenteita
WWW-sivuja tehtäessä tarvitaan sivuille liittää taulukkomuotoista tietoa, tekstiä havainnollistavia kuvia, lisätietoa antavia linkkejä ja erilaisia lainauksia. Kaikkien elementtien lisäämisessä voidaan ottaa huomioon sivun erilaiset käyttäjät, joten tehtävät ratkaisut saadaan mahdollisimman esteettömiksi. Sivujen tekijöille tulee muutamia kiusallisia HTML-elementteihin liittyviä "kirjoitusvirheitä, jotka voi välttää tiedostamalla ongelmakohdat. Sivuille ja osoitteisiin tulevat erikoismerkit joutuu koodaamaan sivun esteettömyyden varmistamiseksi.
Lue lisää artikkelista "Usein tarvittavia HTML-rakenteita"
Esteettömien WWW-sivujen toteuttaminen - TOP13
Seuraavaan on koottu WWW-sivujen tekemiseen liittyviä periaatteita, joita noudattamalla ollaan jo pitkällä esteettömien ja käytettävien WWW-sivujen tekemisessä.
Listattuja asioita käsitellään tarkemmin edellä mainituissa artikkeleissa.
- Määritä dokumentin rakenne ja ulkoasu erikseen! Rakenteen määrittely tehdään HTML-tiedostoon ja ulkoasun määrittely tehdään CSS-tiedostoon.
- Käytä oikeaa elementtiä rakenteellisesti oikeassa paikassa! Esimerkiksi otsikoissa käytetään h?-elementtejä.
- Älä taita sivua taulukolla! Taulukoiden käytöllä taittamiseen sivujen rakenteesta tulee vaikeasti ymmärrettävä ja mukautumaton, joten sivujen taitto täytyy tehdä CSS:n avulla.
- Älä käytä kehyksiä! Kehyksien käyttö rajaa sivuilta pois monia käyttäjiä. Kehyksien käytön voi kiertää CSS:n avulla.
- Älä käytä turhia tekniikoita sivuilla! Käyttäjää ei luultavasti kiinnosta sivustosi tekniikka, vaan sen sisältö. Jos tekniikkaa käyttää, niin sille täytyy löytyä vaihtoehto eikä informaatio saa riippua tekniikan käytöstä.
- Älä avaa selaimeen uusia ikkunoita! Käyttäjä eksyy helposti ikkunaviidakkoon ja hän osaa kyllä avata itse uuden ikkunan halutessaan.
- Älä kiinnitä sivun kokoa! Et voi tietää käyttäjästä mitään ja keskivertokäyttäjää ei ole olemassakaan. Ainoastaan käyttäjä tietää millaisilla asetuksilla hän katsoo sivua.
- Validoi sivut ja käytä standardeja dokumenttityyppejä!
Validoinnin ja dokumenttityypin avulla varmistetaan, että sivujen rakenne on kunnossa, jolloin selaimet osaavat näyttää sivut oikein.
- Määritä dokumentin kieli ja merkistö! Dokumentin kielen ja merkistön pitää olla oikeita, jotta selain pystyy näyttämään dokumentin kunnolla.
- Älä tee sivuista liian raskaita! Optimoi sivuille tuotavat kuvat esimerkiksi kuvankäsittelyohjelmalla (rajaaminen, formaatit ja koko).
- Määrittele kuviin havainnolliset alt-tekstit! Kaikki eivät halua tai voi katsoa kuvia, joten informatiivisiin kuville täytyy tehdä hyvät vaihtoehtoiset tekstit.
- Käytä sivun otsikkona (title) mahdollisimman havainnollista tekstiä! Otsikkoteksti on yleensä ensimmäinen asia, joka sivusta on nähtävillä.
- Älä käytä "Klikkaa tästä"-linkkejä! Linkkitekstin täytyy olla havainnollinen myös asiayhteydestä irrotettuna!