Gå til sidens indhold

Komponenter

Trinindikatorer

Trinindikatorer markerer trin i guides til brugerne om, hvordan de fx skal tilgå en løsning eller som fører dem igennem en kendt sekvens af spørgsmål.

Retningslinjer

Tilgængelighed

Tringuides skal kunne aktiveres og håndteres fra tastatur og brugeren skal kunne anvende tab-tasten til navigation.

Tringuides kan have et højt kognitivt niveau. Før du vælger at anvende en tringuide, bør du teste en prototype med en alternativ løsning for at se, om det overhovedet er nødvendigt med en tringuide.

Brugervenlighed

Anvendes til

Tringuides anvendes til struktureret at føre brugeren igennem en kendt sekvens af spørgsmål.

Anvendes ikke til

Tringuides skal ikke anvendes som primær eller sekundær navigationselement.

Vejledning

  • Forsøg med ændret opsætning af dit indhold, type og antallet af spørgsmål før du vælger en tringuide til din løsning.
  • Vælg den tringuide-model, der passer til dine brugeres behov.
  • Undgå at lave en horisontal tringuide.
  • Anvend trin der virker naturlige og logiske for brugerne
  • Gør det synligt hvilket trin brugeren er kommet til.
  • Giv hvert trin et nummer
  • Det sidste trin bør være "kvittering"
  • Tilstræb så få trin som muligt
  • For en klikbar trinindikator bruges .sidenav-list klassen på ul elementet.
  • For en tvunget trinindikator bruges .sidenav-list-locked klassen på ul elementet.

Aktivt og overstået trin i trinindikator

  • Teksten i det aktive menupunkt bliver styret af primærfarven, som sættes med variablen $color-primary
  • Det aktive menupunkt skal have klassen .active.
  • For at indikere et overstået trin, kan der indsættes et ikon med klassen .sidenav-icon. Dette ikon er sat til højre i trinet.

Tilføj information i tringuide

  • For at tilføje information til et trin bruges klassen .sidenav-information.

Trinindikatoren kan indlejres i en dropdown. Der er her to valgmuligheder:

  • På alle skærmstørrelser er trinindikatoren indlejret i dropdownen. Dette kræver blot at trinindikatoren er placeret inde i .overflow-menu-inner containeren. Dette er vist i eksemplet "Trinindikator i overflow-menu".
  • Hvis man ønsker at få vist trinindikatoren på større skærme, men at den bliver vist i en dropdown på mindre skærme, skal .overflow-menu have klassen .overflow-menu--md-no-responsive. Dette er vist i eksemplet "Trinindikator - responsivt i overflow-menu".

Trinindikator i overflow-menu

<div class="container pt-5">
    <div class="row">
        <div class="col-12 col-lg-3 sidebar-col">

            <div class="overflow-menu  overflow-menu--open-right ">
                <button class="button-overflow-menu js-dropdown "
                    data-js-target="#overflow5" aria-haspopup="true"
                    aria-expanded="false">
                    Trin 3 af 5
                    <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#menu-down"></use></svg>
                    <span class="sr-only">Åbner overflow menu</span>
                </button>
                <div class="overflow-menu-inner" id="overflow5"
                    aria-hidden="true">

                    <ul class='sidenav-list'>
                        <li>
                            <a href='#'>
                                1. Trin 1
                                <span class='sidenav-icon'>
                                    <svg class='icon-svg' aria-hidden='true' focusable='false' tabindex='-1'><use xlink:href='#check'></use></svg>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href='#'>
                                2. Trin 2
                                <span class='sidenav-icon'>
                                    <svg class='icon-svg' aria-hidden='true' focusable='false' tabindex='-1'><use xlink:href='#check'></use></svg>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href='#' class='active'>
                                3. Trin 3 (valgt)
                            </a>
                        </li>
                        <li>
                            <a href='#'>
                                4. Trin 4
                            </a>
                        </li>
                        <li>
                            <a href='#'>
                                5. Trin 5
                            </a>
                        </li>
                    </ul>

                </div>
            </div>

        </div>
    </div>
</div>

Trinindikator - responsivt i overflow-menu

Du skal gøre browservinduet mindre for at se ændringen.

