Select

Select är en lista med valbara alternativ som fälls ut när användaren klickar på den.

Open

1177

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Generellt

• Om formulärfält behöver vara placerade på en färgad bakgrund (tex. ljusblå eller beige) har fälten vit fyllnad men i övrigt samma ram och skuggningar etc. som de vanliga formulärfälten.

• Är fältet obligatoriskt? Den metoden som rekommenderas är att skriva direkt i label /etiketten, i parentes. Om det är ont om plats i fältetiketten så kan en asterisk användas *. Mer ingående om obligatoriska fält finns här: https://inera.atlassian.net/l/cp/CtToFKyA.

  • Användning av asterisker: ska i så fall ligga på vänster sida av etiketten och betydelsen ska framgå för skärmläsaranvändare. Se nedan under “Tillgänglighet” för hur den kan göras tillgänglig.

States

• Default: enfärgat fält med heldragen kantlinje

• Active: inre skugga och fokusmarkering runt inputfältets kantlinje

• Disabled: grått fält med mörkgrå streckad kantlinje

• Invalid: rött fält med röd streckad kantlinje och undertill en pratbubbla med pil som pekar upp på fältet. Pratbubblan innehåller ikon och beskrivning av felet.

Kompakta inputelement för admingränssnitt

För administrativa gränssnitt används en mer kompakt variant av inputelement för att skapa bättre överblick, spara plats och göra gränssnittet mer kompakt.

• I Figma: mode för admin eller invånare

• I kod: styrs på tema, dvs har du valt exempelvis “1177 Profession” blir input automatiskt kompakta

I tabellen nedan finns specifikation för storlekar på inputfält tillsammans med rätt knappar.

Tillgänglighet

Allmänt:

WCAG-kriteriet 1.4.11 och WCAG-kriteriet 1.4.3

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

WCAG-kriteriet 4.1.2

• Det ska framgå för skärmläsare om drop-down menyn är ”öppen” eller ”stängd”, det ska gå att navigera med muspekaren samt med enbart tangentbordsnavigering. Det ska gå att navigera igenom en ”meny med drop-down menyer” med hjälp av tab och för att navigera inuti en drop-down på undermenyerna så används piltangenterna. Enter används för att selecta/välja ett alternativ i drop-down menyn, och esc används för att gå ur drop-down menyn om man inte vill välja något.

• 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å: https://www.w3.org/WAI/tutorials/menus/flyout/ under rubriken ”mouse users”.

Riktlinje 101

Om ett val i en drop down är obligatoriskt i ex formulär

Förtydliga för användaren vilka inputs/textfält som är obligatoriska i formuläret. Använd en bild av en asterisk (*) för att markera ett obligatoriskt fält i ett formulär. Den ska placeras före inmatningsfältet, i label-elementet. Låt bilden ha textekvivalenten alt=”obligatoriskt”. Informera användarna före formuläret genom att skriva till exempel ”Fält markerade med * är obligatoriska och måste fyllas i”. Använd den uppmärkning av obligatoriska fält som fungerar med den html-version du valt.

WCAG-kriteriet 2.1.1 och WCAG-kriteriet 2.1.2

Tangentbordsnavigering: Bra att tänka på är att drop-down menyn ska vara användbar både för användare av tangentbord och mus. 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.

WCAG-kriteriet 3.2.1

Tangentbordanvändare måste veta vad de kommer att aktivera, så använd inte för långa undermenyer OM undermenyn öppnas med fokus. En användare ska annars navigera mellan flera dropdown menyer via tab-knappen, om användaren vill kolla på undermenyerna i dropdown så används tangentpilarna, om ett alternativ ska väljas så används enter-knappen. Esc–knappen används för att hoppa ur en dropdown och då görs inte ett aktivt val av underrubrikerna/undermenyerna.

Select

Att tänka på vid användning av <select> element är att man kan använda sig av en default select eller styla en custom. Det som skiljer på dessa är att en default select kommer öppna valen i enhetens native lösning tex. interaktionen med snurran på iOS medan en custom select inte gör det utan kommer alltid öppnas som en select på alla enheter. Vi rekommenderar att använda default selects om inget annat krävs för att hålla tillgänglighet och användbarhet på så hög nivå som möjligt. Läs mer om custom selects på W3Schools W3Schools.com

WCAG-kriteriet 2.4.5

Flera olika sätt: Det finns mer är ett sätt att hitta en webbsida inom en uppsättning av webbsidor, utom när webbsidan är ett resultat av eller ett steg i en process. (Nivå AA)

2.4.3 Fokusordning

Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokuserbara komponenter få fokus i en ordning som bevarar betydelse och användning. (Nivå A) Se till att fokus/tab-ordningen är logisk.

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)

• Anmärkning: Detta framgångskriterium är främst till för utvecklare som utvecklar egna komponenter eller skapar egna script för komponenterna i användargränssnittet. 

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. Rubriker och ledtexter behöver inte vara långa. Ofta kan ett enda ord vara tillräckligt för att beskriva innehållet. Använd nyckelord ur texten och skriv det viktigaste orden först.

1.3.1 Information och relationer

Information, struktur, och relationer som förmedlas genom presentation kan bli automatiskt tydliggjord eller finnas som text. (Nivå A)

• Ange i kod vad sidans olika delar har för roll

• Öka chansen att informationen presenteras korrekt oavsett mottagarens verktyg, genom att använda html-elementen på rätt sätt.

• Exempelvis kan information läsas upp eller förstoras eller presenteras med annan layout. Du som avsändare behöver se till att ingen viktig information går förlorad när presentationen förändras.

• Se till att använda rubriker med hjälp av H1-H6, inte med hjälp av större text-storlek eller fetstilt-text.

• Se till så det finns kopplingen mellan en ledtext och ett formulärfält.

• Utnyttja html-språkets olika element så som de är tänkta, och komplettera med WAI-ARIA och att uttryckligen beskriva med text sådant som inte framgår av kodningen.

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.