SC 1.3.2 Taso A WCAG 2.0

Merkityksellinen järjestys

Kun sisällön lukemisjärjestyksellä on merkitystä ymmärtämisen kannalta, DOM-järjestyksen on vastattava visuaalista järjestystä. CSS-sijoittelu ja float, jotka sotkevat järjestyksen, rikkovat ruudunlukuohjelmat ja näppäimistönavigoinnin.

Mitä vaaditaan

Jos sisällön merkitys riippuu siitä järjestyksestä, jossa se luetaan — ohjeet, kertomus, vaiheittainen prosessi — tämä järjestys on säilytettävä DOM:ssa. Ruudunlukuohjelmat ja uudelleenasettamisohjelmat kulkevat asiakirjan lähdejärjestyksessä; jos CSS order, position: absolute, flex-direction: row-reverse tai ruudukon sijoittelu sotkee visuaalisen järjestyksen pois DOM-järjestyksestä, kokemus hajoaa.

Toteutustapa

Kirjoita DOM siinä järjestyksessä, jossa sisältö on tarkoitettu luettavaksi; käytä CSS:ää visuaaliseen sijoitteluun, älä järjestyksen keksimiseen.
Auditoi kaikki flex-direction: row-reverse-, CSS order- tai grid-area-käytöt, jotka siirtävät sisältöä lähdesijainnistaan.
Monisarakkeisissa asetteluissa sijoita sarakkeet DOM:iin lukemisjärjestyksessä, ei visuaalisessa sarakejärjestyksessä.
Testaa poistamalla CSS käytöstä (selaimen kehittäjätyökalut, „näytä lähdejärjestys“) — tyylittömän virtauksen pitäisi edelleen olla ymmärrettävä.
Aja sivu ruudunlukuohjelman läpi ja merkitse kaikki hetket, jolloin ilmoitusjärjestys yllättää.

Yleisiä puutteita

Sivupalkki on visuaalisesti oikealla, mutta sijoitettu DOM:ssa ensimmäiseksi — ruudunlukuohjelmat kuulevat mainokset, aiheeseen liittyvät linkit ja toimintakehotukset ennen pääartikkelia.
flex-direction: row-reverse navigaatiovalikossa — näkevät käyttäjät näkevät Koti / Tietoja / Yhteystiedot, ruudunlukuohjelmat kuulevat Yhteystiedot / Tietoja / Koti.
CSS order lomakekentissä järjestelee visuaalista järjestystä pois DOM-järjestyksestä, jolloin sarkainnäppäin hyppii arvaamattomasti.
„Siirry sisältöön“-linkki sijoitettu navigaation jälkeen DOM:ssa, mutta absoluuttisesti sijoitettu visuaalisesti ylös — näppäimistön käyttäjät osuvat ensin navigaatioon.
Ruudukossa olevat kortit virtaavat visuaalisesti vasemmalta oikealle, mutta on sijoitettu DOM:iin alhaalta ylös nokkelana ruukkutempuksen johdosta.

Miksi tällä on merkitystä

Merkityksellisen järjestyksen puutteet ovat salakavalia — sivu näyttää hyvältä, läpäisee validoinnin ja useimmat automaattiset tarkistukset. Ne paljastuvat vasta, kun todellinen ruudunlukuohjelman käyttäjä yrittää lukea sivua ylhäältä alas. Useimmat korjaukset ovat pieniä DOM-uudelleenjärjestelyjä, mutta ongelman löytämisen diagnostiikka on kallista.