Sidjämförelse

Expandable är en komponent som låter användaren fälla in eller ut (visa/dölja) information i en eller flera nivåer.

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Olika typer av expandables

Det finns olika varianter av expandable för olika ändamål. Dels flera olika rubriknivåer, dels två olika nivåer (default och undernivå) som kan användas när användaren ska kunna fälla ut information i flera steg.

Expandables i kort

Expandables kan användas tillsammans med komponenten Card för att skapa expanderbara kort med information i en eller flera nivåer.,

Designriktlinjer

Expandables kan hanteras på olika sätt beroende på kontext. UX-ramverket har tagit fram designriktlinjer för visa mer/visa mindre innehåll som ger en förklaring samt visar exempel på hur expandables ska användas.

Tillgänglighet

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 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)

2.4.3 Fokusordning
Om det finns något fokusbart element inuti komponenten: Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokusbara komponenter få fokus i en ordning som bevarar betydelse och användning. (Nivå A) Se till att fokus/tab-ordningen är logisk.

2.1.1 Tangentbordsnavigering
Se till att det går att hantera all funktionalitet med enbart tangentbord, alla interaktiva element ska vara nåbara med tangentbord. Många gånger kan man navigera med tangentbord till en drop-down meny men sedan så kan inte undermenyalternativen nås, så se till att allt är nåbart och är tillgängliga via tangentbord samt att användaren inte kan fastna.

4.1.2 Namn, roll, värde
För alla komponenter i ett användargränssnitt (inklusive, men inte begränsat till formulärelement, länkar och komponenter skapade med script), kan namnet och rollen automatiskt tydliggöras. Status, egenskaper och värden som kan anges av användaren kan bli automatiskt tydliggjord, och meddelande om ändringar i dessa komponenter finns åtkomliga för användarprogram, inklusive hjälpmedel. (Nivå A)

2.4.6 Rubriker och ledtexter/etiketter
Rubriker och ledtexter/etiketter beskriver ämne eller syfte. (Nivå AA) Beskrivande rubriker, ledtexter och etiketter(labels/headings) hjälper användarna att förstå en sidas innehåll och syfte.

WCAG-kriteriet 1.1.1
Beskriv med text det som inte är text: Om bilder eller andra informationsbärande grafiska objekt visas på sidan så ska det finnas en alt-text så även skärmläsare kan förstå vad det är. Om bilden/grafiska objektet enbart är dekorativt och inte förmedlar någon form av information eller är kompletterande till innehållet så behövs inte en alt-text den kan då lämnas tom med: alt=””. (Nivå A)

WCAG-kriteriet 1.4.4
Det ska gå att förstora texten utan att innehåll går sönder: Det ska vara möjligt att förstora texten dubbelt så stort utan att innehåll går sönder eller försvinner (alternativt kunna zooma in 200% i browser). Text ska inte överlappa eller döljas bakom andra komponenter.

WCAG-kriteriet 1.4.10
Flexibel layout vid förstorning eller användning av liten skärm: Det ska vara responsiv design vid förstorning eller vid användning av liten skärm. Ner till 320pixlar så ska det inte uppstå scroll i två dimensioner (lodrätt & vågrätt). Om inte responsiv design är möjligt för mobil så görs en mobilanpassad version.

WCAG-kriteriet 1.3.4
Innehåll presenteras rätt oavsett skärmens riktning: Innehållet ska kunna visas både som stående eller liggande vy.

WCAG-kriteriet 2.4.7
Markera tydligt vilket fält eller element som är i fokus: Se till att fokusramen syns när användaren tabbar till elementet, samt att kontrasten på fokusramen uppnår mist 3:1 i kontrastvärde.

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.