Expanderbar yta

Expanderbar yta (Accordion) används för att dölja information för att göra ett innehåll mer överskådligt för användaren. En expanderbar yta kan till exempel dölja text, flervalsalternativ eller ett formulär. I en presentation av en FAQ ska en expanderbar yta som är specifikt designad för detta användas.

Visuella exempel

Expanderbar yta

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Expanderbar yta (FAQ)

Frågor och svar rubrik

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Riktlinjer

  • Expanderbar yta har en titel med text som beskriver vad användaren kan förvänta sig för innehåll när ytan fälls ut.
  • Det finns en ikon längst till höger i titelytan med en pil nedåt (i ihopfällt läge) och en pil uppåt (i utfällt läge).
  • Hela titelytan ska vara klickbar.
  • En expanderbar yta som är utfälld är alltid utfälld tills användaren aktivt väljer att stänga den.

Bra att tänka på

  • En expanderbar yta ska inte användas endast för att korta ned längden på en sida med mycket innehåll.
  • En tumregel är att använda expanderbar yta för att dölja sådan typ av information som inte är central för alla användare, utan primärt för en mindre andel av målgruppen.
  • Undvik att använda för många expanderbara ytor i följd utan mellanliggande text(detta gäller inte när man använder en expanderbar yta specifikt designad för FAQ).
  • Om du använder en expanderbar yta i en fullbredds-applikation, tänk då på att den inte ska ta upp hela ytan i bredd.

Tillgänglig komponent

  • Användaren ska kunna tabba till varje expanderbar yta.
  • En expanderbar yta öppnas och stängs med tangenterna Enter samt med Space.
  • När en expanderbar yta är öppen tabbar användaren in i innehållet under sagda expanderbara yta.
  • När en expanderbar yta är stängd tabbar användaren förbi direkt till nästa synliga interaktiva komponent.
  • Använd attributet aria-expanded för att visa att komponenten är öppen respektive stängd.


Expanderbar yta – fördjupade riktlinjer (W3C WAI-ARIA)