Logotyp vetenskapsrådet
logo_mobile

Utfällbara stycken

Utfällbara stycken, eller accordions, visar och döljer innehåll genom att expandera och komprimera vertikalt. Funktionen är ett vanligt designelement på webbsidor som möjliggör visning av mer information utan att ta upp för mycket plats på sidan.

  • Används främst på webbplatser och där du vill dölja viss information för att på så sätt få en mer överskådlig layout. Utfällbara stycken kan också användas för att dölja avsnitt i texter som är av sekundärt intresse.
  • Om fler än en variant, nämn det och vad som skiljer dom åt
  • Används främst på webbplatser och där du vill dölja viss information för att på så sätt få en mer överskådlig layout. Du kan också använda utfällbara stycken för att dölja avsnitt i texter som är av sekundärt intresse
  • Använd inte (ex: som navigation i ett flöde med flera steg)
  • Tillgänglighet (tillhörande komponenter): märk upp aria-label osv…
  • När utfällbara stycken främst används för frågor och svar ska de kodas så att de uppfattas som detta av sökmotorer (exempelvis med FAQ schema markup).
  • Rubrik och innehåll i utfällbara stycken ska vara sökbara i både internt och externt sök.
  • Förslag: lägg plustecknet före text.

Utfällbara stycken, även kända som accordions, ger användaren möjlighet att se mer information utan att gå till en ny sida. De är vanligt förekommande på webbsidor och används ofta för att visa innehåll som inte behöver vara synligt direkt när sidan laddas.

När man använder utfällbara stycken är det viktigt att tänka på att de inte ska göra sidan rörig eller svårnavigerad för användaren. Därför är det viktigt att välja vad som ska visas i det utökade stycket noggrant och att se till att det inte skapar för mycket innehåll på sidan.

Vidare är det viktigt att tänka på tillgängligheten för att säkerställa att alla användare, inklusive personer med funktionsvariationer, kan ta del av informationen på lika villkor.

Hur ska det användas?

  • När det finns mycket innehåll som kan delas upp i kategorier eller grupper.
  • När användaren behöver interagera med innehållet för att ta beslut eller för att få mer information.
  • När man vill minska mängden information som visas på en sida för att minska visuell trötthet.

När ska det inte användas?

  • När det är viktigt att allt innehåll är synligt och tillgängligt för användaren.
  • När det inte finns något behov av att organisera innehåll i grupper.
  • När det inte fungerar bra på mobila enheter eller mindre skärmar.

Utformning av utfällbara stycken

Om webbplatsen ska följa Vetenskapsrådets grafiska profil ska utformningen vara som nedan med en plussikon som ikon för att förklara att stycket kan fällas ut.

Är webbplatsen särprofilerad ska ändå den grafiska utformningen vara så att det tydligt framgår att ytan kan fällas ut. Det ska inte likna andra element som har andra funktioner.


Viktigt kring tillgänglighet



Koden visar ett exempel på hur en tillgänglig implementering kan göras.


<div class="vrd-collapsible-content">
   <h2 class="subheading">
     <button  class="env-collapse-header" data-target="#ID-10" data-env-collapse="" aria-controls="ID-10" aria-expanded="false>
        Fällut dold information
      </button>
	</h2>
	<div class="vrd-collapse vrd-collapse-hide" id="ID-10">
      <div class="vrd-text-content">
         <p class=" normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
      <div>
   </div>
</div>