Web Content Accessibility Guidelines versioon 2.0

W3C on julkaissut version 2.0 Web Content Accessibility Guidelines (WCAG)– eli verkkosisällön saavutettavuusohjeistuksesta. Uuden standardin tarkoituksena on auttaa web-suunnittelijoita ja -kehittäjiä luomaan sivustoja, jotka ottavat paremmin huomioon etenkin esteelliset ja ikääntyneet käyttäjät. Ohjeistuksen kakkosversiota voi soveltaa tekstin, kuvien, äänen ja videon saavutettavuuden parantamiseen, sekä web-applikaatioihin. Lisäksi ohjeiden on sanottu olevan aikaisempaa joustavampia sekä helpompia ymmärtää ja käyttää.

Suurin ero versioiden välillä on se, että siinä missä WCAG 1.0 perustuu tarkistuspisteisiin, joiden tärkeys on numeroitu yhdestä kolmeen (1, 2, 3) ja joiden perusteella ohjeistuksen täyttämistä arvioidaan, WCAG 2.0:n perustana ovat web-saavutettavuuden suunnitteluperiaatteet. Kuhunkin periaatteeseen liittyvät tietyt ohjeistukset, ja jokaisella ohjeistuksella on testattava onnistumiskriteeristö tasoille A, AA ja AAA. Tämä kriteeristö on ohjeistuksen täyttämisen mittari (samaan tapaan kuin tarkistuspisteet edellisessä versiossa).

Entä ne saavutettavuuden suunnitteluperiaatteet? Koska uudesta ohjeistuksesta ei vielä ole suomenkielistä käännöstä, kannattaa alla lueteltuihin periaatteisiin suhtautua ymmärtäväisesti. Kaiken verkkosisällön tulisi olla

  1. Havaittavissa olevaa – tieto ja käyttöliittymäelementit täytyy esittää käyttäjille helposti havaittavilla tavoilla. Tämä tarkoittaa, ettei tieto esimerkiksi saa olla kaikille aisteille näkymätöntä.
  2. Käyttökelpoista – käyttöliittymäelementtien ja navigaation täytyy olla käyttökelpoisia siten, että käyttäjä voi käyttää käyttöliittymää; se ei saa vaatia sellaisia toimintoja, joita käyttäjä ei voi suorittaa.
  3. Ymmärrettävää – tiedon ja käyttöliittymän käyttämisen täytyy olla ymmärrettävää.
  4. Kestävää – sisällön on oltava niin kestävää, että sitä voidaan käyttää useilla eri tavoilla, mm. avusteisen teknologian (esim. näytönlukijat) avulla. Sisältöön on päästävä käsiksi myös teknologian kehittyessä.

Lisälukemista aiheeseen liittyen (kaikki englanniksi):

Web Content Accessibility Guidelines (WCAG) 2.0
How to Meet WCAG 2.0
How WCAG 2.0 Differs from WCAG 1.0
W3C Web Standard Defines Accessibility for Next Generation Web (press release)
BBC News: New guidelines boost web access

Opera valittaa

Operan pääpomo Håkon Wium Lie on kirjoittanut avoimen kirjeen verkon kehittäjäyhteisölle, jossa hän kertoo miksi Opera on valittanut Microsoftin monopoliaseman väärinkäytöstä Euroopan komission tuomioistuimeen:

”Opera has filed a formal complaint with the European Commission to force Microsoft to support open Web standards in its Web browser, Internet Explorer. We believe that Microsoft has harmed Web standards by refusing to support them; Microsoft often participates in creating Web standards, promoting them, and even promising to implement them. Despite their talent, however, they refuse to support Web standards correctly. For example, Internet Explorer is the only modern Web browser that does not support Acid2.

Opera has also requested that Microsoft frees Internet Explorer from the Windows platform. We feel that they have used their market dominating position to limit a genuine choice of browsers on the Web for their own commercial gain.”

Hyvä Opera!

