Agent banner (ombud)
Agent banner (ombudsbanner) visar information då en användare agerar som ombud för en annan person i inloggat läge och är specifik för de inloggade tjänsterna på 1177.
Innehållsförteckning
Komponentkällor
Designspecifikation
Ombudsbanner visas initialt utfälld och kan fällas ihop. Vid scroll fälls bannern ihop per automatik och är sticky mot toppen för att man ska påminnas om att man är i ombudsläge även när man skrollar på sidor.
I hopfällt läge visas rubrik samt länk, medan brödtexten försvinner.
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.
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 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.
2.1.1 Tangentbordsnavigering:
Se till att det går att hantera all funktionalitet med enbart tangentbord ex: interaktiva objekt ska nås med 'tab-knappen'. Användaren ska inte heller kunna fastna inuti en komponent när hen använder tangentbord, kan de ta sig in så ska de kunna ta sig ut.
2.4.6 Rubriker och ledtexter/etiketter:
Beskrivande rubriker, ledtexter och etiketter(labels/headings) hjälper användarna att förstå en sidas innehåll och syfte. (Nivå AA)
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)
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)
Riktlinje 34 https://webbriktlinjer.se/riktlinjer/34-gor-lankar-och-klickbara-ytor-enkla-att-anvanda-for-alla/ Se till att klickbara ytor inte ligger för tätt inpå varandra. Om en länk har en tillhörande ikon så gör även denna klickbar. Förstora den klickbara ytan genom att inkludera ett område runt det som är länkat. I WCAG 2.2 så kommer ett krav på att klickbara ytor ska vara minimum 24×24 CSS-pixlars storlek, detta är inte officiellt satt ännu då WCAG2.2 är ett utkast fortfarande men kan vara bra att ha i åtanke.
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 | Jan 18, 2020 |
Senast uppdaterad | Dec 20, 2022 |