Select multiple

Select multiple är en lista med valbara alternativ som fälls ut när användaren klickar på den. Användaren kan välja flera alternativ genom att klicka i checkboxar.

Open

1177

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Använd default select i första hand för att hålla tillgänglighet och användbarhet på så hög nivå som möjligt.

Visualisera valda alternativ

För att visa att en select multiple har flera valda alternativ kan det skrivas ut på flera sätt. Av tillgänglighetsskäl kan det vara svårt att visa hela texten för alla de valda alternativen i inputfältet. Risken är att ett eller flera valda alternativ klipps av och trunkeras, vilket gör det svårare att förstå vad eller hur många alternativ som är valda. Rekommendationen är att skriva ut alternativen som “X valda”.

Tillgänglighet

Allmänt

• Se till att fokusramar syns tydligt och har nog kontrast för att användaren ska kunna urskilja vart hen står (ska uppnå 3.0 för stor text och icke text-objekt, samt 4.5 för liten text).

• Det ska framgå för skärmläsare om drop-down menyn är ”öppen” eller ”stängd”. Desamma gäller checkboxarna, de ska framgå om de är kryssade eller inte kryssade.

• En användare som använder musen för att navigera i drop down kan ha svårt att hålla sig inom undermenyerna ifall de har nedsatt motorik/skakningar, därför kan man ha en timer på undermenyerna så det inte stängs igen direkt när man råkar lämnar undermenyernas fält. Se exempel på: Fly-out Menus under rubriken ”mouse users”.

Aria-multiselectable

Aria-multiselectable attributet indikerar att användaren kan välja flera olika val. Det attributet kan även informera tekniska hjälpmedel om att användaren kan göra detta. När multi-select används så informera ändå användaren om att de kan göra flera val. Ge användaren vägvisning om att de kan göra det och hur de kan göra det. Exempel om användaren måste hålla ner ctrl + klicka på de olika alternativen så ge en instruktion: ”För att välja mer än ett alternativ, håll ner ctrl-knappen medans du väljer dina alternativ” eller liknande.

När användaren väljer ett eller flera alternativ så ska alternativen sättas till aria-selected="true", och de alternativ som inte är valda är satta till aria-selected="false".

För mer information om multiselectable, exempel och tillvägagångsätt gå till länken nedan:

aria-multiselectable - Accessibility | MDN

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 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. . Många gånger kan man navigera med tangentbord till själva drop-down menyn men sedan så kan inte undermenyalternativen nås, så se till att undermenyalternativen är tillgängliga via tangentbord och att de 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.

1.3.1 Information och relationer

Se till att en användare kan ta del och förstå innehållet tydligt och förstå vad som förväntas av dom med hjälp av passande label-attribut. Se till att label attributet är kopplat korrekt till respektive element. (Nivå A)

3.3.2 Ledtexter/etiketter eller instruktioner

Det finns ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren.  Genom att i kod (med hjälp av for-attributet på label-elementet) koppla etiketten till fältet kan användare markera fältet även genom att klicka på etiketten, vilket ökar den klickbara ytan. Genom kopplingen blir det även möjligt för en person som saknar en visuell presentation att veta vilken etikett som hör till vilket fält, eftersom skärmläsare läser upp etiketten när fältet får fokus.

Radioknappar och kryssrutor: sätt etiketten till höger om knappen eller rutan. Skriv fältetiketter till kryssrutor så att det tydligt framgår vad det innebär om kryssrutan är ifylld respektive tom. Skriv i jakande form, till exempel ”Ja, jag vill få nyhetsbrevet via e-post”. Undvik kryssrutor där användaren ska välja bort någonting, till exempel ”Nej tack, jag vill inte ha nyhetsbrevet via e-post”.

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.