Popover

Popover är små overlays som öppnas av användaren genom att klicka på ett element (exempelvis en info-ikon). De ger användaren extra (icke kritisk) information om någonting på sidan.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

En popover har vit bakgrundsplatta med svag skuggning. Det finns flera olika varianter av en popover för att du ska kunna styra innehållet och placeringen.

• Pilar: finns i varje riktning (upp, ned, höger, vänster) och också med olika placering i höjd- eller sidled så att popovern kan placeras pekandes mot elementet (exempelvis en info-ikon) som öppnar den.

• Länk: finns med och utan länk.

• Scroll: när innehållet blir för långt för behållaren kan du indikera detta med en scrollbar.

• Kryss för att stänga: varje variant finns med eller utan kryss i högra hörnet för att styra hur den ska kunna stängas. Tänk på att popovern också bör kunna stängas med hjälp av ESC-knappen. I vissa fall kan det också vara relevant att kunna stänga en popover genom klick utanför komponentens yta.

Bilderna ovan visar olika exempel på innehåll i popovers.

Tillgänglighet

Allmänt

Se till att innehållet i popovers inte är kritiskt information som användaren måste vara medveten om. Alla användare kommer troligen inte att klicka på popovers när de navigerar på en sida. Innehållet ska vara ett komplement och stöd för användaren men inte obligatoriskt för att användaren ska kunna utföra sitt arbete. Viktig information ska hellre läggas direkt på sidan istället för inuti popover.

Aria

Standard för aria-tag/uppläsning av info-i blir “Öppna inforuta” men går att ändra till annat vid behov.

Relevanta WCAG-riktlinjer

WCAG-kriteriet 2.1.1  Hanterbart med enbart tangentbordet:
Se till att popovern kan triggas och stängas med tangentbord.

WCAG-kriteriet 3.2.1 Inga oväntade förändringar vid fokusering:
Det ska inte triggas något oväntat beteende när man hovrar över med mus eller får fokus med tangentbord.

WCAG-kriteriet 1.4.10 flexibel layout som fungerar vid förstoring eller liten skärm:
Inget innehåll ska döljas eller gå sönder vid förstoring (200%) eller om användaren sitter med liten skärm.

WCAG-kriteriet 2.5.3 Text på knappar och kontroller överensstämmer med maskinläsbara etiketter

WCAG-kriteriet 1.4.4 Se till att text går att förstora utan problem:
Det ska gå att förstora text utan att komponenten överlappas, text döljs eller liknande.

WCAG-kriteriet 2.1.2 Markören ska inte fastna vid tangentbordsnavigering:
Användaren ska inte fastna i komponenten, det ska gå att öppna, navigera och stänga komponenten med tangentbord.

WCAG-kriteriet 1.4.12 Öka avstånd mellan tecken, rader, stycken och ord:
Det ska gå att öka avstånd i text utan att texten överlappar annat innehåll, döljs eller går sönder.

WCAG-kriteriet 1.3.4 Innehåll presenteras rätt oavsett skärmens riktning:
Det ska gå att nå innehållet oavsett om det är liggande eller stående layout.

WCAG-kriteriet 1.4.13 Popup-funktioner ska kunna hanteras och stängas av alla:
Det ska gå att stänga popup-funktioner oavsett om användaren använder tangentbord eller mus-navigering. Den ska inte störa/stoppa användaren från att utföra sitt arbete. Den ska heller inte kunna aktiveras oavsiktligt.

WCAG-kriteriet 2.4.7 Markera tydligt vilket fält eller element som är i fokus:
Fokusmarkeringen ska ha tillräckligt hög kontrast (kontrastvärde 3.0).

WCAG-kriteriet 2.4.3 Gör en logisk tab-ordning:
Fokuset vid tab-ordningen ska följas i en logiskordning, inklusive när popovern är aktiv så ska det vara en logisk tabbordning inuti den om den innehåller interaktiva element.

WCAG-kriteriet 1.4.11 Använd tillräckliga kontraster i komponenter och grafik:
Komponenter och grafik (inklusive stor rubrik) ska ha kontrastvärde på minst 3.0.

WCAG-kriteriet 1.4.3 Använd tillräcklig kontrast mellan text och bakgrund:
Text (inklusive länkar av text) ska ha minst 4.5 i kontrastvärde.

WCAG-kriteriet 1.3.1 Ange i kod vad sidans olika delar har för roll:
Se till att komponentens har korrekt roll samt att relationer mellan komponenter framgår tydligt för användaren.

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.