Verkon saavutettavuusohjeiden ensimmäinen periaate on Havaittava. Esitä tiedot ja käyttöliittymän osat tavalla, jonka käyttäjät voivat havaita. Tarjoa tekstivastine muulle kuin tekstisisällölle, kuten kuville ja medialle. Varmista, että sisältö on erotettavissa.
En erittele tällä sivustolla kaikkia kriteerejä. Jos haluat lukea WCAG:n sisällöstä syvemmin, käy tutustumassa WCAG-sivustooni!
Ensimmäinen ohje keskittyy täysin ei-tekstuaalisen sisällön tekstivastineisiin.
Iso osa kuvien tekstivastineiden vaatimuksia on tunnistaa koristeellinen kuva. Koristeellisten kuvien tulkinta on täysin subjektiivista. Osa käyttäjistä myös saattaa haluta tieoa myös koristeellisista kuvista. Ja hyvän vaihtoehtoisen tekstin osalta on paljon ominaisuuksia. Olen kirjoittanut sisällöntuottajille ohjeita vaihtoehtoisen tekstin tuottamiseen.
Aikasidonnaisen ohjeella pyritään varmistamaan, että mediasisältö on kaikkien käytettävissä.
Vaatimuksiin liittyy vahvasti tekstitykset, kuvailutulkkaukset ja tekstivastineet. Jos nämä käsitteet eivät ole tuttuja, käy tutustumassa niihin tarkemmin videon ja äänen saavutettavuus -sivulla.
Vaatimukset tallennetulle multimedialle (video ja ääni):
Vaatimukset tallennetulle pelkkää videota sisältävälle medialle:
Vaatimukset tallennetulle pelkkää audiota sisältävälle medialle:
Vaatimukset multimedialle (video ja audio) suorissa lähetyksissä:
Vaatimukset suorissa lähetyksissä pelkkää videota sisältävälle medialle:
Vaatimukset suorissa lähetyksissä pelkkää audiota sisältävälle medialle:
Muutamassa kohdassa mainitaan, että vaaditaan joko yksi tai toinen. Näiden kohdalla sisällöntuottaja voi valita kumman tarjoaa. Parhaan käyttökokemuksen tarjoamiseksi on järkevää aina tarjota molemmat. Mutta WCAG-kriteeristössä vain jompi kumpi vaaditaan.
Luo sisältöä, jota voidaan esittää erilaisilla tavoilla menettämättä sisältöä tai rakennetta.
Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.
Sivustoista usein ilmoitetaan varoitusta otsikoiden epäloogisesta järjestyksestä ilmoituksella, että
Teknisesti on sallittua, että ennen sivun h1-otsikkoa on rakenteessa h2-otsikko, mikäli se on vähemmän tärkeä kuin sivun h1-otsikko, kuten seuraavassa mallikoodissa.
<div class="top-nav"> <h2>Sivuston navigaatio</h2> </div> <div class="main"> <h1>Sivun pääotsikko</h1> </div>
Tällainen tulos saattaa esimerkiksi tulla sisällön hallintajärjestelmän oletuskoodeista. Ainakin Drupal järjestelmänä tuottaa herkästi puutteellista otsikkohierarkiaa.
En kuitenkaan suosittele tätä tapaa, vaan on selkeintä, että sivun ensimmäinen otsikko on h1-otsikko. Tämä parantaa käytettävyyttä kaikille.
Kun sisällön esitystapa vaikuttaa sisällön merkitykseen, oikea lukemisjärjestys voidaan selvittää ohjelmallisesti.
Käytännössä:
Käyttäjän tietojen keräämiseen tarkoitettujen syötekenttien tarkoitus voidaan selvittää ohjelmallisesti, kun
- käyttötarkoitus on listattu Syötteen tarkoitukset käyttöliittymäkomponenteissa -osiossa ja
- sisällön toteutuksessa on käytetty teknologiaa, joka mahdollistaa syöte-elementin tarkoituksen kuvaamisen.
Käytännössä:
Tee sisällöstä erottuvaa. Käyttäjien pitää voida nähdä ja kuulla sisältö ja erottaa esimerkiksi tausta ja etualan sisältö toisistaan.
Väriä ei käytetä ainoana visuaalisena keinona informaation välittämisessä, toiminnon esittämisessä, vastauksen pyytämisessä tai visuaalisen elementin erottamisessa.
Mikäli ei-visuaalinen vihje tapahtuu vain hiirellä linkkiä osoitettaessa tai linkkiin kohdennettaessa, värien käytön kriteeri ei täyty.
Mikäli linkki on eri värinen ja boldattu, kriteeri täyttyy, koska tekstin paksuus ei ole väririippuvainen.
Lukuun ottamatta tekstitystä ja tekstiä esittäviä kuvia, tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa aina 200 prosenttiin asti ilman sisällön tai toiminnallisuuden menettämistä.
Tämä kriteeri ottaa kantaa pelkän tekstin suurentamiseen. Jotkin tulkitsevat virheellisesti, että tämä kriteeri ottaa kantaa ns. tavalliseen sisällön zoomaukseen.
Yleisiä kompastuskiviä:
Tekstilohkojen (linkki vie toiselle sivustolle) visuaaliselle esitystavalle on olemassa mekanismi (linkki vie toiselle sivustolle) seuraaviin käyttötarkoituksiin:
- Käyttäjä voi valita edustan ja taustan värit.
- Leveys on enintään 80 merkkiä tai kuvaketta (40 CJK-kielissä).
- Tekstiä ei ole tasattu molempiin reunoihin (tasattu sekä vasempaan että oikeaan marginaaliin).
- Riviväli (rivin korkeus) on vähintään puolitoista riviä kappaleiden sisällä, ja kappaleiden väli on vähintään 1,5 kertaa suurempi kuin riviväli.
- Tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa 200 prosenttiin asti tavalla, joka ei vaadi käyttäjää vierittämään tekstiä vaakasuunnassa rivin lukemiseksi koko näytön ikkunassa (linkki vie toiselle sivustolle).
Jos verkkosivusto on teemattu normaaliin tapaan, selainten pitäisi pystyä ylikirjoittamaan sivuston tyylit. Tätä voi testata esimerkiksi Windows 10:llä Firefoxilla. AccessibilityNet on tuottanut tähän ohjeet englanniksi: How to change website colours in Firefox for Windows 10 on AccessibilityNet.
Sisältö voidaan esittää ilman sisällön tai toiminnallisuuden menettämistä ja ilman kahdensuuntaista vierittämistä:
- pystysuuntaan vieritettävän sisällön leveys on 320 CSS-pikseliä.
- vaakasuuntaan vieritettävän sisällön korkeus on 256 CSS-pikseliä.
Lukuun ottamatta sisällön osia, jotka vaativat kahdensuuntaista esitystapaa käytön tai merkitysken vuoksi.
320 CSS-pikseliä vastaa 1280 CSS-pikselin levyistä selainikkunaa, joka on zoomattu 400% kokoiseksi. 256 CSS-pikseliä vastaa 1024 pikseliä korkeaa selainikkunaa, joka on zoomattu 400% kokoiseksi.
Jos osoittimen vieminen elementin päälle tai kohdistuksen siirtäminen elementtiin tuo näkyviin lisää sisältöä ja osoittimen tai kohdistuksen pois siirtäminen piilottaa sisällön, seuraavat ehdot pätevät:
- Piilotettavissa: On olemassa mekanismi, jolla näkyviin tulleen sisällön saa piilotettua siirtämättä osoitinta tai kohdistusta, lukuun ottamatta tapausta, jossa sisältö on syötevirheestä kertova teksti tai se ei peitä tai korvaa muuta sisältöä.
- Osoitettavissa: Jos osoittimen vieminen elementin päälle tuo näkyviin uutta sisältöä, osoitin voidaan viedä ilmestyneen sisällön päälle aiheuttamatta sen katoamista.
- Pysyvä: Uusi sisältö pysyy näkyvissä kunnes osoitin tai kohdistus on siirretty pois, käyttäjä on piilottanut sisällön tai sen sisältö ei enää päde.
Poikkeus: käyttäjäagentti määrittelee uuden sisällön visuaalisen esitystavan, eikä sisällöntuottaja ole sitä muokannut.
Yksi esimerkki käyttäjäagentin määrittämästä esitystavasta on työkaluvihjeet, jotka on toteutettu HTML:n title-attribuutin avulla.
Muokatut työkaluvihjeet, alavalikot ja muut ei-modaaliset ponnahdusikkunat ovat taas esimerkkejä sisällöstä, jotka kuuluvat tämän kriteerin alaan.