Focus niet verborgen (uitgebreid)

Wat het vereist

2.4.11 staat gedeeltelijke bedekking toe zolang een deel van het gefocuste element zichtbaar blijft. 2.4.12 schrapt die ruimte: het gefocuste element moet volledig zichtbaar zijn. Tabben naar een knop moet de volledige knop in het viewport plaatsen zonder dat er iets overheen ligt — geen vaste header die de bovenrand afknipt, geen chatbel die de rechteronderhoek bedekt.

Dit is AAA en aspirationeel voor de meeste teams, maar het is het juiste doel voor ontwerpsystemen die worden gebruikt in de overheid, de gezondheidszorg en het onderwijs, waar toetsenbordbetrouwbaarheid ononderhandelbaar is.

Hoe te voldoen

• Stel scroll-padding-top en scroll-padding-bottom op de scrollcontainer royaal in — iets meer dan de hoogte van alle vaste elementen samen.
• Verberg chatwidgets automatisch wanneer een focusbaar element hun positie nadert, of verplaats ze bij focusgebeurtenissen.
• Overweeg voor vaste voetteksten niet-vaste alternatieven, of comprimeer ze bij scrollen zodat ze uitsluitend kopeinhoud bedekken, nooit bedieningselementen.
• Controleer elke pagina met zowel een vaste header als een vaste voettekst. De „veilige band“ in het midden krimpt snel, met name op kleine viewports.
• Test bij 200% browserzoom en 400% (conform 1.4.10 Reflow) — vaste elementen die bij 100% werkten, kunnen het scherm nu volledig vullen.

Veelvoorkomende fouten

• Vaste header die de bovenste 4 px van elke focusring bedekt — akkoord voor 2.4.11, faalt voor 2.4.12.
• Skip-link doelen die bovenaan <main> landen met de focusring gedeeltelijk afgeknepen door de vaste header.
• Zwevende „Help“-knoppen rechtsonder die een hoekpixel overlappen van gefocuste knoppen in dat gebied.
• Promotionele banners ingevoerd via marketingtags die niet zijn meegenomen in de scroll-padding-tokens van het ontwerpsysteem.
• Mobiele onderste navigatiebalken waarbij Tab naar het laatste formulierveld het veld toont met de focusring licht afgeknipt aan de onderkant.

Waarom dit belangrijk is

Voor gebruikers met slechtziendheid die afhankelijk zijn van de focusindicator om hun positie bij te houden, kan zelfs een gedeeltelijke afkapping de indicator effectief onzichtbaar maken — een omtrek van 2 px met de bovenste pixel afgeknipt ziet eruit als een lijn van 1 px, die gemakkelijk voor een rand kan worden aangezien. Het uitgebreide criterium behandelt de focusindicator als een eersterangse UI-element dat zijn volledige begrenzing op het scherm verdient. De keuze voor 2.4.12 dwingt teams hun budget voor vaste elementen te rationaliseren, wat de lay-out vaak voor iedereen verbetert.