Faneblade (Tabs)

Sådan bruges komponenten

Anvendes til

Faneblade anvendes til at skifte mellem forskellige visninger af indhold inden for samme kontekst.

Faneblade egner sig bedst som en avanceret funktionalitet for afgrænsede målgrupper.

Anvendes ikke til

Faneblade kan ikke erstatte individuelle sider i en selvbetjeningsløsning eller hjemmeside.

Faneblade anvendes ikke til at opdele et logisk flow eller en sekvens af handlinger.

Vejledning

Faneblade anvendes i afgrænsede sektioner. Indholdet vises indrammet, så brugeren ikke er i tvivl om, hvor det starter og slutter. Det er muligt at anvende flere fanebladskomponenter på en side.

Overvej om faneblade er den rette løsning. Vær opmærksom på, at brugeren kun kan se indholdet fra én fane ad gangen. Alternativer til faneblade kan være accordions eller detaljekomponenten, hvis du ønsker at indhold først bliver synligt, når brugeren aktivt vælger det.

Faneblade kan ikke være i “disabled” tilstand. Alle faner er synlige og aktive.

Opdeling af indholdet på flere sider kan også være et alternativ. Faneblade bør kun anvendes, hvis indholdet i de forskellige faneblade deler overordnet kontekst.

Hvis du ønsker at anvende faner, bør det testes på din målgruppe, før din løsning går i produktion.

Faneblade do's and don'ts

Sådan (do)

Sådan: Brug kun faneblade til kort, koncist, ordknapt indhold som lister, data og andre typer af oversigter (Gube, 2009). Kategorierne, som fanebladene repræsenterer, skal have en stærk parallelitet og have et ensartet abstraktionsniveau (Nielsen, 2016) – altså forskellige aspekter af samme emne.