<div class="container pt-5">
    <div class="row">
        <div class="col-12 col-lg-3 sidebar-col">
            <div
                class="overflow-menu  overflow-menu--open-right overflow-menu--md-no-responsive">
                <button class="button-overflow-menu js-dropdown "
                    data-js-target="#overflow4" aria-haspopup="true"
                    aria-expanded="false">
                    Trin 3 af 5
                    <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#menu-down"></use></svg>
                    <span class="sr-only">Åbner overflow menu</span>
                </button>
                <div class="overflow-menu-inner" id="overflow4"
                    aria-hidden="true">
                    <ul class="sidenav-list">
                        <li>
                            <a href="#">
                                1. Trin 1
                                <span class="sidenav-icon">
                                    <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#check"></use></svg>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                2. Trin 2
                                <span class="sidenav-icon">
                                    <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#check"></use></svg>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="active">
                                3. Trin 3 (valgt)
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                4. Trin 4
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                5. Trin 5
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Responsiv tringuide gør brug af dkfds.js til at håndtere ændring af aria-hidden, således at værdien ændrer sig alt efter om knappen er synlig eller ej.

Dette sikrer at aria-hidden har den rette værdi så skærmlæsere kan læse teksten baseret på om guiden er synlig eller ej.

Erstat overflow-menu--md-no-responsive med klassen overflow-menu--lg-no-responsive for at ændre, hvornår det responsive breakpoint skal være.

Klikbar trinindikator

<div class="container pt-5">
    <div class="row">
        <div class="col-12 col-lg-3 sidebar-col">

            <ul class="sidenav-list">

                <li>
                    <a href="">
                        1. Trin 1

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li>
                    <a href="">
                        2. Trin 2

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li>
                    <a href="" class="active">
                        3. Trin 3 (valgt)

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li>
                    <a href="">
                        4. Trin 4

                    </a>
                </li>

                <li>
                    <a href="">
                        5. Trin 5

                    </a>
                </li>

            </ul>

        </div>
    </div>
</div>

Låst trinindikator

<div class="container pt-5">
    <div class="row">
        <div class="col-12 col-lg-3 sidebar-col">

            <ul class="sidenav-list-locked">

                <li class="disabled">
                    <a disabled tab-index="-1" aria-disabled="true">
                        1. Trin 1

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li class="disabled">
                    <a disabled tab-index="-1" aria-disabled="true">
                        2. Trin 2

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li class="disabled">
                    <a class="active" disabled tab-index="-1"
                        aria-disabled="true">
                        3. Trin 3 (valgt)

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li class="disabled">
                    <a disabled tab-index="-1" aria-disabled="true">
                        4. Trin 4

                    </a>
                </li>

                <li class="disabled">
                    <a disabled tab-index="-1" aria-disabled="true">
                        5. Trin 5

                    </a>
                </li>

            </ul>

        </div>
    </div>
</div>

Trinindikator med information

Du skal gøre browservinduet mindre for at se ændringen.

<div class="container">
    <div class="row">
        <div class="col-12 col-lg-3 sidebar-col">

            <ul class="sidenav-list">

                <li>
                    <a href="">
                        <div class="d-inline-block">
                            1. Trin 1

                            <p class="sidenav-information">
                                Informationstekst for trin 1</p>

                        </div>

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li>
                    <a href="">
                        <div class="d-inline-block">
                            2. Trin 2

                            <p class="sidenav-information">
                                Informationstekst for trin 2</p>

                        </div>

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li>
                    <a href="" class="active">
                        <div class="d-inline-block">
                            3. Trin 3 (valgt)

                            <p class="sidenav-information">
                                Informationstekst for trin 3</p>

                        </div>

                        <span class="sidenav-icon">
                            <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#check"></use></svg>
                        </span>

                    </a>
                </li>

                <li>
                    <a href="">
                        <div class="d-inline-block">
                            4. Trin 4

                            <p class="sidenav-information">
                                Informationstekst for trin 4</p>

                        </div>

                    </a>
                </li>

                <li>
                    <a href="">
                        <div class="d-inline-block">
                            5. Trin 5

                            <p class="sidenav-information">
                                Informationstekst for trin 5</p>

                        </div>

                    </a>
                </li>

            </ul>

        </div>
    </div>
</div>