Säädetään
#1276. Sunnuntai, 19. kesäkuuta 2005 klo 19.21.32, kirjoittanut Jani. 9
Säädin tulostus-CSS:ää hiukan entistä paremmaksi. Jostain syystä nuo alun ylisuuret kirjaimet tekevät tulosteversiossa leveytensä mittaisen marginaalin koko tekstin laitaan (Firefoxin bugi vai CSS:n ominaisuus?) joten siitä piti poistaa float kokonaan. #
Sitten rupesin tutkimaan tätä esteettömyysasiaa. Jotkin kohdat Saavutettava.fi:n tarkistuslistalta olen onneksi oppinut jo kauan sitten (alt-tekstien tärkeys, selainikkunan kokoriippumattomuus) ja harrastanut niitä enemmän tai vähemmän koko ajan. Nyt tarkistin tuon fonttikoon suurentamisen vaikutukset, ja yllätyksekseni sivu toimi ihan hyvin, suorastaan täydellisesti ainakin vielä kohtuullisilla suurennuksilla. Jotta testailussa olisi mieltä eikä tulisi tehtyä turhaa työtä, pitäisi kuitenkin saada selville, millaisia fonttikokoja heikkonäköiset ihan oikeasti, käytännössä käyttävät. #
Linkki- ja leipätekstien ja taustan välinen kontrasti ei ehkä ole paras mahdollinen, mutta sen suhteen on se ongelma, että samalla, kun liian heikko kontrasti ei heikkonäköiselle ole hyvä, ei liian vahva kontrasti taas ole hyvä hyvänäköiselle: se rasittaa ainakin minun silmiäni. Siksi tykkään käyttää umpimustasta muutaman asteen vaaleampaa sävyä teksteissä. Luulen kuitenkin, että tämän kohdan tähtäimessä ovat varsinkin sellaiset yhdeksänkymmentälukulaiset sivut, joissa käytetään jotain radikaalia väriyhdistelmää. Valkoinen tausta ja tummansävyinen teksti on kuitenkin varmasti aina parempi kuin keltainen teksti sinisellä taustalla. Toinen ongelmalaji ovat varmaankin sivut, joilla käytetään tummaa tekstiä vain vähän sitä vaalemmalla taustalla. Itse asiassa Nuudelisoppa on sellainen, mutta aion keskittää tarmoni nyt ensi sijassa tänne marginaaliin. #
Saavutettava.fi:n listalla puhutaan näkyvistä pikalinkeistä (skip menus), mutta toisaalla minusta samassa yhteydessä puhutaan näkymättömistä linkeistä. Joka tapauksessakaan kummankaanlaisia täältä ei löydy, enkä ole ihan varma ymmärränkö edes, mitä niillä tarkalleen ottaen tarkoitetaan. #
Ilman CSS:ää tämä näyttää varmaan ihan karmivalta, mutta toisaalta sen mittaamiseen ei graafinen selain olekaan hyvä väline; pitää asentaa Lynx ja testata. Tekisi myös mieleni kokeilla jotain lukuohjelmaa, mutten vielä löytänyt mitään selkeitä vinkkejä siitä, mikä on sokeille tarkoitettujen selainten Firefox tai edes, että onko sellaista. #
Watchfiren WebXACT antaa ihan pätevänoloisen raporttinsa mukana myös tietoa siitä, kuinka hyvin sivusto vastaa W3C:n esteettömyysohjeistuksia. #
Lopuksi vielä muutamia muistiinpanoja alt-teksteistä: #
- Vaikka alt-attribuutti onkin pakollinen, sen sisällön voi ja itse asiassa kannattaakin jättää tyhjäksi silloin, kun kuva on tarkoitettu koristeelliseksi tai tekstin muotoilun avuksi. Varsinkin pienet koristekuvat (ehkä kuvituskuvatkin?) olisi tästäkin syystä parempi määritellä CSS:ssä kuin HTML:n joukossa.
- Jos kuva ei ole koristeellinen vaan sisällön kannalta olennainen, pelkän alt-attribuutin ohella voi olla syytä käyttää myös longdescription-attribuuttia. Nykyselaimet tosin eivät juurikaan sitä tue, mutta tämä voi hyvinkin muuttua tulevaisuudessa. Sitä odotellessa voi sen ohella käyttää Watchfiren mainitsemaa niin sanottua d-linkki-tekniikkaa: kuvan yhteyteen laitetaan D-kirjain, joka toimii linkkinä pitempään kuvaukseen kuvan sisällöstä.
- Lisää alt-teksteistä löytyy GAWD:n sivuilta.
- Longdesciin voi näköjään sisällyttää myös URI:n, jolla osoitetaan d-linkin tavoin kuvan kuvaukseen.
[muokkaukset]
[muokkaus][klo]19:39[/klo] Lisäsin linkin WATSin pätkään URI:stä longdescissä.[/muokkaus]
[/muokkaukset] #
Pikalinkeillä annetaan käyttäjälle mahdollisuus ohittaa suoraan sivuston tietyt osat. Niiden näkyvyydestä kaikille käyttäjille on myös aikanaan keskusteltu ja useimmiten suositus on ollut, että niitä ei ole aina syytä peitellä. Esteettömässä web-julkaisemisessa on kuitenkin kyse _kaikista_ käyttäjäryhmistä, ei vain heikkonäköisistä.
Kytkemällä CSS pois käytöstä, nähdään nopeasti dokumentin todellinen rakenne. Hyvä rakenne auttaa hahmottamaan ja nopeuttaa silmäilyä. Lisäksi monissa ruudunlukijaohjelmistoissa on mahdollisuus lukea yhteenveto otsikkotasoista, jolloin käyttäjä voi siirtyä suoraan kiinnostavaan kohtaan. Eräänlaista silmäilyä sekin.
Automaagiset testausohjelmat ovat hieman arveluttavia. Niiden käyttäminen nopeaan, ylimalkaiseen testaukseen on toki suotavaa. Ne eivät osaa erottaa koristeellisia ja informatiivisia kuvia toisistaan, joten tyhjä alt-attribuutti riittää. Ne eivät myöskään ota juurikaan kantaa CSS:n avulla määriteltyihin, huonoihin väreihin ja niin edelleen.
Josku: “Pikalinkeillä annetaan käyttäjälle mahdollisuus ohittaa suoraan sivuston tietyt osat.”
Eli meinaako se, että vaikkapa tällaisessa blogissa voisi olla otsikoiden ohessa sellaiset linkit, joilla voisi hyppiä yksittäisten merkintöjen yli? Siten minä sen käsitin, mutten tosiaan ollut sitten ihan varma, enkä oikeastaan ole vieläkään. “Sivuston tiettyjen osien ohittaminen” menee monitulkintaisuudessaan yli hilseeni.
“Automaagiset testausohjelmat ovat hieman arveluttavia. Niiden käyttäminen nopeaan, ylimalkaiseen testaukseen on toki suotavaa.”
Jep. En vain oikein tiedä parempaakaan tapaa testata; tahalliseen selailun heikentämiseen (vaikkapa näyttöä ja juuri tuota mainitsemaani kirjainkokoa säätämällä) pitäisi ensin löytää jotkut järkevät, käytännölliset rajat, koska varmaan parhaimmatkin web-sivut saa tolkuttoman hankalastisaavutettaviksi riittävästi säätämällä. Sivujen selaaminen nyrkkisääntölistojen kanssa ei sekään minusta oikein käy testaamisesta.
Parasta olisi tietysti oikeasti esteettömyyttä tarvitsevilta ja siihen tähtääviä tietoteknisiä välineitä käyttäviltä käyttäjiltä saatava palaute, mutta siinäkin on se ongelma, että jos sivusto on heiltä saavuttamattomissa, niin miksi ja mitenpä tänne eksyisivät.
Kiitoksia kommentistasi!
“Eli meinaako se, että vaikkapa tällaisessa blogissa voisi olla otsikoiden ohessa sellaiset linkit, joilla voisi hyppiä yksittäisten merkintöjen yli?”
Tietyillä osilla tarkoitin (usein toistuvia) elementtejä, kuten rakenteellisesti ennen sisältöä oleva “sivupalkki”.
Marginaalissa ei ainakaan yksittäisessa merkinnässä ole moinen tarpeen. Mutta esimerkiksi etusivulla “suoraan sisältöön” -tyyppiselle pikalinkille (#textbody) voisi olla tarvetta.
Ahaa, no nyt tajuan! Tuo “suoraan sisältöön” onkin hyvä idea, toteutan sen pikimmiten. Kiitoksia hyvistä vinkeistäsi!
Meinaa häikäistä kokonaan valkoinen tausta minun silmiäni, tuntuu tuo tausta olevan enemmän esillä kuin teksti. Hieman sama efekti kuin lukisi auringonpaisteessa valkoiselta A4:lta tekstiä, paljon lievempänä toki. Tottuu silmät kuitenkin melko nopeaan. Itse tykkään vanhoista terminaalityylisistä mustalla pohjalla vaaleanharmaata tekstiä väreistä, jos joutuu paljon lukemaan ruudulta.
Kalle: Jep, tämäpä se tahtoo olla ongelmana; minulla itselläni taas se mustalla pohjalla oleva vaalea teksti tahtoo rasittaa silmiä pitemmän päälle.
Jostain syystä ei kuitenkaan yhtä pahasti silloin, kun kyseessä on ihan oikea tekstipääte eikä blogi. Terminaalissa ei kyllä olekaan niin paljon tekstiä eikä sitä ole tarkoituskaan lukea kaikkea toisin kuin blogitekstiä.
Mutta pitää kokeilla, kestäisikö tämä oma taustani säätöä hiukan tummemmaksi ilman, että kontrasti siitä liiaksi kärsisi.
Säädin sitä nyt hiukan vähemmän vaaleaksi. Eron entiseen näkee vaikkapa tästä kommentointilootasta. Toivottavasti ei enää käy silmiin yhtä paljon kuin ihan valkoisella taustalla.
Joo, ei enää häikäse täälläkään. Tämähän on nyt kuin kirjasta tekstiä lukisi. Tuosta fonttikoosta, itselläni tekee mieli monestikin painaa Ctrl ja + jolla saa fonttia suuremmaksi selaimessa, vaikka minulla normaali näkökyky on. 17″ putkelta lueskelen 1024*768 resoluutiolla. Hyvin näyttäis tässä tuo teksti käyttäytyvän vaikka suurentaa fonttia. Ainut on ehkä se, että tuossa on niin kapeasti tilaa tekstille, ettei monta sanaa mahdu riville kun fonttia suurentaa.
Kalle: Hyvä, ettei enää häikäise niin paljon. Kiitoksia palautteen ohella myös näppärästä näppäinoikotiestä, jota en tätä ennen tiennytkään!
Jos määräisin palstanleveyden kirjainkoon yksiköissä (em), tuo vähäsanaisten rivien ongelma ehkä helpottuisi, mutta se vaatii luultavasti jo hiukan enemmän paneutumista, kun olen opetellut määräämään leveyden pikseleissä.