Ikke sådan (don't)

Ikke sådan: Undgå at bruge faneblade til at navigere mellem trin i en løsning. Faneblade er til parallelt, ikke sekventielt indhold (Nielsen, 2016).

Sådan (do)

Sådan: Der er altid et faneblad aktivt.

Ikke sådan (don't)

Ikke sådan: Man kan ikke lukke et faneblad.

Varianter

Faneblade til navigation

Fanebladskomponenten kan anvendes til navigation mellem flere undersider. Hver fane vil kunne afspejles i sidens URL, og det skal være muligt at linke direkte til, og åbne, et faneblad. Ved denne brug skal sidens indhold fra fanebladskomponenten og ned til footeren være knyttet til det åbne faneblad.

Vær særligt opmærksom på følgende:

• Der må kun anvendes én fanebladskomponent af denne type per side.
• Faneblade skal ikke anvendes i stedet for en undermenu. Indholdet i fanebladene skal stadig være relateret til hinanden.
• Faneblade til navigation skal placeres i toppen af siden umiddelbart efter overskriften og evt. manchet.
• Det anbefales at tilføje kode til komponenten, som gør, at siden ikke hopper til toppen ved tryk på en ny fane. Designsystemets komponentsider kan anvendes som inspiration.

Faneblade med ikoner

Faneblade kan vises med ikoner, hvis disse understøtter de angivne sektioner visuelt. Vi anbefaler at være forsigtig med denne løsning, da et ikon der læses forkert eller misforståes kan forvirre brugeren mere end det hjælper. Så benyt kun ikoner hvis de er klare i budskabet og hjælper med at kommunikere det underliggende indhold. Ikoner skal altid understøttes af en label med fanebladets navn.

Faneblade med ikoner do's and don'ts

Sådan (do)

Sådan: Hvis løsningen anvender ikoner på fanebladene, skal alle faneblade have tilknyttet et ikon.

Ikke sådan (don't)

Ikke sådan: Bland ikke faneblade med og uden ikoner.

Sådan (do)

Sådan: Hvis løsningen anvender ikoner, skal alle faneblade have både ikoner og tekst.

Ikke sådan (don't)

Ikke sådan: Faneblade må ikke anvende ikoner uden tekst.

Referencer

• Jacob Gube: Module Tabs in Web Design: Best Practices and Solutions (2009)
• Jakob Nielsen: Tabs, Used Right (2016)

Installation

HTML Struktur

<div class="tab-container">
    <div class="tab-list" role="tablist"><button class="tab-button" role="tab"
            aria-controls="tabpanel1" aria-selected="true" id="tab1"><span>Faneblad 1</span>
        </button><button class="tab-button" role="tab" aria-controls="tabpanel2"
            aria-selected="false" id="tab2"><span>Faneblad 2</span>
        </button><button class="tab-button" role="tab" aria-controls="tabpanel3"
            aria-selected="false" id="tab3"><span>Faneblad 3</span>
        </button></div>
    <div class="tab-panel" role="tabpanel" tabindex="0" id="tabpanel1" aria-labelledby="tab1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper,
            enim eu fringilla varius, massa lectus molestie lacus, sed malesuada justo magna
            sit amet eros. Nam accumsan dignissim dignissim. In hac habitasse platea dictumst.
            Cras feugiat maximus turpis, id ullamcorper purus congue ut.</p>
    </div>
    <div class="tab-panel" role="tabpanel" tabindex="0" id="tabpanel2" aria-labelledby="tab2"
        hidden>
        <p>Praesent consequat erat nec felis semper dignissim. Duis mattis massa in hendrerit
            varius. Sed commodo at augue sit amet auctor. Maecenas ligula massa, rutrum quis
            porttitor id, semper ut libero. Nam quis felis porta lorem consequat eleifend a
            rutrum ante.</p>
    </div>
    <div class="tab-panel" role="tabpanel" tabindex="0" id="tabpanel3" aria-labelledby="tab3"
        hidden>
        <p>Phasellus sodales lectus mi, vel pellentesque massa semper non. Sed iaculis sed
            nisl id dapibus. Aenean vitae tristique purus. Sed faucibus sit amet eros vitae
            commodo. Integer bibendum, justo nec scelerisque malesuada, nunc risus ultricies
            diam, euismod dignissim orci eros eget neque.</p>
    </div>
</div>

Tilgængelighed

Husk at bruge rollerne tablist, tab og tabpanel for henholdsvis fanebladsbeholder, faneblad og fanebladindhold. Benyt aria-selected-attributten til at angive, hvilket faneblad er aktivt og hidden til de paneler, som skal være skjult.

JavaScript

Fanebladskomponenten kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller manuelt initialisere komponenten således:

new DKFDS.Tabs(document.getElementById('TAB-ID')).init();

Events

Når man vælger et nyt faneblad, bliver eventet fds.tab.changed udløst på .tab-container elementet, som man kan koble sig på med en eventlistener.

Når et faneblad vælges, bliver eventet fds.tab.selected udløst på det tilhørende .tab-button faneblad, som man kan koble sig på med en eventlistener.

Når et faneblad ikke længere er valgt, bliver eventet fds.tab.hidden udløst på det tilhørende .tab-button faneblad, som man kan koble sig på med en eventlistener.

Faneblade til navigation

<nav class="tab-container" aria-label="Eksemplets undersider">
    <ul class="tab-list">
        <li>
            <a href="#indhold1" class="tab-button" aria-current="true"><span>Faneblad
                    1</span></a>
        </li>
        <li>
            <a href="#indhold2" class="tab-button"><span>Faneblad 2</span></a>
        </li>
        <li>
            <a href="#indhold3" class="tab-button"><span>Faneblad 3</span></a>
        </li>
    </ul>
</nav>

Ved faneblade til navigation angives det aktive faneblad med aria-current="true", alternativt aria-current="page" hvis siderne har forskellige URL’er. Her skal man sikre sig at kun ét faneblad har denne attribut sat.

Bemærk, at der ikke medfølger JavaScript til faneblade til navigation. Hvis man ønsker, at fanebladene forbliver samme sted på siden, når der vælges et faneblad, skal man selv stå for denne funktionalitet. Fanebladene på designsystem.dk er lavet med hashchange events.

Faneblade med ikoner

<div class="tab-container">
    <div class="tab-list" role="tablist"><button class="tab-button" role="tab"
            aria-controls="tabpanel-icon-1" aria-selected="true"
            id="tab-icon1"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#file-image"></use></svg><span>Billede</span>
        </button><button class="tab-button" role="tab" aria-controls="tabpanel-icon-2"
            aria-selected="false"
            id="tab-icon2"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#insert-drive-file"></use></svg><span>Dokument</span>
        </button></div>
    <div class="tab-panel" role="tabpanel" tabindex="0" id="tabpanel-icon-1"
        aria-labelledby="tab-icon1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper,
            enim eu fringilla varius, massa lectus molestie lacus, sed malesuada justo magna
            sit amet eros. Nam accumsan dignissim dignissim. In hac habitasse platea dictumst.
            Cras feugiat maximus turpis, id ullamcorper purus congue ut.</p>
    </div>
    <div class="tab-panel" role="tabpanel" tabindex="0" id="tabpanel-icon-2"
        aria-labelledby="tab-icon2" hidden>
        <p>Praesent consequat erat nec felis semper dignissim. Duis mattis massa in hendrerit
            varius. Sed commodo at augue sit amet auctor. Maecenas ligula massa, rutrum quis
            porttitor id, semper ut libero. Nam quis felis porta lorem consequat eleifend a
            rutrum ante.</p>
    </div>
</div>