1.3.2 Merkitykseen vaikuttava järjestys
TL;DR: Varmista, että lukemis- ja kohdistusjärjestys on mielekäs, kun sisältö esitetään lineaarisesti (ruudunlukija, reflow, CSS pois). Visuaalinen asettelu ei saa olla ristiriidassa rakenteen kanssa.
Onnistumiskriteerin virallinen kuvaus
Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.
Mitä pitää tehdä?
Varmista, että sisältö esitetään mielekkäässä järjestyksessä.
Optimaalisessa tilanteessa sisältö on samassa järjestyksessä visuaalisesti kuin koodissa.
Miksi tämä on tärkeää?
Auttaa käyttäjiä, jotka käyttävät apuvälineitä, ymmärtämään sisältöä.
Yleisiä sudenkuoppia
Yleiset ongelmat liittyvät huonoon HTML-rakenteeseen tai sisällön sijoittamiseen epäloogiseen järjestykseen CSS:n avulla. Esimerkiksi taulukoiden käyttäminen ulkoasusyistä niin, että lineaarisesti luettuna siitä ei saa samaa sisältöä.
Välilyntien käyttäminen taulukkomaisen tai kolumnimaisen sisällön luomiseen. Onneksi tämä alkaa nykyään olemaan jo varsin harvinaista.
Miten testata?
Tarkista lukujärjestys ja varmista, että se on järkevä. Yksi tapa tähän on ottaa CSS-tyylit sivulta pois ja tarkastella sisältöä koodin järjestyksessä. Jos sisältö on edelleen järkevää ja ymmärrettävää, on tilanne hyvä.
Miten huomioida tämä kriteeri kehitystyössä?
- Käytä semanttista HTML-koodia. Älä muokkaa visuaalista sisällön rakennetta ainoastaan CSS-tyyleillä. Mikäli tarvitset listaelementtiä, käytä listaelementtiä.
- Käytä vasemmalle tasattua lähestymistapaa vasemmalta oikealle luettavien kielten, kuten englanti, kanssa. Vastaavasti oikealta vasemmalle luettavien kielten, kuten arabian, kanssa käytä oikealle tasattua lähestymistapaa.
- Aina kun mahdollista, varmista, että DOM:ssa (dokumenttiobjektimalli, englanniksi Document Object Model) järjestys täsmää visuaaliseen järjestykseen.
- Joskus elementtien järjestys voi vaihtua esimerkiksi responsiivisuuden mukaan. Tämä ei automaattisesti tarkoita epäloogista lukemisjärjestystä.
- Asettele sisältö merkitykselliseen ja oikeaan järjestykseen.
- Käytä otsikoita ja alaotsikoita merkityksen korostamiseen.
- Älä käytä välilyöntejä sisällön asemointiin.
- Listojen sisältöjen tulee olla oikeassa järjestyksessä, esimerkiksi numeroiduissa listoissa.