Kohdistus ei peity (vähimmäisvaatimus)

Mitä vaaditaan

Kun käyttäjä tabuloi johonkin ohjaimeen, vähintään osa siitä ohjaimesta on oltava näkyvissä. Yleisin virhetilanne: käyttäjä tabuloi kiinteän ylätunnisteen ohi, sivu vierittää automaattisesti niin, että kohdistunut linkki jää kiinteän palkin taakse, eikä käyttäjä enää näe kohdistuskehystä. Ohjain on edelleen kohdistettuna ja reagoi Enter-näppäimeen, mutta käyttäjä ei pysty näkemään sitä.

Onnistumiskriteeri asettaa vähimmäistason: kohdistunut elementti voi olla osittain peitetty, mutta ei kokonaan. AAA-tason 2.4.12 nostaa vaatimuksen muotoon „ei peittyisi lainkaan“.

Tämä on yksi neljästä uudesta toimivuuteen liittyvästä onnistumiskriteeristä, jotka lisättiin WCAG 2.2:een, ja sillä on ollut merkittävä vaikutus, koska kiinteitä ylätunnisteita, alatunnisteita, evästebannereita ja chat-widgetikuplia on kaikkialla.

Kuinka vaatimus täytetään

• Lisää kohdistuviin elementteihin CSS scroll-margin-top kiinteän ylätunnisteen korkeuden verran, jotta selaimet vierittävät automaattisesti kohdistuneen ohjain selvästi ylätunnisteen alapuolelle.
• Kiinteille alatunnisteille ja chat-kupliille varmista, etteivät ne peitä kokonaan yhtään kohdistuvaa elementtiä. Joko pienennä niitä kohdistuksen yhteydessä tai ankkuroi ne tavalla, joka jättää puskurin sivun reunaan.
• Evästebannereita ja suljettavia peittokuvia: älä tee niistä kiinteitä tavalla, joka jättää myöhemmät tabulointipysäkit niiden alle. Tee niistä joko modaalisia (kohdistuksen lukitsevat) tai ei-estäviä.
• Sivuilla, joissa on sekä kiinteä ylätunniste että kiinteä alatunniste, testaa tabulointijärjestys näkymän pystysuuntaisen keskikohdan ympärillä — siellä kohdistunut elementti puristuu.
• Käytä scroll-padding-top-ominaisuutta vierityskontainerissa varajärjestelmänä vanhemmille selaimille.

html { scroll-padding-top: 80px; }       /* vastaa kiinteän ylätunnisteen korkeutta */
:target, :focus { scroll-margin-top: 80px; }

Yleisiä virheitä

• Kiinteä ylätunniste ilman scroll-padding-kompensaatiota: jokainen tabulointi näkymän yläpuoliskolle piilottaa kohdistuskehyksen.
• Evästeen hyväksymisbanneri kiinnitetty alaosaan, joka peittää lomakkeen viimeiset kentät, kun ne saavat kohdistuksen.
• Live-chat-widgetikupla oikeassa alakulmassa, joka peittää lomakkeen „Lähetä“-painikkeen.
• Markkinointitiimien lisäämät kampanjakiinnitetyt palkit (Black Friday -bannerit) ilman, että scroll-padding-arvoja on päivitetty.
• Kiinteät taulukon otsikot koontinäytöissä, joissa Tab ensimmäiselle dataelementille sijoittaa sen otsikkorivin taakse.

Miksi tämä on tärkeää

Tämä onnistumiskriteeri korjaa virheluokan, joka turhauttaa näppäimistökäyttäjiä päivittäin mutta harvoin ilmenee automaattisissa skannauksissa — mikään axe-sääntö ei pysty ennustamaan, missä vierityspaikassa kiinteä elementti peittää kohdistuneen elementin. Se myös kohtuuttomasti haittaa ruudunsuumennusohjelmien käyttäjiä, joiden näkyvä näkymä on jo pienentynyt neljäsosaan näytöstä, joten kiinteä elementti vie siitä entistäkin suuremman osuuden.

Odota 2.4.11:n olevan yksi useimmin mainituista uusista löydöksistä vuoden 2026 auditointiraporteissa. Korjaus on pieni (muutama CSS-arvo), mutta se edellyttää koordinointia kaikkien kiinteää elementtiä — ylätunniste, alatunniste, banneri, widget — omistavien tiimien välillä.