Kohdistusjärjestys

Mitä vaaditaan

Kun näppäimistökäyttäjä painaa Tab-näppäintä, kohdistuksen tulisi siirtyä interaktiivisten elementtien läpi järjestyksessä, jonka avulla kaikki tehtävät voidaan suorittaa ilman kontekstin menettämistä. Vasemmalta oikealle luettavissa asetteluissa tämä tarkoittaa lähes aina ylhäältä alas ja vasemmalta oikealle etenevää järjestystä. Järjestyksen ei tarvitse olla identtinen visuaalisen järjestyksen kanssa, mutta mahdollisen poikkeaman on silti säilytettävä merkitys — esimerkiksi „hyppää alatunnisteeseen“ -linkki voi sijaita päävirran ulkopuolella, kunhan muu järjestys on looginen.

Tämän onnistumiskriteeriin kohdistuvat yleisimmät ongelmat ovat valintaikkunat, jotka piilottavat kohdistuksen, vedettävillä elementeillä uudelleenjärjestetyt ruudukot, joissa välilehtijärjestys on vanhentunut, sekä CSS, joka järjestää sisällön visuaalisesti uudelleen mutta jättää DOM:n alkuperäiseen järjestykseensä.

Kuinka vaatimukset täytetään

• Rakenna DOM lukujärjestyksessä. Jos visuaalinen asettelu poikkeaa tästä, käytä CSS Grid- tai Flexbox-järjestysmääritteitä harkiten — Tab seuraa kuitenkin lähdejärjestystä.
• Kun modaali avautuu, siirrä kohdistus siihen ja pidä kohdistus modaalin sisällä, kunnes se suljetaan. Kun modaali suljetaan, palauta kohdistus laukaisevaan elementtiin.
• Älä koskaan käytä positiivisia tabindex-arvoja (kuten tabindex="3"). Ne luovat räätälöityjä järjestyksiä, jotka häiritsevät DOM:ia ja hajoavat heti sivun muuttuessa.
• Vedettävissä uudelleenjärjestettävissä listoissa päivitä DOM-järjestys vastaamaan uutta visuaalista järjestystä, jotta välilehtijärjestys pysyy synkronoituna.
• Testaa painamalla Tab osoiteriviltä läpi jokaisen kohdistettavissa olevan elementin sivulla. Jos tunnet itsesi “eksyväsi”, käyttäjätkin eksyvät.

Yleisiä virheitä

• Modaali avautuu, mutta kohdistus jää taustalla olevalle sivulle. Tab kiertää piilotettuja elementtejä modaalin kelluessa koskemattomana.
• Sivupaneelin mobiilivalikko avautuu, mutta kohdistus jää sivun runkoon. Ruudunlukuohjelman käyttäjät eivät löydä juuri ilmestynyttä sisältöä.
• flex-direction: row-reverse kääntää visuaalisen järjestyksen; DOM-järjestys pysyy muuttumattomana; Tab siirtyy nyt oikealta vasemmalle lukemisen edetessä vasemmalta oikealle.
• Lomakkeeseen on siroteltuna räätälöityjä tabindex-arvoja, ja myöhemmin lisätyt elementit perivät tabindex="0" ja päätyvät loppuun.
• Automaattinen kohdistus „tilaa uutiskirje“ -ponnahdusikkunaan, joka ilmestyy 8 sekuntia latauksen jälkeen, riistäen kohdistuksen lukevalta käyttäjältä.

Miksi tällä on merkitystä

Kohdistusjärjestys on näppäimistön lukujärjestyksen vastine. Kun se hajoaa, kokemus ei ole vain hidas — se on sekava. Motorisista vammoista kärsivät käyttäjät, jotka navigoivat yksinomaan Tab- ja Shift+Tab-näppäimillä, voivat päätyä lomakkeen väärään osaan, jättää pakollisen kentän kokonaan väliin tai menettää paikkansa pitkällä sivulla yhden väärässä paikassa olevan elementin takia.