Saavutettavuus teknisessä toteutuksessa

Mitkä ovat teknisen toteutuksen saavutettavuuskriteerit?

Tällä sivulla listatut asiat ovat julkaisun tekniikkaan kohdistuvia saavutettavuuden onnistumiskriteereitä, jotka on huomioitava saavutettavuuden toteutumista arvioitaessa. Tekniset vaatimukset perustuvat W3C-yhteenliittymän antamiin WCAG- verkkosisällön saavutettavuusohjeisiin.

Sivujen tekniikasta vastaavien tehtävänä on huolehtia siitä, että sivuston tekniikka tukee saavutettavuutta ja mahdollistaa sivuston käyttäjille ja sisällöntuottajille sisällön julkaisemisen saavutettavassa muodossa. Tekniikkaan kuuluvat kaikki piirteet, joiden toteutus on määritelty järjestelmän lähdekoodissa ja jota käyttäjät eivät pääse muuttamaan. Tällaisia ominaisuuksia ovat mm. mahdollisuus lisätä kuviin alt-teksti ja sivuston kielen ilmaiseminen <html>- juurielementissä lang-attribuutilla.

Kaikessa sivuston tekniikan toteutuksessa tulisi käyttää mieluiten tarkoitukseen soveltuvaa HTML- elementtiä, mikäli sellainen on olemassa. Sivun sisältö pitäisi toteuttaa aina käyttäen standardia HTML-merkkausta. Suositeltu HTML-kielen taso on 5 (HTML5) ja toteutuksessa tulisikin käyttää HTML5-tason semanttisia elementtejä.

Esimerkiksi: painikkeen toteuttamiseksi tulee käyttää HTML button-elementtiä, ei itse tehtyä div- elementtiä CSS-muotoiluin ja JavaScriptin avulla toteutetulla toiminnallisuudella. Vakioelementit tarjoavat automaattisesti oikean toiminnallisuuden ja ovat pääsääntöisesti saavutettavia avustaville tekniikoille ilman mitään lisäasetuksia.

Seuraavassa luetellut ominaisuudet ovat sellaisia, joista saavutettavuustarkistuksissa (auditoinnissa tai automaattitarkistuksissa) saadut ilmoitukset on edelleen tarkistettava manuaalisesti ja ohjattava korjattavaksi sivuston tekniikasta vastaavalle taholle.

Sivun rakenne ja elementtien oikea käyttö (semanttisuus)

  • Sivun <title>
  • Sivun kielen osoittaminen lang-attribuutti
  • Sivun osan kielen ilmoittaminen, kun sivulla on erikielisiä osioita (lang-attribuutti)
  • Otsikoiden oikea käyttö (osin sisällöntuottajan vastuulla)
  • Landmark-elementit (sivun rakenne suositeltua muodostaa näitä käyttäen)
  • <header>, <nav>, <main>, <footer> tai näitä vastaavat ARIA koodit role=”banner”, role=”navigation”, role=”main”, role=”contentinfo” – listat
  • Taulukot
  • iframe upotukset – HTML oikeellisuus

Linkit, Navigaatio ja sivuston käyttö

  • ”Hyppylinkit”, linkit heti <body>-elementin alkuun suoraan navigaatioon, pääsisältöön, sivustokarttaan
  • Linkit:
    • sisältävät aina koneluettavan otsikon (label) ja selkeän viestin siitä mihin linkki johtaa
    • sivuston navigaation yhdenmukaisuus kaikilla sivuilla
  • Sivun sisäinen navigaatio
    • sisällön järjestys/Focus order
    • elementtien välinen siirtymäjärjestys looginen ja ehjä
    • ei positiivisia tabindex-arvoja (suurempi kuin nolla)
    • aktiivisen elementin visuaalinen korostaminen erottuvasti
  • Sivusto on käytettävissä kaikin osin ilman hiirtä pelkällä näppäimistöllä
  • Noudattavatko kaikki elementit yleistä ja odotettua toiminnallisuutta
  • Elementin aktivoituminen (focus) ei aiheuta sisällön muuttumista tai siirtymistä uuteen sisältöön

Kuvat ja visuaalisuus

  • Kuvilla syötettävissä oleva alt-teksti
  • Koristelutarkoituksessa olevat kuvat joko soveltuvalla alt-tekstillä tai piilotettu ruudunlukijoilta
  • Värit ja kontrasti noudattavat asetettuja vaatimuksia
  • Tekstityylit luettavia
  • Sivun koon muutokset toteuttavat Reflow ja Zoom onnistumiskriteeristön vaatimukset sivun sisällön asemoitumisen
  • Mukautuva sisältö, asennon tunnistus

Multimedia, animaatiot, liike

  • Äänitiedostot
    • tarvittavat toisto- ja äänenvoimakkuudenkontrollit käyttäjän käytettävissä
    • äänenvoimakkuus oltava säädettävissä erikseen järjestelmän yleisestä äänenvoimakkuudesta
  • Videotiedostot
    • tarvittavat toisto- ja äänenvoimakkuuskontrollit käyttäjän käytettävissä
    • videotiedostoille mahdollista lisätä tekstitys mieluiten ns. Closed captions-tekniikalla, jossa tekstitys ei ole ”poltettu” kuvaan vaan erillisenä koneluettavana tekstinä
  • Animaatiot
    • ei häiritsevän suuria ja voimakkaita liike-efektejä
    • ei voimakkaita ja kontrastikkaita värejä
    • ei nopeaa välkettä (yli 3 kertaa sekunnissa)

Ajastetut toiminnot

  • Käyttäjillä riittävästi aikaa toiminnan suorittamiseen
  • Käyttäjälle annetaan huomioilmoitus ajan ollessa päättymässä ja helppo tapa pyytää lisäaikaa

Käyttäjäsyöte: lomakkeet

  • Laiteriippumaton syöte: käyttäjän voitava vaihtaa syötetapaa kesken toiminnon (Hiiri, näppäimistä, kosketusnäyttö)
  • Kaikilla lomakekentillä on näkyvä ja ohjelmallisesti luettava otsikko (label)
  • Lomakkeen syötekenttien tyyppi vastaa aina syötettävää sisältöä
  • Input type sisällön mukaan, jolloin kosketusnäytölliset laitteet voivat valita oikean ”on-screen näppäimistön“
  • Lomakkeella on riittävät ja selkeät ohjeet käyttäjälle
  • Lomakevalidointi (syötteen tarkistus)
    • virhesyötteistä selkeä ilmoitus ja ohje miten korjata syöte
    • onnistuneesta lomakelähetyksestä näkyvä ja pysyvä ilmoitus käyttäjälle
    • mainitut ilmoitukset annettava myös ruudunlukijan havaitsemassa muodossa
  • CAPTCHA vältettävä tai tarjottava saavutettava versio tarkistuksesta

Custom kontrollit

  • Onko kaikilla custom kontrolleilla, skriptikomponenteilla yms. asianmukaiset ARIA role ja name arvot osoittamassa kontrollin tarkoitusta