Toki, jos voisin opas saavutettavuuteen

Näppäimistöä ja ruudunlukijaa käyttävien huomioiminen

Varmista, että ruudunlukijakäyttäjät pääsevät kaikkeen sisältöön ja niistä pois ilman jumiin jäämistä.

Mikäli järjestät uudelleen elementtejä CSS:llä, varmista, että näppäimistöllä kohdistusjärjestys pysyy loogisena.

Anna käyttäjän hypätä toistuvien sisältöjen ohi

Ensimmäisenä sivulla tulisi olla "hyppää pääsisältöön" -linkki, joka hyppää vähintään sivuston päänavigaation yli. Tavanomaisesti tämä hyppää koko sivun headerin yli. Mikäli sivustolla on paljon toistuvia lohkoja tai sisältöä, on hyvä miettiä tarjotaanko myös näille mahdollisuus ohittamiseen.

Välilehdet ja sisältöhaitarit vaativat huomiota

Jos toteutat välilehtiä, sisältöhaitareita tai vastaavia, kiinnitä erityistä huomiota, että ne toimivat oikein näppäimistöllä ja avustavilla teknologioilla. Nämä ovat usein ongelmallisia.

Dynaamisesti päivittyvän sisällön tulisi näkyä avustaville teknologioille

Mikäli sivulla on dynaamisia muutoksia, näistä tieto pitää välittyä myös ruudunlukijoille. Mikäli käytät attribuuttia aria-live, vältä käyttämästä arvoa "assertive" ellei se ole äärimmäisen tarpeellista. Muutoin sivuston toiminta voi olla hämmntävää, tai vähintäänkin ärsyttävää. Yleensä arvo "polite" on aivan riittävä.

Elementtien piilottaminen avustavilta teknologioilta

Mikäli käytät CSS-tyylejä visibility: hidden taidisplay: none, elementti piilotetaan myös avustavilta teknologioilta. Myös HTML5 attrobuutti hidden piilottaa sisällön kaikilta.

ARIA tarjoaa attribuutin aria-hidden, millä voidaan piilottaa visuaalisesti näkyvääkin sisältöä avustavilta teknologioilta. Tämä piilottaa kaikki sisällöt tämän elementin sisällä saavutettavuuspuusta, poikkeuksena elementit, joihin viitataan aria-attribuuteilla aria-labelledby tai aria-describedby.

Elementin piilottaminen visuaalistesti, mutta ei saavutettavuuspuusta

Elementti, jota ei näytetä visuaalisesti, mutta mitä ei ole piilotettu kokonaan, näkyy silti saavutettavuuspuussa. Esimerkki tällaisen elementin CSS-tyylistä:

.screenreadercanseethis { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }

On mahdolista myös käyttää ARIA:a tarjoamaan sisältöä ainoastaan avustaville teknologioille, esimerkiksi attribuuteilla aria-label, aria-labelledby tai aria-desbribedby.

Tabindex

Attribuutti tabindex indikoi, että kyseiseen elementtiin voidaan kohdistaa ja missä kohdin se on näppäimistön kohdistusjärjestyksessä.

Attribuutille tabindex voi antaa arvoksi kokonaisluvun. Se toimii eri tavoin riippuen sille annetusta arvosta: 

  • Negatiivinen arvo, yleensä tabindex="-1"
    • ei ole luonnollisessa kohdistusjärjestyksessä
    • voidaan ohjelmallisesti kohdentaa focus()-metodilla
  • tabindex="0"
    • sijaitsee luonnollisessa kohdistusjärjestyksessä
    • voidaan kohdentaa ohjelmallisesti
  • Positiivinen arvo, kuten tabindex="5"
    • sijaitsee luonnollisessa kohdistusjärjestyksessä
    • hyppää kohdennusjärjestyksen kärkeen, tabindex="4" kohdennetaan ennen tabindex="5"
    • maksimiarvo on 32767

Negatiivista arvoa käytetään yleensä sisältöön, joka on ruudun ulkopuolella, mutta joka ilmestyy tietyn toiminnan tuloksena. Käyttäjä ei voi kohdentaa näppäimistöllä tällaiseen elementtiin.

Vältä käyttämästä positiivisia arvoja. Näiden käyttäminen voi olla hämmentävää avustavaa teknologiaa käyttäville. On parempi toteuttaa sivun elementtien järjestys loogisella tavalla.

Yleisenä sääntönä tabindex-attribuuttia ei tulisi käyttää. Poikkeuksena on sivun manipulointi käyttäjän toimien perusteella. Esimerkiksi yksisivuinen sovellus, jossa navigaation linkit muuttavat sivun sisältöä illman sivun latausta. Tällaisessa tapauksessa voit haluta antaa sisällön otsikoille negatiivisen arvon, jolloin ne eivät ilmesty luonnolliseen kohdistusjärjestykseen ennen kuin käyttäjä on tehnyt valintoja. Tätä kutsutaan englanniksi termillä managing focus, eli vapaasti käännettynä kohdistuksen hallinnointi. Tätä tekniikkaa käytetään interaktiivisen kontekstin ja visuaalisen sisällön yhtenäiseen hallintaan.