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.
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.
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.
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ä.
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
.
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
.
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:
tabindex="-1"
tabindex="0"
tabindex="5"
tabindex="4"
kohdennetaan ennen tabindex="5"
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.