Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

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


Eksempler

Angivelse af telefonnummer

Måden at håndtere angivelsen af telefonnummer på bør afhænge af selvbetjeningsløsningens målgruppe.

Vejledning

  • Accepter altid internationale telefonnumre, når dette er teknisk muligt.
  • Danske numre skal kunne angives både med eller uden landekode.
  • Accepter altid enhver gængs formatering af telefonnumre såsom med eller uden mellemrum, bindestreger eller parenteser samt landekoder skrevet med enten + eller 00 (fx +45 eller 0045).
  • Hvis der kun kan angives et mobilnummer, fx hvis der skal sendes sms-beskeder til det angivne nummer, brug da “Mobilnummer” som feltets label.
  • Brug ikke num pad til telefonnummerfeltet på mobil grundet problemer med tilgængelighed (Laakso, 2020)
  • Angiv altid autocomplete attributten i input feltet, så brugerne har mulighed for automatisk udfyldning af feltet (WCAG 2.1 Success Criterion 1.3.5 Identify Input Purpose)

Når målgruppen hovedsageligt har danske telefonnumre

Eksempel på angivelse af telefonnummer
Vis HTML for eksempel på angivelse af telefonnummer 
<div class="form-group">
    <label class="form-label" for="input-phonenumber">Telefonnummer</label>

    <input type="tel" id="input-phonenumber" name="input-phonenumber"
        class="form-input input-width-s" required autocomplete="tel">
</div>

Når langt de fleste brugere forventes at have danske telefonnumre, vises et almindeligt telefonnummerfelt. Feltet skal være langt nok til, at eventuelle brugere med internationale telefonnumre kan angive disse med landekode.

Hvis et udenlandsk nummer er skrevet uden landekode, eller hvis formatet ikke svarer til et dansk nummer, vises en fejlmeddelelse.

Eksempel på angivelse af telefonnummer med udenlandsk nummer uden landekode
Fejl: Indtast et gyldigt telefonnummer
Ved udenlandske numre inkluder landekode, fx +49 123 1234 1234 eller 0044 808 157 0192
Vis HTML for eksempel på angivelse af telefonnummer med udenlandsk nummer uden landekode 
<div class="form-group form-error">
    <label class="form-label" for="input-phonenumber-no-countrycode">Telefonnummer</label>

    <span class="form-error-message" id="input-phonenumber-no-countrycode-error">
        <span class="sr-only">Fejl: </span>Indtast et gyldigt telefonnummer<br/>Ved udenlandske numre inkluder landekode, fx +49 123 1234 1234 eller 0044 808 157 0192
    </span>

    <input type="tel" id="input-phonenumber-no-countrycode"
        name="input-phonenumber-no-countrycode" class="form-input input-width-s"
        value="0123 4567 8900" aria-invalid="true"
        aria-describedby="input-phonenumber-no-countrycode-error " required
        autocomplete="tel">
</div>

Når målgruppen hovedsageligt har udenlandske telefonnumre

Eksempel på angivelse af udenlandsk telefonnummer
Ved udenlandske numre inkluder landekode
Vis HTML for eksempel på angivelse af udenlandsk telefonnummer 
<div class="form-group">
    <label class="form-label" for="input-phonenumber-foreign">Telefonnummer</label>

    <span class="form-hint" id="input-phonenumber-foreign-hint">Ved udenlandske numre inkluder
        landekode</span>

    <input type="tel" id="input-phonenumber-foreign" name="input-phonenumber-foreign"
        class="form-input input-width-s" aria-describedby="input-phonenumber-foreign-hint "
        required autocomplete="tel">
</div>

Når mange brugere forventes at have internationale telefonnumre vises en hjælpetekst.

Hvis et udenlandsk nummer skrives uden landekode, eller hvis formatet ikke svarer til et dansk nummer, vises en fejlmeddelelse.

Eksempel på angivelse af ugyldigt telefonnummer
Ved udenlandske numre inkluder landekode Fejl: Indtast et gyldigt telefonnummer, fx 12345678, +49 123 1234 1234 eller 0044 808 157 0192
Vis HTML for eksempel på angivelse af gyldigt telefonnummer 
<div class="form-group form-error">
    <label class="form-label" for="input-phonenumber-invalid">Telefonnummer</label>

    <span class="form-hint" id="input-phonenumber-invalid-hint">Ved udenlandske numre inkluder
        landekode</span>
    <span class="form-error-message" id="input-phonenumber-invalid-error">
        <span class="sr-only">Fejl: </span>Indtast et gyldigt telefonnummer, fx 12345678, +49
        123 1234 1234 eller 0044 808 157 0192
    </span>

    <input type="tel" id="input-phonenumber-invalid" name="input-phonenumber-invalid"
        class="form-input input-width-s" value="0123 4567 8900" aria-invalid="true"
        aria-describedby="input-phonenumber-invalid-hint input-phonenumber-invalid-error "
        required autocomplete="tel">
</div>

Hvis der kun kan angives danske telefonnumre (ikke anbefalet)

Accepter altid udenlandske telefonnumre, når det er muligt. Hvis det teknisk ikke kan lade sig gøre at acceptere udenlandske numre, vis da en fejlmeddelelse, når det indtastede nummer ikke har et almindeligt dansk format såsom 12345678, 12 123 123, +45 12345678 eller 0045 12 34 56 78.

Eksempel på angivelse af dansk telefonnummer
Vis HTML for eksempel på angivelse af dansk telefonnummer 
<div class="form-group">
    <label class="form-label" for="input-phonenumber-danish">Dansk telefonnummer</label>

    <input type="tel" id="input-phonenumber-danish" name="input-phonenumber-danish"
        class="form-input input-width-xs" required autocomplete="tel">
</div>
Eksempel på angivelse af dansk telefonnummer med fejlbesked
Fejl: Indtast et dansk telefonnummer, fx 12345678 eller +45 12 34 56 78
Vis HTML for eksempel på angivelse af dansk telefonnummer med fejlbesked 
<div class="form-group form-error">
    <label class="form-label" for="input-phonenumber-danish-e">Dansk telefonnummer</label>

    <span class="form-error-message" id="input-phonenumber-danish-e-error">
        <span class="sr-only">Fejl: </span>Indtast et dansk telefonnummer, fx 12345678 eller
        +45 12 34 56 78
    </span>

    <input type="tel" id="input-phonenumber-danish-e" name="input-phonenumber-danish-e"
        class="form-input input-width-xs" value="12 34 56 7" aria-invalid="true"
        aria-describedby="input-phonenumber-danish-e-error " required autocomplete="tel">
</div>

Referencer