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.


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

Vis HTML for eksempel på angivelse af telefonnummer
<div class="form-group">

    <label class="form-label" for="input-phonenumber">
        Telefonnummer
    </label>

    <input class="form-input input-width-s" id="input-phonenumber"
        name="input-phonenumber" type="tel" 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.

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

Når målgruppen hovedsageligt har udenlandske telefonnumre

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 class="form-input input-width-s" id="input-phonenumber-foreign"
        name="input-phonenumber" type="tel"
        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.

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 class="form-input input-width-s"
        id="input-phonenumber-invalid" value="0123 4567 8900"
        name="input-phonenumber" type="tel" 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.

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

Referencer