Alert kan användas på en sida för tillfällig information eller för att meddela status i en tjänst eller funktion.
Innehållsförteckning
| Innehållsförteckning |
|---|
Komponentkällor
1177
Inera
Tillgänglighet
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. Det finns olika typer av roles och aria-live som kan användas för att förmedla en varning till användare med skrämläsare, kolla på följande länk om olika exempel och välj det som är mest passande för situationen: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
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)
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)
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.
Se till att det går att hantera all funktionalitet med enbart 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 de inte kan fastna.
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.
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)
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.
Publicerad | |
Senast uppdaterad |