Tooltip

Tooltip är en enkel popupruta som kan visas när användaren hovrar med muspekaren över ett element eller text.

Open

1177

 

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

Allmänt: Viktig information ska ej läggas i en tooltip, är informationen viktig för användaren så ska det istället stå i klartext direkt på sidan eller i label tillhörande en interaktiv komponenten så det inte kan missas. En del användare kommer aldrig att se vad tooltipen innehåller då de kommer att ignorera att den finns, så bättre att ha kompletterande information inuti den om den ska användas.

WCAG-kriteriet 1.4.13 Popup-funktioner ska kunna hanteras och stängas av alla
Se till att användare som använder hjälpmedel också ska kunna ta del av informationen som visas i tooltip. Tooltipen ska finnas kvar när jag hovrar till tooltip-rutan den ska inte försvinna när jag lämnar komponenten som triggar den om jag hovrar mot tooltipen. Den ska dock försvinna om jag för bort muspekaren från området.

WCAG-kriteriet 1.4.3 Kontrast på text
Se till att liten text har ett kontrastvärde av minst 4.5:1 mot bakgrunden, och stor text minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.4.11 Kontrast på icke-textobjekt
Grafik, så som ikoner, komponenter och andra informationsbärande grafiska element ska ha kontrast värde på minst 3.0:1. (Nivå AA)

WCAG-kriteriet 4.1.2 Namn, roll och värde
Utgå främst från HTML-standarden när ni skapar nya komponenter, då blir det lättare för hjälpmedel att tolka vad det är för sorts komponent som användaren interagerar med. Förändringar av status, egenskaper och värden som kan anges av användaren ska kunna tolkas av hjälpmedel, samt meddelanden om ändringar i komponenten (Nivå A)

WCAG-kriteriet 1.3.1 Ange i kod vad sidans olika delar har för roll
Presentera information på ett korrekt sätt genom att använda rätt html-element. Detta ökar chansen för användare och hjälpmedel att förstå relationen mellan komponenter och dess roller.

Exempel: Rubriker ska kodas som rubriker (H1-H6) och inte som en fetstilt text eller något annat.

Exempel: Det ska vara en relation/koppling mellan label och ett input-fält så man förstår att de hör ihop.

WCAG-kriteriet 2.1.1 Tangentbordsfokus
Se till att användare som enbart använder sig av tangentbord för att navigera kan nå all information.

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.