Lisää:
Lehdistötiedote: Opera files antitrust complaint with the EU
Avoin kirje: Opera files complaint – an open letter to the Web community
Digitoday: Opera syyttää Microsoftia monopoliaseman väärinkäytöstä

Lausuntopyyntö uudesta Verkkopalvelujen laatukriteeristö -luonnoksesta

Postilistalta poimittua:

Valtiovarainministeriön valtioneuvoston tietohallintoyksikkö pyytää lausuntoja luonnoksesta ”Verkkopalvelujen laatukriteeristö – Väline julkisten verkkopalvelujen kehittämiseen ja arviointiin”.

Verkkopalvelujen laatukriteeristö on erityisesti julkishallinnon verkkopalvelujen kehittämiseen ja arviointiin tarkoitettu väline. Se koostuu johdannosta, jossa kuvataan sen tarkoitus, kohderyhmät, muutokset edelliseen versioon sekä tausta- ja historiatietoa. Lisäksi laatukriteeristössä kerrotaan sen erilaisista käyttötavoista sekä kuvataan kriteeristön rakenne ja esitetään varsinaiset kriteerit ominaisuuksineen. Luonnosversio ei sisällä lisätietolinkkejä. Nämä linkit tullaan liittämään lopulliseen versioon.

Lausuntoja annettaessa pyydetään käyttämään sitä varten laadittua verkkolomaketta, muulla tavoin jätetyt lausunnot eivät pääse mukaan lausuntokoosteeseen, joka muodostetaan automaattisesti tietojärjestelmästä. Erillistä lausuntoa ei tarvitse lähettää kirjeenä tai sähköpostissa. Vastauksia toivotaan pe 10.8.2007 klo 16.00 mennessä.

Web-standardien tarkistuslista

Kirjoittaja: Russ Weakley, Max Design. Alkuperäisen presentaation pohjalta kääntänyt Kalamuki.


Mitä web-standardit ovat?

Käsite ’web-standardit’ voi tarkoittaa eri asioita eri ihmisille. Joillekin se on web-sivustojen tekemistä ilman taulukoita, toisille validin koodin käyttämistä. Web-standardit ovat kuitenkin paljon laajempi asia. Web-standardit voisi määritellä:

sitoutumiseksi standardeihin (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG jne.) ja pyrkimykseksi hyviin toimintatapoihin (validi koodi, esteetön koodi, semanttisesti oikeaoppinen koodi, käyttäjäystävälliset URLit jne.).

Toisin sanoen…

Sivuston, joka on rakennettu web-standardeilla, pitäisi olla sutjakka, siisti, CSS-pohjainen, esteetön, käytettävä ja ystävällinen hakukoneille.

Tarkistuslistasta

Tämä lista ei ole kaikkien tarkistuslistojen äiti. Paljon voitaisiin lisätä. Tämä on yksinkertaisesti lähtökohta ja tätä voi käyttää:

  • osoittamaan web-standardien laajuutta
  • web-kehittäjien kätevänä työkaluna sivuston tuotantovaiheeseen
  • apuna web-kehittäjille, jotka ovat kiinnostuneita siirtymään kohti web-standardien käyttöä

Tarkistuslista on jaettu kuuteen osioon:

  1. Koodin laatu
  2. Kuinka tarkasti sisältö ja esitystapa on erotettu toisistaan?
  3. Esteettömyys käyttäjille
  4. Esteettömyys laitteille
  5. Peruskäytettävyys
  6. Sivuston hallinta

1. Koodin laatu

  1. Käytetäänkö sivustossa oikeaa dokumenttityyppiä?
    http://www.w3.org/QA/2002/04/valid-dtd-list.html
  2. Onko merkistö määritetty sivustolla?
    http://www.w3.org/International/O-charset.html
  3. Käytetäänkö sivustossa validia (X)HTML:ia?
    http://validator.w3.org/
  4. Käytetäänkö sivustossa validia CSS:ia?
    http://jigsaw.w3.org/css-validator/
  5. Käytetäänkö sivustossa CSS-hackeja?
  6. Käytetäänkö sivustossa turhia class- tai id-määritteitä?
  7. Onko koodi rakenteeltaan hyvää?
    http://www.w3.org/2003/12/semantic-extractor.html
  8. Onko sivustolla rikkinäisiä linkkejä?
    http://validator.w3.org/checklink
  9. Kuinka hyvin sivusto toimii nopeuden/sivukoon suhteen?
    http://www.websiteoptimization.com/services/analyze/
  10. Onko sivustolla Javascript-virheitä?

