Joe Clark & WCAG 2

A List Apart: To Hell with WCAG 2 (Web Content Accessibility Guidelines 2.0)

Viiden vuoden kehitystyö uuden verkkosisällön saavutettavuusohjeen (WCAG 2) osalta alkaa olla loppussuoralla. Hieno asia, kaikki ovat iloisia ja suosituksenkin pitäisi olla näin pitkän kehitystyön jälkeen vähintäänkin erinomainen.

Nykymuotoisen suositusluonnoksen kovaäänisin vastustaja, kanadalainen tietokirjailija, toimittaja ja esteettömyys-asiantuntija Joe Clark ampuu tuoreessa A List Apartin numerossa uuden suosituksen alas. Artikkelissa kyseenalaistetaan niin itse suositusluonnos kuin työryhmän toimintatavatkin.

Artikkelissa esiin nostettuja epäkohtia ovat mm.:

  • suosituksen (ja oheisdokumentaation) massiivinen koko
  • englanninkielisyys
  • suositusluonnoksen lyhyt kommentointiaika
  • määritelmät
  • testattavuus
  • vaikeaselkoisuus / tulkinnanvaraisuus

Joe Clarkin mukaan uusi suositus ei välttämättä ole edes parannus jo olemassa olevaan suositukseen (WCAG 1.0) verrattuna. Hän kehottaakin lukijoita kommentoimaan luonnosta ja näin vaikuttamaan sen lopulliseen muotoon. Nykymuotoisen suosituksen seuraaminen onkin artikkelin esille nostamien ongelmien takia hankalaa – käytännössä siis vain aniharva, jos kukaan pystyisi täyttämään kaikkia siinä esitettyjä saavutettavuusvaatimuksia. Voi vain toivoa, että työryhmä ei anna henkilökohtaisten erimielisyyksien vaikuttaa asiaan, ja että ainakin artikkelissa mainittuihin epäkohtiin puututtaisiin ennen kuin luonnos saa suositus-statuksen.

Artikkelin lopussa mainitaan myös WCAG Samurai -sivusto, jolla tullaan ehdottamaan korjauksia ja laajennuksia sekä olemassa olevaan että tulevaan ohjeistukseen.

Tulevan suosituksen suomenkielistä versiota ei kannattane odotella pitkään aikaan, koska sen julkaiseminen ilman käännettyä oheisdokumentaatiota ei ole järkevää.

Lisäys: WCAG 2.0-suositusluonnoksen kommentointiaikaa on jatkettu kolmella viikolla.

Modernit ruudunlukuohjelmat ja CSS-taitto

Access Matters -blogissa on julkaistu yhteenveto siitä, kuinka kolme johtavaa ruudunlukuohjelmistoa (Jaws 6.1, Window Eyes 5.0, IBM Home Page Reader 3.04) tulkitsevat CSS-aseteltuja dokumentteja. Testidokumentteina toimi neljä eri css Zen Garden-sivuston leiskaa (000, ZG 019, ZG 151 ja ZG 167).

Kaikki testatut ohjelmistot lukevat dokumentin sisällön siinä järjestyksessä kuin se lähdekoodissa on määritelty, välittämättä CSS -asettelusta. Tämä tieto helpottanee ainakin silloin, kun halutaan jo suunnitteluvaiheessa kiinnittää huomiota (uudempien) ruudunlukuohjelmistojen käyttäjiin: tärkein asia ensimmäiseksi. Graafisessa versiossa voidaan CSS:n avulla tarjota kaksi- tai kolmepalstainen asettelu.

Artikkelin lopussa löytyvästä taulukosta huomaa helposti, kuinka erilaiset FIR-tekniikat (Fahrner Image Replacement, tekniikka jossa CSS:n avulla korvataan tekstiä kuvalla) ja varsinkin CSS:ssa käytetty display: none aiheuttavat selkeitä ongelmia ohjelmistoille.

