Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Sprogvælger

En sprogvælger bruges hvis løsningen udbydes på mere end et sprog. Den giver brugeren mulighed for at vælge et andet sprog end løsningens standardsprog.

Sådan bruges komponenten

Anvendes til

Brug en sprogvælger når du gerne vil vise en løsning i flere sprog.

Placeres nederst i footeren.

Anvendes ikke til

Brug ikke sprogvælger, hvis løsningen kun findes i ét sprog.

Vejledning

Sprogvælgeren placeres altid nederst i footeren. Denne placering giver fleksibilitet og understøtter brugen af alle headertyper.

Sprogvælgeren indeholder en liste af sprog skrevet på originalsproget. Sprogvælgeren fungerer således, at det valgte sprog bliver markeret med fed tekst og står altid som det første sprog i listen.

Når brugeren vælger et andet sprog, vil det blive markeret som fed i stedet. Det valgte sprog skifter placering til at være det første sprog i listen.

Husk at skrive sproget ud på det sprog det har. Eksempelvis “English” for engelsk og “Kalaallisut” for Grønlandsk. På denne måde, kan brugerne stadig finde frem til deres foretrukne sprog, trods resten af indholdet vises i et sprog de ikke forstår.

Bemærk, at der er ekstra tekst gemt i koden som skal oversættes for hvert sprog, således at brugere, der gør brug af hjælpeteknologier (fx skærmlæser) kan forstå komponenten på det valgte sprog.

Eksempel på sprogvælger i en simpel footer

Eksempel på sprogvælger i en kompleks footer

Varianter

Sprogvælger med tooltip

Se komponenten i eksempelløsninger

Referencer

Installation

HTML Struktur

Kodeeksempel
<footer>

    <div class="language-switcher">
        <div class="container">
            <ul aria-label="Vælg sprog fra listen">
                <li><a href="?lang=da" lang="da"
                        aria-label="Valgt sprog: Dansk"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#done"></use></svg>Dansk</a>
                </li>
                <li><a href="?lang=en-GB" lang="en-GB">English</a></li>
                <li><a href="?lang=de" lang="de">Deutsch</a></li>
                <li><a href="?lang=pl" lang="pl">Polski</a></li>
            </ul>
        </div>
    </div>

</footer>

Sprogvælgeren indsættes nederst i footeren. Se eksempelløsningen “Sagsoversigt” for placering i koden.

Hvert sprog tilføjes i listen på original sproget og med den tilsvarende landekode i lang attributten.

Bemærk aria-labels i koden, hvor der vil være tekst og formuleringer der skal tilpasses for hvert sprog man kan vælge.

Sprogvælger med tooltip

Kodeeksempel
<footer>

    <div class="language-switcher">
        <div class="container">
            <ul aria-label="Vælg sprog fra listen">
                <li><a href="?lang=da" lang="da"
                        aria-label="Valgt sprog: Dansk"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#done"></use></svg>Dansk</a>
                </li>
                <li><span class="tooltip-wrapper" data-tooltip="Engelsk"
                        data-tooltip-id="language-tooltip-2" data-position="above"
                        data-trigger="hover"><a href="?lang=en-GB" lang="en-GB"
                            class="tooltip-target">English</a></span></li>
                <li><span class="tooltip-wrapper" data-tooltip="Tysk"
                        data-tooltip-id="language-tooltip-3" data-position="above"
                        data-trigger="hover"><a href="?lang=de" lang="de"
                            class="tooltip-target">Deutsch</a></span></li>
                <li><span class="tooltip-wrapper" data-tooltip="Polsk"
                        data-tooltip-id="language-tooltip-4" data-position="above"
                        data-trigger="hover"><a href="?lang=pl" lang="pl"
                            class="tooltip-target">Polski</a></span></li>
            </ul>
        </div>
    </div>

</footer>

For mere information se implementering af tooltip.