Enkätpuff

En enkätpuff är ett statiskt kort genom vilket vi kan bjuda in användare att svara på kundundersökningar på våra olika sajter.

 

Open

1177 Invånare

 

Open

Inera

Innehållsförteckning

Komponentkällor

Designspecifikation

-

Tillgänglighet

Källa: Understanding WCAG 2.2 | WAI | W3C

En enkätpuff är avsedd att fungera som ett meddelande till användaren om möjligheten att delta i en enkätundersökning. Syftet är att användarna ska kunna bidra med feedback så att tjänsteleverantörer kan vidareutveckla eller förbättra olika aspekter av sin tjänst. För att uppnå detta mål måste man överväga tillgänglighetsaspekterna som är kopplade till enkätpuffen så att den når ut till alla användare oavsett funktionsnedsättning. Vilka tillgänglighetsaspekter bör beaktas för att säkerställa att enkätpuffen når alla användare?

Skärmläsare

Eftersom enkätpuffen är avsedd att meddelas till användaren måste den också göras synlig för användare med synnedsättningar. Detta kan uppnås genom att se till att syntaxen för enkätpuffen har korrekta semantiska roller. Genom att säkerställa detta garanteras att skärmläsare läser upp enkätpuffen på ett korrekt sätt, vilket säkerställer att informationen når användaren.

Färgkontrast:

En stark färgkontrast är avgörande för att säkerställa att enkätpuffen är tydlig och lättidentifierad för användare med synnedsättningar eller färgblindhet. En tillräckligt tydlig kontrast mellan text och bakgrund gör att informationen kan uppfattas tydligt och läsas med lätthet.

Rubriker:

Strukturerade och tydliga rubriker är väsentliga för att underlätta användarens navigering och förståelse av enkätpuffen. Genom att tillämpa korrekta HTML-taggar för rubriker (till exempel h1, h2, etc.) möjliggörs en hierarkisk och logisk struktur. Detta är särskilt fördelaktigt för användare som använder skärmläsare, vilket underlättar för dem att snabbt få en överblick över enkätpuffens innehåll.

Kontraster:

Utöver färgkontrasten är det också viktigt att överväga kontrasten i övriga visuella element, såsom textstorlek och typsnitt. Tillräcklig kontrast mellan text och bakgrund samt mellan olika delar av enkätpuffen förbättrar läsbarheten och förståelsen för användarna.

Förstoring:

Enkätpuffen bör vara responsiv och skalbar för att möjliggöra för användare att zooma in och förstora innehållet utan att förlora information eller funktionalitet. Detta är särskilt viktigt för personer med synnedsättningar som kan behöva öka textstorleken för att läsa innehållet på ett bekvämt sätt.

Textavstånd:

Att ha rätt textavstånd mellan ord och radavstånd är avgörande för att förbättra läsbarheten och undvika förvirring. Genom att tillhandahålla tillräckligt med utrymme mellan textelement skapas en lättläst layout, vilket underlättar för användare med synnedsättningar eller kognitiva svårigheter. Det är viktigt att följa riktlinjer för tillgänglighet för att säkerställa ett korrekt textavstånd.

WCAG riktlinjer som är viktiga att ta i hänsyn till enkätpuffar

• WCAG 2.2, 1.1.1 Beskriv med text allt innehåll som inte är text (Nivå A): Bilder, ikoner och andra icke text objekt som förmedlar information måste kunna förmedlas till en användare med hjälpmedel som skärmläsare. Använt alt-attribut för att beskriva ikoner/bilder, om grafiken enbart är för dekoration så ska ett tomt alt-attribut användas.

• WCAG 2.2, 1.3.1 Information och Relationer (Nivå A): Se till att informationen som skickas genom enkätpuffen har tydliga och korrekta relationer, vilket underlättar för skärmläsare att förmedla strukturen och innehållet på ett meningsfullt sätt.

• WCAG 2.2, 1.4.11 Icke-text Kontrast (Nivå AA): Kontrollera att kontrasten mellan olika visuella element (inte bara text) i enkätpuffen är tillräcklig för att stödja användbarheten. Var även noga med att ramen för enkättpuffen uppnår tillräcklig kontrast.

• WCAG 2.2, 1.4.12 Öka avstånd mellan tecken rader stycken och ord (Nivå AA): Se till att det går att justera avstånd på all text i komponenten utan att texten överlappar eller blir oläslig.

• WCAG 2.2, 1.4.3 Kontrast (Minimum) (Nivå AA): Säkerställ tillräcklig kontrast mellan text och bakgrund samt mellan olika delar av enkätpuffen för att underlätta läsbarhet.

• WCAG 2.2, 1.4.4 Ändra textstorlek (Nivå AA): Möjliggör att användare kan förstora texten inom enkätpuffen utan att förlora information eller funktionalitet.

• WCAG 2.2, 2.1.1 Tangentbordsnavigation (Nivå A): Är lätt att identifiera som interaktiv, Går att använda med tangentbord.

• WCAG 2.2, 2.4.11: Fokus inte döljd (Minimum) (Nivå AA)
  Det ska vara tydligt var du befinner dig på sidan, vilket betyder att du ska ha en tydligt synlig indikering av vilket element på sidan som har tangentbordsfokus.

• WCAG 2.2, 2.4.3 Fokus rangordning (Nivå A): Säkerställ att navigeringsordningen är logisk och följer ett förutsägbart mönster.

• WCAG 2.2, 2.4.4 Skriv tydliga länkar (Nivå A): När man gör länkar så är det viktigt att de är så tydliga som möjligt så man kan förstå dess syfte ur kontext. Undvik att kalla länkar exempelvis “Läs mer”, “Mer information”, då detta är för generellt och inte hjälper användaren att förstå vad länken går till.

• WCAG 2.2, 2.5.3 Text på knappar och kontroller överstämmer med maskinläsbara namn (Nivå A): Se till att text som är synlig på knappar, länkar m.m, har samma maskinläsbart namn. Om det inte är samma så kan användare med exempelvis program för röststyrning och skärmläsare få svårt att navigera på sidan.

• WCAG 2.2, 3.1.1 Språket på hemsidan (Nivå A): Se till att instruktioner och innehåll är tydligt förståeliga på det språk som användaren förväntar sig. Använd lang-attributet för att ange aktuellt språk i koden så att hjälpmedel har lättare för att tolka innehållet korrekt.

• WCAG 2.2, 3.3.2 Etiketter eller instruktioner (Nivå A): Tillhandahåll tydliga och begripliga etiketter eller instruktioner för användare när de interagerar med enkätpuffen.

• WCAG 2.2, 4.1.2 Namn, Roll, Värde (Nivå A): Säkerställ att skärmläsare kan korrekt identifiera och rapportera namn, roller och värden för interaktiva element inom enkätpuffen.

Feedback

Hjälp oss att förbättra den här sidan 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.