Loppuun maininta viime aikoina ulkomaisissa design-blogeissa käsitellystä, Joe Clarkin ehdottamasta, Zoom-versiosta heikkonäköisille. Idea on yksinkertainen. Tarjotaan sivustosta CSS:n avulla muokattu versio, joka muun muassa:

  • on yksipalstainen
  • käyttää oletusarvoisesti suurta fonttikokoa
  • käyttää yksinkertaistettua navigointia
  • tarjoaa täsmälleen saman sisällön kuin graafinen versio
  • toteutetaan pelkästään CSS:n avulla, eikä merkkausta muuteta.

Aiheesta lisää (englanniksi):

  1. A List Apart: Big, Stark & Chunky (Joe Clark)
  2. Joe Clark: Zoom the Web: The problem of giant fonts – @media 2005-tapahtuman muistiinpanot
  3. 456 Berea Street: Inverted zoom: designing for low vision (Roger Johansson)
  4. Juicy Studio: Zoom for Low Vision (Gez Lemon)
  5. Stopdesign: Zoom layout (Douglas Bowman)
  6. Adactio: Zooming the Web (Jeremy Keith)

Myös allekirjoittanut tarjoaa harjoituksen vuoksi vaihtoehtoista Zoom -versiota blogistaan.

Lapset ja esteettömyys – sillä on väliä

Kirjoittaja: Derek Featherstone. Artikkeli on julkaistu alunperin Box of Chocolate-blogissa otsikolla Children and Accessibility: It matters.


Hanki lapsia. Jos se ei saa sinua vakuuttuneeksi siitä, että web-sivujen tulisi olla esteettömiä, en tiedä mikä saisi.

Tulin isäksi uudelleen – Kambell, kolmas lapsemme syntyi vain reilu pari viikkoa sitten. Olemme todella onnekkaita. Kuitenkin, mitä enemmän yritän saada aikaan, sitä useammin huomaan lasten olevan jollain tavalla kuin rajoittimia. Tämä on puoliksi vakava, puoliksi humoristinen vilkaisu siihen, miksi näin… 😉

Kuulon heikkeneminen

Tämä on melko ilmeinen. Lapset ovat kovaäänisiä. Minulla on toimistotila kotitalon kellarissa – ja vaikka lapset tottelevatkin “Älä tule isin toimistoon kun ovi on suljettu tai ennen illallista” sääntöä, uskokaa kun sanon, ettei sillä ole mitään vaikutusta siihen mitä yläpuolellani tapahtuu. Toimistoni on suoraan keittiön alapuolella. On uskomatonta kuinka kovaa melua saa aikaan kahden kilon paketti pastaa, kun se tyhjennetään hitaasti keittiön keraamiselle laattalattialle. Kellaritila toimii myös erinomaisena resonanssikammiona, minne välittyy mm. tuolin tai jakkaran vetäminen huoneen poikki ikävän selvästi. Onnea vaan multimediasisältöjen kanssa.

En pystynyt kuuntelemaan Dave Winerin selitystä weblogs.comin sulkemisesta, joten olin erittäin tyytyväinen löytäessäni siitä tekstiversion joko silmäiltäväksi tai tulostusta varten. Myös SMIL-versio olisi ollut mukava, mutta epäilen etteivät lapset olisi antaneet mahdollisuutta kuunnella sitä. Vaihtoehtoiset formaatit antavat kiireisille vanhemmille lisää valinnanmahdollisuuksia.

Kognitiiviset haitat

Perheeseemme kuuluu kolme lasta. Ympärillämme on koko ajan niin paljon meteliä, että meillä on vaikeuksia muodostaa yhteyttä. Vaimollani ja minulla ei ole juuri koskaan mahdollisuutta käydä normaalia keskustelua, saati sitten tehdä jotain webissä. Emme pysty keskittymään. Olemme myös hyvin väsyneitä, joten emme aina jaksa kiinnittää huomiota asioihin niin kuin pitäisi.

