| Innehållsförteckning |
|---|
Exempel
...
Fokusmarkering
Exempel på fokusmarkeringar i gränssnittet.
Fokusmarkering respektive hover - navigationsbrickor med information
Fokusmarkering respektive hover - navigationsbrickor med länkar.
Designspecifikation
...
Fokus är visuella markörer som visar vilket (oftast interaktivt) element på en sida som är fokuserat, i vårt fall genom en solid linje runt elementet. Endast ett element på en sida kan fokuseras åt gången.
Inera
Designspecifikation
Samma typ av fokusmarkering ska användas generellt för samtliga komponenter.
...
Fokusmarkering och hoverstyle bör vara fristående från varandra.
Do’s and Don’ts
Använd samma fokusmarkering konsekvent.
Blanda inte stylad fokusmarkering och webbläsarens standardmarkering.
Markeringen ska vara tydlig.
...
Fokusmarkeringar visas med:
En 2 px solid linje
Färg stone-base för 1177 och earth-light för Inera
Linjen visas med 5 px avstånd (padding) till elementet med fokus
.png?version=1&modificationDate=1664892971142&cacheVersion=1&api=v2)
.png?version=1&modificationDate=1664892976160&cacheVersion=1&api=v2)
Tillgänglighet
| Info |
|---|
Mer utförlig tillgänglighetsinformation läggs till inom kort. |
Tänk på att aldrig ändra tab-ordningen med tab-index utan låt fokus flöda i den ordning komponenterna ligger i designen och koden. Använd endast tab-index=”0” för att tillåta att ett element får fokus eller tab-index=”-1”för att förhindra att ett element får fokus.
...
Research på komponenten
-
Relaterade resurser/komponenter
Status
...
Status
...
| Status | ||||
|---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | |
|---|---|
Senast uppdaterad |