Information table

Tabeller används för att visa information eller data strukturerat i rader och kolumner.

Open

1177

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Informationstabeller används för att visa en begränsad mängd information för att ge en översikt av flera värden. Ofta används denna typ av tabell som komplement till annan text eller information.

Storlekar och beteende

• 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 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.

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:

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.