Fokus inte dolt (minimum)

För personer som använder tangentbordet för att navigera på en webbplats är det viktigt att tydligt kunna se vad som är i fokus. Detta för att användaren ska kunna se var hen befinner sig på sidan och vilka objekt som går att interagera med. Objektet som är i fokus får inte vara dolt. Riktlinjen tillåter att objektet som är i fokus är delvis dolt av annat innehåll. Man bör dock tänka på att ju mer av objektet som är dolt desto svårare blir det för användaren att använda webbplatsen.

Exempel på innehåll som kan dölja fokus

Situationer där innehåll kan bli dolt är när informationsrutor, sidhuvud, menyer eller chattfönster överlappar innehållet på sidan. Det blir en överträdelse mot riktlinjen om det finns fokuserbara element under.

Undantag

Delvis genomskinliga rutor

Om en överlappande ruta är delvis genomskinlig som täcker ett fokuserbart element så räknas den inte som helt dold om man kan se fokusobjektet genom. Kontrollera dock att detta inte bryter mot kraven för kontrast 1.4.11.

Innehåll som kan flyttas på av användare

Ibland kan en webbplats ha innehåll som kan flyttas på av en användare. Exempel på flyttbart innehåll kan vara verktygsfält, paneler, eller redigeringsytor. Detta gör att användare själva kan flytta innehåll som resulterar i att fokus döljs. Vid situationer där flyttbart innehåll finns är kravet endast att innehållets startposition inte döljer fokus.

Tillfälligt utfällbart innehåll

Ofta finns det tillfälligt utfällbart innehåll vilket innebär att nytt innehåll visas när en användare interagerar med ett objekt. Detta innehåll är avsett för direkt interaktion av användaren, och ska inte vara kvar som utfällt. Exempel på detta kan vara menyer, alternativ-listor eller datumväljare. Det utfällbara innehållet kan ofta täcka fokuserbara objekt. Detta är tillåtet om innehållet fälls ihop efter att användaren antingen gjort ett val, eller förflyttat fokus från det nya innehållet.

Bestående utfällbart innehåll

När en användare interagerar med ett objekt så kan nytt innehåll visas, som finns synligt tills användaren interagerar med objektet igen. Detta till skillnad från tillfälligt utfällbart innehåll är innehåll som kan vara kvar som utfällt även när fokus är utanför innehållet. Exempel på sådant innehåll kan vara så kallade dragspel (“accordion”) eller chattfönster. Bestående utfällbart innehåll får inte dölja fokus.

Testa riktlinjen

Med tab-tangenten kan man navigera mellan alla fokuserbara element på webbplatser. Testa att navigera på webbplatsen med enbart tangentbordet och se till att fokusmarkeringen är synlig. Öppna allt utfällbart innehåll och fortsätt navigera för att säkerställa att det nya innehållet inte döljer fokus.

Lösningsförslag

Flytta på övrigt innehåll när bestående utfällbart innehåll öppnas. Om man exempelvis öppnar ett dragspel, kan allt innehåll under detta flyttas ner till under innehållet för dragspelet.
Öppna utfällbart innehåll till en sektion utan annat innehåll. Detta gör att det inte finns något att täcka när innehållet fälls ut.
Fäll ihop tillfälligt utfällbart innehåll när fokus hamnar utanför innehållet eller när ett val har gjorts. När användaren har interagerat med innehållet, behöver det inte fortsätta visas.
Se till att initial placering av innehåll inte överlappar med annat innehåll.

Läs mer om riktlinje 2.4.11 på W3C webbplats