Tiettyihin aikoihin päivästä en pysty lukemaan ruudulta mitään joko siksi, että ympärilläni on niin paljon melua tai yksinkertaisesti siksi että olen liian väsynyt. Voisitko kenties auttaa meitä kaikkia? Tee asioista helposti silmäiltäviä. Tarjoa yhteenveto dokumentista, jotta voimme päättää kannattaako se lukea kokonaan. Tee asiat helppokäyttöisiksi ja helposti ymmärrettäviksi kaikille.

Näkörajoitteet

Työskentelen siis kotona, jotta voisin viettää joustavasti aikaa lasten kanssa myös päivisin. Kun vaimoni täytyy hoitaa jotain juoksevia asioita tai hänen vain yksinkertaisesti pitää päästä hetkeksi ulos talosta, minulla on yleensä yksi lapsi sylissä tietokoneen ääressä. Tämä on yleensä hyvä tilaisuus tarkistaa mitä säännöllisesti seuraamillani sivustoilla, kuten Andyn Stuff and Nonsense, Daven Mezzoblue, Scrivsin whitespace, Miken Phark, tai Gezin JuicyStudio, on tarjottavana.

En kuitenkaan pysty tällöin lukemaan normaalilta etäisyydeltä. En voi pitää lasta, joka sillä hetkellä on sylivuorossa, liian lähellä näppäimistöä – huitovat kädet ja jalat eivät ole hyväksi tietokoneelle tai mielenterveydelle. Joten, yleensä työnnän näppäimistön kauemmas, suurennan tekstin kokoa ja siirryn hieman kauemmas työpöydästä. Tarvitsen siis skaalautuvaa tekstiä… Käytän Firefox-selainta, joten tekstin suurentaminen ei ole ongelma, mutta ajattele niitä isiä ja äitejä joilla ei ole tätä mahdollisuutta.

Motoriset ongelmat

Kun lapsi nukkuu sylissä, pystyn kirjoittamaan vain muutamalla sormella. Tämä ei ole hyvä asia. Ehkä minunkin pitäisi hankkia puolikas näppäimistö?

Mainitsinko jo, että ohjauslevyt eivät pidä niille kaatuneesta mehusta tai muista ruumiineritteistä, joita varsinkin vastasyntyneistä karkaa ulos?

Kyllä, näppäimistö on ainoa järkevä väline vanhemmille – tai ehkä minunkin pitäisi asentaa koneeseeni puheentunnistusohjelmisto?

Vaikuttaa myös siltä, että olen kadottanut hienomotoriikkani kontrollin. Kun yritän navigoida tai täyttää lomakkeita, en saa pidettyä kättäni paikoillaan – joku nykii paidanhihasta tai vetää kädestä kysellen ties mitä.

Tekniset rajoitteet

Muistatteko sarjaporttiin liitettävän hiiren? 9-pinniset, jotka liitettiin koneeseen ruuvaamalla ne porttiin kiinni. Mukavan jämäkkä eikä irronnut helposti… PS-2 – ja USB-hiiret sen sijaan irtoavat varsin helposti liitännöistään. Varsinkin silloin kun lapset ryömivät ja konttaavat ympäriinsä.

Hiireni putosi lattialle enkä pysty nostamaan sitä. En ainakaan silloin kun lapsi, jonka nukuttamiseen meni 45 minuuttia, nukkuu sylissäni. Ok, navigoidaan sitten näppäimistöllä.

Pyydänkin, että teet sivustosi esteettömäksi… voi olla, että kiität siitä itseäsi myöhemmin.

podGuide: Web-sisällön saavutettavuusohje

Kirjoittaja: Yoji Hirabayashi


