Utfällbara stycken

Utfällbara stycken, det vill säga accordion, finns två varianter. En som främst används för att dölja respektive visa text och en som används för att dölja respektive visa innehåll i formulär.

Design och språk

När du ska använda ett utfällbart stycke

  • Utfällbara stycken för text 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 för alla eller vissa grupper av användare.
  • Utfällbara stycken för formulär används främst i e-tjänster och interna system.

När du inte ska använda utfällbara stycken

Använd inte utfällbara stycken för att navigera i ett flöde med flera steg, till exempel i en ansökan.

Skriv en tydlig rubrik

Rubriken ska vara tydlig så att användaren förstår vilken information som finns i det utfällbara stycket. Det är extra viktigt på webbplatser när en användare kan ha använt sökfunktionen och den sökta informationen finns i ett ihopfällt stycke.

Tillgänglighet

För att göra utfällbara stycken tillgängliga ska

  • det första elementet ha en aria-label så att skärmläsaren förstår att det finns en eller flera utfällbara stycken.
  • varje button-element ha ett unikt id och en aria-controls som ska vara samma som id för innehållet i div-taggen som hör till respektive utfällbart stycke
  • varje button-element ha ett aria-expanded attribut för att berätta för skärmläsaren om innehållet är utfällt eller inte
  • innehållet i div-taggen ha ett aria-hidden attribut som berättar för skärmläsaren när innehållet är synligt så den vet om texten ska läsas upp eller inte.

Komponent och kod

Komponenten finns i storlekarna large och medium. Du kan använda storleken medium när utrymmet på skärmen är begränsat.


Parametrar på utfällbart stycke

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

accordionId

accordion-id

Id för accordion titlen, om inget anges autogenereras ett id.

string

-

componentSize

component-size

Storlek på det utfällbara stycket, möjliga alternativ är 'large' eller 'medium'.

string

'large'

expanded

expanded

Ska det utfällbara stycket vara utfällt?

boolean

false

heading

heading

Titeln på det utfällbara stycket.

string

-

headingLevel

heading-level

Rubriknivå på titeln.

number

3

Event på utfällbart stycke

Event

Beskrivning

Type

expandedChange

Change event som triggas när expanded attributet ändras.

CustomEvent<boolean>

Large

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

<div aria-label="accordion Control Group links" class="c-accordion-group">
  <jv-accordion heading="Använda Styleguiden" heading-level="4" expanded="true">
    <p>
      Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
      tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
      mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
    </p>
  </jv-accordion>
  <jv-accordion heading="Tillgänglighetskraven" heading-level="4">
    <p>
      Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
      att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
      tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
      information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
      påpeka brister i tillgängligheten.
    </p>
  </jv-accordion>
</div>

Medium

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

<div aria-label="accordion Control Group links" class="c-accordion-group">
  <jv-accordion heading="Använda Styleguiden" heading-level="4" component-size="medium">
    <p>
      Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
      tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
      mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
    </p>
  </jv-accordion>
  <jv-accordion heading="Tillgänglighetskraven" heading-level="4" component-size="medium">
    <p>
      Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
      att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
      tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
      information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
      påpeka brister i tillgängligheten.
    </p>
  </jv-accordion>
</div>

Large för formulär

<form>
  <div aria-label="accordion Control Group links" class="c-accordion-group">
    <jv-accordion heading="Stycke ett" heading-level="4">
      <div>
        <div class="c-space--m"></div>
        <div class="c-input--large">
          <label for="input-accordion-form1">Förnamn</label>
          <div class="input__wrapper">
            <input autocomplete="given-name" id="input-accordion-form1" type="text" tabindex="0" aria-hidden="false">
            <div class="icon"></div>
          </div>
        </div>

        <div class="c-multiselect--large" rel="c-multiselect-js">
          <label for="multselect-accordion-form1" class="c-multiselect__label">
            Vilka länder har din hund besökt de senaste året ?
          </label>
          <select id="multselect-accordion-form1" name="select1[]" multiple="multiple">
            <option value="Norge" selected="selected">Norge</option>
            <option value="Danmark">Danmark</option>
            <option value="Finland">Finland</option>
            <option value="Tyskland">Tyskland</option>
            <option value="Frankrike">Frankrike</option>
            <option value="Vuxen">Ryssland</option>
            <option value="Irland">Irland</option>
            <option value="Portugal">Portugal</option>
            <option value="Island">Island</option>
          </select>
        </div>
      </div>
    </jv-accordion>

    <jv-accordion heading="Stycke två" heading-level="4">
      <div>
        <div class="c-space--m"></div>
        <div class="c-select--large">
          <label for="select-accordion-form-2">Välj din favoritfrukt</label>
          <div class="c-select__wrapper">
            <select id="select-accordion-form-2" tabindex="0" aria-hidden="false">
              <option></option>
              <option selected="true">Ananas</option>
              <option>Apelsin</option>
              <option>Banan</option>
              <option>Blodapelsin</option>
              <option>Clementin</option>
              <option>Dadel</option>
              <option>Kiwifrukt</option>
              <option>Päron</option>
              <option>Äpple</option>
            </select>
            <span class="sjv-i-caret-ner ikon"> </span>
          </div>
        </div>
      </div>
    </jv-accordion>
  </div>
</form>

Medium för formulär

<form>
  <div aria-label="accordion Control Group links" class="c-accordion-group">
    <jv-accordion heading="Stycke ett" component-size="medium" heading-level="4">
      <div>
        <div class="c-space--m"></div>
        <div class="c-input--medium">
          <label for="input-accordion-form-medium1">Förnamn</label>
          <div class="input__wrapper">
            <input autocomplete="given-name" id="input-accordion-form-medium1" type="text" tabindex="0" aria-hidden="false">
            <div class="icon"></div>
          </div>
        </div>

        <div class="c-multiselect--medium" rel="c-multiselect-js">
          <label for="multselect-accordion-form-medium1" class="c-multiselect__label">
            Vilka länder har din hund besökt de senaste året ?
          </label>
          <select id="multselect-accordion-form-medium1" name="select1[]" multiple="multiple">
            <option value="Norge" selected="selected">Norge</option>
            <option value="Danmark">Danmark</option>
            <option value="Finland">Finland</option>
            <option value="Tyskland">Tyskland</option>
            <option value="Frankrike">Frankrike</option>
            <option value="Vuxen">Ryssland</option>
            <option value="Irland">Irland</option>
            <option value="Portugal">Portugal</option>
            <option value="Island">Island</option>
          </select>
        </div>
      </div>
    </jv-accordion>

    <jv-accordion heading="Stycke två" heading-level="4" component-size="medium">
      <div>
        <div class="c-space--m"></div>
        <div class="c-select--medium">
          <label for="select-accordion-form-medium-2">Välj din favoritfrukt</label>
          <div class="c-select__wrapper">
            <select id="select-accordion-form-medium-2" tabindex="0" aria-hidden="false">
              <option></option>
              <option selected="true">Ananas</option>
              <option>Apelsin</option>
              <option>Banan</option>
              <option>Blodapelsin</option>
              <option>Clementin</option>
              <option>Dadel</option>
              <option>Kiwifrukt</option>
              <option>Päron</option>
              <option>Äpple</option>
            </select>
            <span class="sjv-i-caret-ner ikon"> </span>
          </div>
        </div>
        <button class="c-btn--medium">Skicka in</button>
      </div>
    </jv-accordion>
  </div>
</form>

Äldre version av utfällbart stycke

Senast publicerad 2021-05-20

Sidansvarig för sidan är Styleguide