Data table

Datatabeller används för att visa större mängder data eller information. Oftast kan användaren även göra någonting med tabellinformationen, som att markera och hantera rader.

Open

1177

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Datatabeller används för att visa större mängder data eller information. Denna tabell har olika inbyggda funktioner som gör det möjligt att välja rader, se information i hierarkier, fälla ut ytterligare information och bläddra mellan flera sidor. Tabellen används oftast i administrativa gränssnitt.

Storlekar och beteende

• För tabeller med många kolumner kan wide grid användas.

• Tabeller får scroll i sidled i mobil.

Textstorlek

Normen att ha textstorlek 14 px-16 px, där vi rekommenderar 16 px men skulle det vara så att det behövs mindre text av någon anledning så får man använda 14 px. Detta är förutsatt att användaren kan förstora texten upp till 200% utan att innehåll eller funktionalitet förloras.

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.

Cellerna kan innehålla både text (body text eller länkar) och komponenter (som checkboxar, badges eller knappar).

Datatabellens celler har mycket mindre padding än informationstabellens och blir därför mer kompakt. De har heller inga linjer mellan kolumner.

Paginering

I anslutning till datatabellen finns en paginering innehåller

• Möjligheten att välja antal rader per sida

• Information om totala antalet rader

• Möjligheten att bläddra mellan sidor

Interaktiv tabell

I vissa fall kan användaren behöva interagera med datan i tabellen.

Välja en eller flera rader

Genom att lägga till en checkbox.

Expandera en rad för att visa mer information

Genom att lägga till en chevron.

Visa underliggande nivåer i en hierarki

Genom att lägga till en chevron och indentera efterföljande rader.

Lägg till element som ger mer information eller låter användaren göra något

Exempelvis länkar, knappar eller badges (status).

Responsivitet och små skärmar

För att tabeller ska fungera för mindre enheter (t ex mobil) kan man tänka på olika sätt kring uppbyggnad och visning av tabeller på mindre skärm. I designsystemet har vi inga kodade tabeller, utan enbart styling. Detta för att möjliggöra för varje team att själva bygga den tabell med den funktionalitet som krävs, och en responsiv lösning som passar informationen i tabellen bäst.

För responsiva tabeller finns även detta kodexempel (länk till codepen) att utgå från som inspiration.

Vi har exempel för tre olika alternativ. Exemplen utgår från Information table, så om du vill skapa datatabeller för mindre skärmar, fundera noga på hur det påverkar funktionalitet och översikt av data.

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.