JavaScriptillä voidaan tehdä toimintoja, jotka helpottavat lomakkeiden täyttämistä, linkkien seuraamista ja muuta käyttöä. Enimmäkseen kuitenkin JavaScriptin käyttö nykyisin aiheuttaa esteellisyyksiä, ja siksi tarvitaan oikeita menettelytapoja sen käytössä.
Tässä käsitellään JavaScriptiä esteettömyyden kannalta muutaman esimerkin valossa. Lisätietojen kautta löytyy järjestelmällisempiä esityksiä aiheesta.
JavaScriptillä voidaan liittää lomakkeisiin syöttötietojen tarkistuksia, joiden ansiosta käyttäjä ehkä saa heti palautteen, jos lomakkeen täyttämisessä on tehty virhe. Tällöin on aina syytä tehdä vastaava tarkistus myös palvelimessa. JavaScriptin käytöllä voidaan helpottaa etenkin niiden ihmisten toimintaa, joilla on muistin ja hahmottamisen häiriöitä. Jos palautteen saa heti, kun on tehnyt virheen, on helpompi käsitellä ja korjata se.
Seuraavassa on pieni alkeisesimerkki. Siinä on lomake, jossa on kaksi syöttökenttää, joihin on tarkoitus kirjoittaa kokonaisluvut. Lomakkeen lähettäminen sitten saa aikaan, että palvelimessa toimiva ohjelma laskee lukujen tulon ja lähettää vastauksen selaimelle. Jos syöttötiedot eivät olekaan lukuja, kyseinen ohjelma antaa virheilmoituksen. Voinet kuvitella, että realistisessa esimerkissä, jossa lomake on laaja, syntyy helposti ongelmia, kun käyttäjä ei hahmota, missä hän teki virheen ja kun hänen on vaikea palata ajattelemaan kohtaa, jonka jo luuli hoitaneensa.
Esimerkissämme on asia pyritty hoitamaan JavaScriptillä.
Jos kenttään
on kirjoitettu vaikkapa sana "kaksi", niin painettaessa tab-näppääintä
tai napsautettaessa seuraavaa kenttää tai yritettäessä muutoin
siirtyä pois virheellisen syötteen sisältävään kenttään tulostuu
virheilmoitus (ja kursori jää kyseiseen kenttään).
Teknisesti sanottuna tässä käytetään
onblur-määritettä.
Lisämukavuutta voi saada, jos JavaScriptillä onnistutaan
kokonaan estämään muiden kuin numeroiden kirjoittaminen kyseisiin
kenttiin.
Tässä voidaan käyttää onkeypress-määritettä.
Seuraava muunnelma pyrkii tekemään niin:
Mitä parempi virheenkäsittely halutaan tehdä, sitä enemmän koodia tarvitaan ja sitä suurempi on mahdollisuus tehdä virheitä virheenkäsittelyssä. Lisäksi kannattaa pohtia seuraavia asioita:
Joka tapauksessa on syytä kiinnittää huomiota siihen, että ennen syöttökenttiä on riittävät sanalliset selitykset siitä, millaista syöttötietoa tulee kirjoittaa ja missä muodossa. Tämä on usein olennaisempaa kuin pyrkiä teknisin keinoin auttamaan käyttäjää välttämään virheitä.
Seuraavassa on kaksi tyypillistä tilannetta, joissa JavaScriptin ajattelematon käyttö aiheuttaa vakavan esteellisyyden.
Seuraavassa on JavaScriptillä tehty alasvetovalikko, jolla päästään eri sivuille:
Jos kuitenkin selaimessa ei ole JavaScript-tukea käytössä, seurauksena on valikko, josta voi valita ihan mitä vain ilman, että mitään tapahtuu. Se vastaa sitä, miten seuraava lomake on toimimaton, vaikka JavaScript olisi käytössä: JavaScript-tuen puute voi johtua siitä, että käytössä on erikoisselain, joka ei lainkaan tue JavaScriptiä. Lisäksi monet kääntävät JavaScript-tuen pois käytöstä selaimessaan, koska niin usein JavaSciptiä käytetään häiritseviin toimintoihin kuten uusien ikkunoiden avaamiseen tai koska JavaScriptiä pidetään tietoturvaongelmiana.JavaScript-pohjainen "suunnistusvalikko" onkin yleensä parasta korvata linkkilistalla, kuten sellaisella, joka on jäljempänä Lisätietoja-kohdassa. Jos kuitenkin halutaan käyttää alasvetovalikkoa, on kaksi vaihtoehtoa:
form-elementtiin action-määrite,
joka viittaa palvelimessa toimivaan yksinkertaiseen
ohjelmaan, joka tekee uudelleenohjauksen
annetulle sivulle. Lisäksi tarvitaan elementin sisälle
input type="submit" -elementti, joka kuitenkin voi
olla noscript-elementin sisällä.
form-elementti dynaamisesti
document.write()-metodilla ja käytetään
noscript-elementtiä, jonka sisällä on ilman JavaScriptiä
toimiva vaihtoehto (käytännössä linkkilista).
Usein halutaan, että linkin seuraaminen aiheuttaa sivun avautumisen uuteen ikkunaan, vieläpä niin, että ikkuna saa jotkin halutut ominaisuudet kuten koon. Tämä ei yleensä ole järkevää, mutta jos niin tehdään, on asia syytä hoitaa niin, että linkki toimii myös ilman JavaScriptiä.
Eräs toimiva menettely on seuraavanlainen:
<a href="http://www.w3.org/" target="WWW" onclick=
"window.open('','WWW','width=150,height=150,resizable=1');"
>W3C</a>
Tämä näyttää seuraavanlaiselta: W3C
Erona näennäisesti hiukan yksinkertaisempaan ratkaisuun
<a href="#" onclick="window.open('http://www.w3.org/','WWW','width=150,height=150,resizable=1'); return false">W3C</a>
on se, että tällaisella tempulla tehty "linkki"
(W3C) ei toimi lainkaan,
jos JavaScript
ei ole käytössä. Mikä pahempaa, se todennäköisesti näyttää
linkiltä
(W3C), ja sen seuraaminen saattaa aiheuttaa esimerkiksi
siirtymisen sen sivun alkuun, jolla linkki on.