Fokuserat element får avvikande CSS - Som användare vill jag kunna se vilka element som får fokus när jag använder tangentbordet för att navigera

[viktor-sarge]

User story

Som användare vill jag kunna använda tangentbordet för att navigera. Det kräver att det går att urskilja vilket element som får fokus när jag använder tab-tangenten.

Acceptanskriterier

• [ ] Alla element som man kan tabba sig till har en avvikande CSS-styling när de får fokus.

Standard AC:s

• [ ] Lösningen fungerar på alla skärmar (mobil, tablet, pc)
• [ ] Lösningen har kodgranskats av en kollega
• [ ] Eventuellt nya komponenter har dokumenterats och syns på design.regionhalland.se
• [ ] Storyn har synkats med övriga produktägare
• [ ] Lösningen går i linje med WCAG 2.0 AA

Övrig information

funka.nu är ett bra exempel på en tydlig men samtidigt smakfull lösning där funktionen går i linje med den vanliga grafiska profilen.

För vissa komponenter räcker det med kanske med ren CSS, men i de fall man t.ex. tabbar till en länk inuti en puff vill man ju att hela puffen skall markeras avvikande för att det skall bli snyggt. Då krävs lite javascript.

[JohannaOlin]

@regionhallandviktor Har du tittat på denna nyligen? Är det tillräckligt bra nu eller behöver det vara ännu tydligare? Det beror kanske på vilken webbläsare man använder, i Chrome tycker jag att det är tydligt nu, men det var inte lika tydligt i IE.

[viktor-sarge]

@JohannaOlin Det behöver bli tydligare. Vi kan lära av t.ex. vgregion.se som använder en accentfärg för att göra det väldigt tydligt utan att för den skull avvika från profil för mycket.

exempel vg-region - fokuserad logga.

Exempel 2 VGregion - fokuserad puff