Saavutettava.fi on trendikäs ja tarjoilee iPodin omistaville lukijoilleen Web-sisällön saavutettavuusohje-podGuiden. Opas on koottu käyttäen hyväksi valmiiksi käännettyä materiaalia. Suurimpana syynä tähän oli helppous ja nopeus, toisena yhdenmukaisen termistön käyttö.

Oppaan käännöksestä vastaa pääosin W3C Suomen toimiston toiminnanjohtaja Ossi Nykänen. Myös Minna von Zansenin ja Katariina Kiiliäisen (Celia) kääntämää Wai-ohjetta käytettiin apuna.

Asennusohjeet

  1. Varmista ensin, että iPodisi tukee Muistiinpanot-toimintoa (Notes), joka vaatii Minin, kolmannen tai neljännen sukupolven laitteen.
  2. Lataa tiedosto [zip] ja pura se valitsemaasi paikkaan
  3. Tuo iPod näkyviin ulkoisena levynä normaaliin tapaan.
  4. Avaa iPodista Notes-kansio ja siirrä purkamasi kansio (WCAG 1.0) sinne.
  5. Viimeistele asennus poistamalla levy käytöstä.
  6. Siinäpä se.

Pääset käyttämään ohjeistusta valitsemalla päävalikosta Extrat (Extras), mistä valitaan Muistiinpanot (Notes), josta löytyy merkintä WCAG 1.0.

Lisää oppaita löydät podSites-sivustolta [en].

CSS-lunttilappu

Tämä on suomenkielinen versio Dave Shean julkaisemasta ja ylläpitämästä CSS Crib Sheetista. Käännös: Yoji Hirabayashi. Lupa julkaisuun on pyydetty ja saatu. Mikäli löydät käännöksestä virheitä tai muita epäloogisuuksia, ota yhteyttä. Kiitokset kommenteista ja korjausehdotuksista Pikselille, Zvonalle ja Stüldt HÃ¥jtille.


Käyttäessäsi CSS:ia sivuston suunnittelemiseen, tulet varmasti törmäämään sen oikkuihin ja lyömään päätäsi seinään yrittäessäsi ratkaista ongelmia. Tämä on yritys helpottaa design-prosessia ja tarjota pikainen ohjenuora auttamaan ongelmanratkonnassa.

