Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
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 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.
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
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.
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.
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>
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>