2. Kuinka tarkasti sisältö ja esitystapa on erotettu toisistaan?

  1. Käytetäänkö CSS:ia kontrolloimaan kaikkia esitystavan eri piirteitä (fontit, väri, täyte, rajat jne.)?
  2. Onko kaikki kuvituskuvat määritelty CSS:ssa vai näkyvätkö ne (X)HTML:ssa?

3. Esteettömyys käyttäjille

  1. Käytetäänkö alt-määritteitä kaikissa merkityksellisissä kuvissa?
  2. Käytetäänkö sivustolla suhteellisia vai ehdottomia yksiköitä tekstin koon määrittämiseen?
  3. Hajoaako mikään kohta taitossa, jos fonttikokoa suurennetaan?
  4. Käytetäänkö sivustolla näkyviä pikalinkkejä (skip menus)?
  5. Käytetäänkö sivustolla esteettömiä lomakkeita?
  6. Käytetäänkö sivustolla esteettömiä taulukoita?
  7. Ovatko värit riittävän kirkkaita ja kontrastit selkeitä?
  8. Käytetäänkö kriittisen informaation osoittamiseen yksistään väriä?
  9. Toimivatko pudotusvalikot viiveellä (käyttäjille, joilla on heikot motoriset kyvyt)?
  10. Ovatko kaikki linkkitekstit kuvaavia (sokeille käyttäjille)?

4. Esteettömyys laitteille

  1. Toimiiko sivusto hyväksyttävästi niin uusilla kuin vanhoillakin selaimilla?
  2. Onko sisältö saavutettavissa, mikäli CSS on kytketty pois käytöstä tai selain ei tue sitä?
  3. Onko sisältö saavutettavissa, mikäli kuvat on kytketty pois käytöstä tai selain ei osaa näyttää niitä?
  4. Toimiiko sivusto tekstiselaimilla, kuten Lynxillä?
  5. Toimiiko sivusto hyvin tulostettaessa?
  6. Toimiiko sivusto hyvin kannettavissa laitteissa?
  7. Sisältääkö sivusto yksityiskohtaista metadataa?
  8. Toimiiko sivusto hyvin eri kokoisissa selainikkunoissa?

5. Peruskäytettävyys

  1. Käytetäänkö selkeää visuaalista hierarkiaa?
  2. Erottuvatko otsikkotasot hyvin?
  3. Onko sivustolla helposti ymmärrettävä navigointi?
  4. Onko sivustolla johdonmukainen navigointi?
  5. Onko linkit alleviivattu?
  6. Käyttääkö sivusto johdonmukaista ja asiaankuuluvaa kieltä?
  7. Käytetäänkö sivukartta- ja yhteystietosivua? Onko ne helppo löytää?
  8. Onko (isolla) sivustolla hakutyökalu?
  9. Onko sivuston jokaisella sivulla linkki etusivulle?
  10. Merkitäänkö vieraillut linkit selkeästi omalla värillään?

6. Sivuston hallinta

  1. Onko sivustolla merkityksellinen ja avulias 404-virhesivu, joka toimii millä sivuston tasolla tahansa?
  2. Käytetäänkö ystävällisiä URLeja?
  3. Toimivatko URLit ilman www:ia?
  4. Onko sivustolla favicon?

Tästä listasta

Tämä Russ Weakleyn, Max Design, kirjoittama tarkistuslista hahmoteltiin raakamuodossa Web Standards -postituslistalla toukokuussa 2004. Se esitettiin Sydneyn Web Standards Groupille 5.8.2004.

Lista on saatavilla myös

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ä.