Faktarutor

Faktarutor kan användas för att presentera viktiga grundfakta i en egen ruta i flera sammanhang, beroende på vilken typ av information som presenteras och hur den är organiserad

Acceptanskriterier för faktarutor

Faktarutan har en rubrik

Faktarutans rubrik är unik och beskrivande
Faktarutan har ett utseende som urskiljer sig från innehållet
Länkar har tillräcklig kontrast mot bakgrundsfärgen
Besökta länkar ar tillräcklig kontrast mot bakgrundsfärgen

Att använda faktarutor kan hjälpa till att bryta upp en längre text i mindre och mer lättförståeliga delar, vilket kan göra sidan mer lättläst och överskådlig.

Faktarutor kan också användas för att lyfta fram viktig information på ett visuellt tilltalande sätt. Den kan även användas för att sammanfatta viktig information eller definitioner som är relevanta för den aktuella sidan, till exempel förklaringar av olika termer eller förkortningar.

CSS-kod för fakta ruta

(Uppdatera namn på class)


.vrd-page-faqbox-color {
    background-color: #efede9;
    border-color: #efede9;{
    color: #000;
    padding: 0.3rem 1.5rem 1.7rem 1.5rem;
    margin-top: 2em;    
    margin-bottom: 2rem;
    outline: 1px solid rgba(151, 151, 151, 0.3);
    outline-offset: -1px;
}
<

Använd med varsamhet

Det är viktigt att notera att faktarutor bör användas med måtta och bara när det verkligen är nödvändigt att bryta upp en längre text eller för att presentera relevant information på ett effektivt sätt. För att säkerställa tillgängligheten bör faktarutor också vara tillgängliga för personer med funktionsnedsättningar, till exempel genom att inkludera en lättläst version av faktarutan om innehållet är avancerat.

Tillgänglighet

Faktarutor på en tillgänglig webbplats bör visuellt skilja sig från annat innehåll på sidan på ett tydligt sätt, så att användarna enkelt kan identifiera och förstå att det är en faktaruta. Använd en tydlig och beskrivande rubrik för faktarutan, så att användarna lätt kan identifiera vad som presenteras.

Tänk på att länkar i faktarutor med annan bakgrundsfärg kan bli svårläsa om kontrasten är låg. Kontrollera därför länken både vid länkning, när pekaren är över länken och på besökta länkar.

Placering

Placera faktarutan på ett ställe där den inte kommer i konflikt med annat innehåll på sidan. Försök att placera faktarutan på samma plats på olika sidor för att uppnå en enhetlig upplevelse för användaren.

Mått och storlekar

Margin: 32px

Padding: 24px

Font: Brödtext, 16px Aktiv Grotesk

Rubrik: Den första rubriken ska vara "Rubrik 2", den har samma storlek som en H4 i övriga texten. Det går även att lägga till fler rubriknivåer efter den.