Tabeller används för att visa information eller data strukturerat i rader och kolumner.
Innehållsförteckning
| Innehållsförteckning |
|---|
...
Exempel
...
Status
...
| Status | ||||
|---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
Komponentkällor
1177
Inera
Designspecifikation
Storlekar och beteende
För desktop finns tabeller i två bredder: 620 px och utfallande 833 px.
Utfallande tabeller fyller ut till vänster i griden och används då man har tabeller med mycket innehåll och många kolumner.
Tabeller får scroll i sidled i mobil.
Textstorlek
Normen att ha textstorlek 14px-16px, där vi rekommenderar 16px men skulle det vara så att det behövs mindre text av någon anledning så får man använda 14px. Detta är förutsatt att användaren kan förstora texten upp till 200% utan att innehåll eller funktionalitet förloras.
Do’s and Don’ts
Använd utfallande tabeller om det finns mycket innehåll och kolumner.
Tillgänglighet
Korrekt kodade tabeller är i sin natur tillgängliga för många användare för de grupperar information så att man förstår hur saker hör ihop, det är dock extra viktigt att detta görs rätt för att inte skapa förvirring.
Tabeller ska ha en <table>-tagg för att definiera att det är en tabell. Se även till att det finns korrekt användning av tr, th, td.
Det kan vara bra för extra tydlighet att använda <caption> som en överskrift/rubrik till tabellen. Caption är en överskrift/rubrik för tabellen som kort förklarar innehållet. Placerad i table-elementet.
Använda scope-attributet för att beskriva riktningen på en <th>. (För enkla tabeller räcker det om tabellrubriken i attributet scope anger att den avser kolumnen (värdet ”col”) eller raden (värdet ”row”))
För komplexa tabeller använd kompletterande kod för att göra den mer begriplig.
För att förbättra upplevelsen för många se till att man inte behöver skrolla vertikalt för att få del av innehållet i tabellen.
Research på komponenten
-
Relaterade resurser/komponenter
Status
Uppbyggnad
Celler är grundstenarna i tabeller. Med dessa kan du bygga ihop tabeller med varierande rader och kolumner efter behov. Tabellkomponenten är uppdelad i två varianter för att åstadkomma detta: table header och table cell. Table header kan även ha en sorteringspil.
Tillgänglighet
Riktlinje 98 Skriv rubriker till tabeller:
Låt html-koden uttrycka vad tabellens olika delar innehåller, och hur de hänger ihop. På så vis blir tabellen tillgänglig för alla. Använd till exempel th-element för att ange vilka celler som är rad- och kolumnrubriker. Använd tabellrubriker såsom rad- och kolumnrubriker, och framhäv dem grafiskt.
Använd vid behov abbr-attributet för att ge förkortningar av rad- och kolumnrubrikers innehåll.
Koppla ihop rubrikceller med tillhörande dataceller. Detta gäller särskilt för komplexa datatabeller som har två eller flera logiska nivåer med rad- eller kolumnrubriker.
WCAG krav
WCAG-kriteriet 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)
WCAG-kriteriet 1.3.1 Information och relationer:
Information, struktur, och relationer som förmedlas genom presentation kan bli automatiskt tydliggjord eller finnas som text. (Nivå A)
WCAG-kriteriet 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. Rubriker och ledtexter behöver inte vara långa. Ofta kan ett enda ord vara tillräckligt för att beskriva innehållet. Använd nyckelord ur texten och skriv det viktigaste orden först. (Nivå AA)
WCAG-kriteriet 1.4.3 Kontrast på text mot bakgrund:
Text ska ha tillräckligt hög kontrast på bakgrunden. Liten text ska uppnå minst 4.5:1 i kontrastvärde, och stor text ska uppnå minst 3.0:1.
WCAG-kriteriet 1.4.11 Kontrast på icke-textobjekt:
Det ska vara tillräcklig kontrast mellan bakgrund och komponenter, ikoner, symboler och andra grafiska informationsbärande objekt. Minsta kontrast värdet det ska uppnå är: 3.1. Samt när det gäller text så ska det uppnå 4.5 för liten text och 3.1 för stor text.
WCAG-kriteriet 1.3.2 Presentera innehållet i en meningsfull ordning:
Utforma innehållet på ett sätt som bevarar den avsedda betydelsen för alla användare, även om ordningen skulle förändras. (Nivå A)
WCAG-kriteriet 1.3.4 Innehåll kan presenteras korrekt oavsett skärmens riktning:
Skapa en design så att innehåll och funktioner är tillgängliga oavsett skärmens riktning. Då kan var och en välja det läge de föredrar. (Nivå AA)
WCAG-kriteriet 1.4.12 Se till att det går att öka avstånd mellan tecken, rader, stycken och ord:
Många användare, till exempel dyslektiker och personer med nedsatt syn, behöver kunna påverka avståndet mellan stycken, rader, ord och tecken för att lättare kunna läsa. Gör det därför möjligt för användaren att påverka avstånden utan att innehåll eller funktionalitet krockar eller gömmer sig bakom annat innehåll. (Nivå AA)
WCAG-kriteriet 1.4.10 Skapa en flexibel layout som fungerar vid förstoring eller liten skärm:
Skapa en layout som fungerar på en 320 pixlar bred skärm utan att information eller funktionalitet går förlorad, utan scrollning i mer än en riktning. (Nivå AA)
WCAG-kriteriet 1.4.1 Använd inte enbart färg för att förmedla information:
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)
Om det finns interaktiva element i tabellen:
WCAG-kriteriet 2.1.1 Tangentbordsnavigering:
Se till att det går att hantera och navigera till/från och inuti komponenten. Alla interaktiva element ska kunna nås med enbart tangentbord.
WCAG-kriteriet 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.
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 |