Collapse
Så kallad "Collapse" (utfällbar information) används när man vill dölja information på en sida för att ge användaren överblick, samtidigt som det ger användaren möjlighet att kunna se mer information utan att behöva lämna sidan.
Använd inte collapse för innehåll som är kritisk för alla användare eftersom innehållet kan missas när det är dolt. I stället för att dölja innehållet testa först att:
- Förenkla och reducera innehållet
- Se om innehållet ska ligga på flera sidor
- Dela upp innehållet på samma sida men under rubriker
Det finns finns två olika typer av rubriklister. Välj komponenttyp utifrån användning (se tabellen nedan).
Välj rätt typ av komponent
Se Collapse (i KTH Style, på engelska).
| Komponenttyp | Används för |
|---|---|
| White collapse | Döljer detaljer; sekundärt innehåll för att användaren ska få överblick över det som är primärt på sidan. |
| Blue collapse | Döljer innehåll som bara är för vissa målgrupper, eller är skrymmande. Innehållet är ej sekundär information. |
Namngivning
- Rubriken ska tydligt beskriva innehållet som kan fällas ut
- Namnet kan behöva förtydligas med aria-label om det är beroende av omgivande kontext. En seende person kan se en intillliggande rubrik och förstå vad en collapse med titeln "Mer information" syftar på. För en person med synnedsättning behöver kontexten läggas i en aria-label.
- Se namngivning under Gemensamma riktlinjer för komponenter .
Innehåll
- Innehåll kan vara tabeller, bilder, diagram, brödtext och formulär
- Den rubrik som fungerar under en collapse är en H4 förutsatt att den föregås av en H3. H2 och H3 rubriker ska inte användas. Om rubrikbehov finns för ett utfällbart innehåll bör du överväga om informationen inte är för omfattande för att var dold när användaren kommer in på sidan.