Gå till slutet av bannern
Gå till början av bannern

Table

Hoppa till slutet på meta-data
Gå till början av metadata

Du visar en gammal version av den här sidan. Visa nuvarande version.

Jämför med nuvarande Visa sidhistorik

« Föregående Version 13 Nästa »

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

 

 

Tabell för varumärket 1177, rosa table header, vita celler och röda skiljelinjer.

Tabell för varumärket Inera, beige table header, vita celler och bruna skiljelinjer.

 

Innehållsförteckning

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.

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.

Tabellkomponenter för 1177 som uppifrån och ned visar table header med sortering, table header utan sortering och table cell.

Tabellkomponenter för Inera som uppifrån och ned visar table header med sortering, table header utan sortering och table cell.

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

  • Inga etiketter