Global alert

Global alerts hanterar meddelanden som påverkar hela tjänsten och som är viktiga att lyfta till alla besökare.

Open

1177

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

Allmänt:

• Använd role=”alert”, detta ger implicit aria-live=”assertive”, vilket gör skärmläsare medvetna om meddelandet. I fall där informationen inte är särskilt kritisk ska man titta på användande av aria-live=”polite”. Mer information om hur man kan använda aria-live finns här: ARIA live regions - Accessibility | MDN

• Om det är möjligt att fälla ihop och fälla ut det globala meddelandet så ska det gå att tabba till meddelandet med tangentbord, den ska alltså få fokus. Fokusramen runt det interaktiva elementet ska vara tydligt så användaren ser vart hen står och den ska ha tillräckligt hög kontrast (minst 3.0:1 för icke-textobjekt).

WCAG-kriteriet 4.1.3

Statusmeddelanden: Se till att de som använder tekniska hjälpmedel som exempelvis skärmläsare och förstoringsprogram kan göras uppmärksamma på viktiga meddelanden även om de presenteras utanför det område på sidan som användaren har i fokus.
Ange med hjälp av attributen role eller aria-live var viktiga meddelanden kan förekomma, så får hjälpmedel kännedom om dessa och kan presentera dem för användaren vid ett lämpligt tillfälle.

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.

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. (Nivå A)

WCAG-kriteriet 1.4.1

Använd inte enbart färg för att förmedla information: Använd gärna färger, men låt inte färgskillnader vara det enda sättet att urskilja information utan komplettera med exempelvis text, mönster eller någon annan visuell indikation. (Nivå A)

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.