Tag
Tag-komponenten representerar specifika ord som hjälper till att märka, organisera och kategorisera innehåll. En tag kan vara både statisk, interaktiv och flera taggar visas ofta tillsammans i grupp.
Innehållsförteckning
Komponentkällor
1177
Inera
Designspecifikation
Det finns olika varianter av tag som kan användas i olika lägen.
Default: för att visualisera en kategori, etikett eller tagg av innehåll.
Closable: används vid t.ex. filtrering, för att visa vad som filtrerats på. Taggen kan sedan tas bort för att återställa det man filtrerat på.
Clickable: kan användas för att visualisera relaterade kategorier, etiketter eller taggar. Taggen blir en länk som tar användaren till den relaterade informationen.
Tillgänglighet
Använd tillräckliga kontraster i komponenter och grafik: Kontrasten måste uppnå minst 3.0:1 mellan grafik/komponent mot bakgrund. Förekommer det text så ska texten uppnå 4.5:1.
Använd tillräcklig kontrast mellan text och bakgrund: Kontrast på text mot bakgrund ska ha minst 4.5 i kontrastvärde för liten text och minst 3.0 för stor text.
Använd inte enbart färg för att förmedla information: Se till att man kan urskilja exempelvis statusförändringar på mer sätt än bara via färg. En person som är färgblind eller som använder hjälpmedel kommer inte kunna uppfatta informationen annars. Komplettera med text och eventuellt ikoner för att beskriva förändringen/informationen.
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.
Tangentbordsnavigering: Se till att det går att hantera all funktionalitet med enbart tangentbord. Många gånger kan man navigera med tangentbord till exempelvis en drop-down menyn men sedan så kan inte undermenyalternativen nås. Se till att hela komponenten är tillgängliga via tangentbord och att de inte kan fastna.
Namn, roll, värde: Det ska tydligt framgå vilken roll en komponent har samt vad namnet på komponenten är, en knapp ska ha rollen “knapp” exempelvis. 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. Exempel på status/värde: När en dropdown öppnas så kommer skärmläsaren informera om att dropdownen har öppnats samt om den är stängd. Skulle ett varningsmeddelande dyka upp på sidan så ska användaren bli informerad om att något har ändrats på den aktuella sidan/ läsa upp varningen.
Rubriker och ledtexter/etiketter beskriver ett ämne eller syfte. Beskrivande rubriker, ledtexter hjälper användarna att förstå en sidas innehåll och syfte. Rubriker är viktiga för att skapa en tydlig hierarki och struktur på sidan. Ledtexter beskriver för användaren vad den förväntas göra när den kommer till interaktiva element. Det används exempelvis över inputfält, grupp av checkboxar, datumväljare, med flera.
Tydlig fokusram: Se till att det tydligt framgår vilket element som är i fokus. Fokusramen ska ha tillräcklig kontrast 3,0:1.
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 | Feb 27, 2023 |
Senast uppdaterad | Feb 27, 2023 |