Mikäli olet epävarma, validoi.
Kun etsit virheitä, voit välttyä paljolta päänsäryltä yksinkertaisesti tarkistamalla koodisi oikeellisuus. Huonosti muotoiltu XHTML / CSS aiheuttaa yllätyksiä.
Suunnittele ja testaa CSS:si edistyneimmällä saatavilla olevalla selaimella ennen kuin muilla. Älä vasta sen jälkeen.
Jos suunnittelet sivuston testaamalla sitä rikkinäisellä selaimella, koodisi alkaa nojata selaimen väärään esitystapaan. Kun edessä on testausta edistyneemmillä selaimilla, turhaudut huomatessasi niiden esittävän sivun huonosti. Aloita sen sijaan täydellisyydestä ja käytä tunnettuja menetelmiä kiertääksesi selainkohtaiset ongelmat. Tällä hetkellä edistynein tarkoittaa Mozillaa, Safaria tai Operaa.
Varmistu, että haluttu efekti on olemassa.
On olemassa selainkohtaisia laajennuksia, jotka eivät sisälly viralliseen määrittelyyn [en]. Mikäli yrität liittää suodinta tai esimerkiksi sivupalkin värjäystä, käytät sovelluskohtaista koodia, joka toimii vain IE:ssa. Mikäli validaattori kertoo, että käyttäämäsi koodia ei ole määritelty, on todennäköistä että koodi on sovelluskohtainen, eikä näin ollen toimi muissa selaimissa.
Kun käytät kelluvia (float) elementtejä, hyödynnä clear-ominaisuutta.
Kelluvat elementit ovat pulmallisia eivätkä aina toimi odotetulla tavalla. Mikäli törmäät tilanteeseen, jossa kelluva (float) elementti leviää toisen elementin päälle tai yli tai ei muuten vain toimi haluamallasi tavalla, varmistu että käyttämäsi tapa on oikea. Tutustu Eric Meyerin oppaaseen [en].
Marginaalit pettävät; vältä asettamalla paddingia tai reunusta (border).
Voit joutua kamppailemaan ylimääräisen tyhjän tilan kanssa siellä, missä et sitä halua. Mikäli käytät marginaaleja, on niiden pettäminen todennäköisin syy. Andy Budd [en] kertoo aiheesta enemmän.
Pyri välttämään paddingia/reunuksia (border) ja määrämittaa elementissä.
IE5 laskee laatikkomallin väärin, mikä sotkee asioita. Tämä on kierrettävissä [en], mutta parasta on sivuuttaa asia lisäämällä paddingia ylemmän tason elementtiin, määrämittaisen sisäisen elementin sijaan.
Vältä IE:n tapaa vilauttaa tyylittelemätön sisältö sivua ladattaessa.
Mikäli käytät pelkkää @import-menetelmää ulkoisen tyylitiedoston kanssa, törmäät IE:n tapaan vilauttaa muotoilematon HTML ennen dokumentin muotoilua. Tämä on vältettävissä [en].
Älä käytä min-widthia IE:ssa.
Internet Explorer ei tue sitä mutta kohtelee tiettyyn pisteeseen asti width-ominaisuutta kuin se olisi min-width. Pienellä IE-filtteröinnillä saavutat saman lopputuloksen.
Kokeile vähentää leveyttä.
Joskus pyöristysvirheet aiheuttavat 50% + 50% summaantuvan 100.1%, mikä saattaa rikkoa ulkoasun joissain selaimissa. Kokeile laskea 50% -> 49%:n, tai jopa 49.9%:n.
Osa sisällöstä ei näy IE:ssä.
Tämä saattaa johtua ns. Peekaboo-bugista, varsinkin mikäli se näkyy, kun hiiren kursori viedään linkin päälle. Ongelman kuvaus ja korjaus siihen löytyvät Position is Everything-sivustolta [en].
Tarkkuutta linkkien esittämiseen, mikäli käytät ankkureita.
Mikäli käytät perinteistä ankkuria (<a name="anchor">), huomaat, että myös :hover ja :active pätevät siihen. Välttääksesi tämän, sinun pitää käyttää joko id-tagia ankkurissa tai hieman toisenlaista [en] tapaa: :link:hover, :link:active
”LoVe/HAte” muistisääntö linkkeihin.
Määritellessäsi linkkien pseudo-luokkia, tee se aina tässä järjestyksessä: Link, Visited, Hover, Active. Muuten ne eivät toimi yhdenmukaisesti eri selaimilla. Harkitse myös :focusin käyttöönottoa, jolloin muistisääntö muuttuu muotoon LVHFA (tai ”Lord Vader’s Handle Formerly Anakin”, kuten Matt Haughey [en] ehdotti).
”TRouBLEd” muistisääntö (margin, padding).
Lyhenteet asetetaan aina myötäpäivään (top-right-bottom-left), joten margin: 0 1px 3px 5px; luetaan margin-top 0, margin-right 1px ja niin edelleen.
Määritele mittayksikkö muihin kuin nolla-arvoihin.
CSS vaatii määrittelemään mittayksiköt kaikkiin määreisiin, kuten fonttiin, marginaaleihin ja kokoihin. (Poikkeuksena line-height, joka – omituista kyllä – ei vaadi mittayksikköä.) Ei siis kannata luottaa siihen, että selain osaa arvata mittoja oikein. Nolla on nolla, oli se sitten px, em, tai jokin muu. Yksikköä ei tarvitse määritellä. Esimerkki: padding: 0 2px 0 1em;
Testaa eri kirjainkokoja.
Edistyneemmät selaimet, kuten Mozilla ja Opera, antavat käyttäjälleen mahdollisuuden vaihtaa kirjasimen kokoa mittayksiköstä riippumatta. Koska ihmisillä on käytössä eri perusasetuksia, suurempi tai pienempi kuin omassa käytössäsi, yritä saada sivusto toimimaan mahdollisimman monella kirjainkoolla.
Testaa CSS sisäisenä, julkaise ulkoisena.
Kun työskentelet käyttämällä dokumentin sisäistä tyylitiedostoa, <style type="text/css"> head-osiossa, ennaltaehkäiset mahdolliset selainten välimuisteihin liittyvät virhetilanteet. Tämä on huomioitava erityisesti tiettyjen Mac-selainten kanssa. Viimeistele työsi ulkoistamalla CSS:isi, käyttämällä @import– tai <link>-menetelmää ennen julkaisua.
Käytä reunaviivoja (border) ulkoasussa ilmenevien virheiden etsimisessä.
Yleispätevän säännön, kuten div { border: solid 1px #f00; }, käyttö saattaa helpottaa virheen tarkan sijainnin löytymistä. Reunaviivojen lisääminen tiettyihin elementteihin auttaa sinua löytämään päällekkäisyydet ja ylimääräiset white-space-tilanteet, jotka eivät välttämättä ole itsestäänselvyyksiä.
Vältä lainausmerkkejä kuvien osoitepoluissa.
Kun asetat taustakuvan, vältä lainausmerkkien käyttöä osoitepolussa. Ne eivät ole tarpeellisia ja IE5/Mac tukehtuu niihin.
Mac IE5 tukehtuu tyhjään tyylitiedostoon ja sivun latausaika kasvaa. Lisää tiedostoon yksi sääntö (tai vaikka pelkkä kommentti) tämän välttämiseksi.

Lopuksi muutama huomionarvoinen asia, jotka eivät suoranaisesti liity toiminnallisuuteen, mutta tulee silti ottaa huomioon kehitysvaiheessa:

Organisoi CSS-tiedostosi.
Kommentoi CSS-lohkot asianmukaisesti, ryhmitä selektorit, käytä yhdenmukaista nimeämiskäytäntöä, white-space muotoilua (suositus: yksi välilyönti tabulaattorin sijaan varmistaaksesi muotoilun myös muilla alustoilla) sekä järjestä ominaisuuksien mukaan.
Nimeä luokat (class) ja tunnisteselektorit (id) toiminnallisuuden, älä ulkoasun mukaan.
Mikäli luot luokan .smallblue, ja myöhemmin saatkin pyynnön muuttaa teksti isommaksi ja punaiseksi, nimessä ei ole mitään järkeä. Nimeä ne sensijaan kuvaavasti, kuten .copyright ja .pullquote.
Käytä CSS-filttereitä vasta viimeisenä apukeinona.
CSS-hackit ja -filtterit auttavat liittämään (tai piilottamaan) tietyn säännön tietyiltä selaimilta. Yritä kuitenkin ratkaista ongelma ensin ilman näiden käyttöä, standardinmukaisella tavalla. Niiden käyttö voi kuitenkin joskus pelastaa päiväsi. Lista käytössäsi olevista CSS filttereistä [en].
Yhdistele selektoreita.
Pidä CSS:isi mahdollisimman kevyenä latausaikojen minimoimiseksi. Yhdistä [en] selektoreita ryhmiksi, käytä hyväksesi periytyvyyksiä [en] ja lyhennysmerkintää [en].
Muista esteettömyys, mikäli korvaat tekstiä kuvilla.
Klassisella FIR-menetelmällä [en] on tunnettuja haittapuolia ruudunlukijoiden kanssa. Ongelma esiintyy myös, mikäli kuvien lataus on poistettu käytöstä. Vaihtoehtoja on olemassa [en]; käytä niitä.