Profil
Opret din profil
Alle felter er påkrævede.
CSS viser allerede de vedvarende fejl, når browseren matcher et felt med :user-invalid. Nu skal den samme timing eksponeres programmatisk.
aria-errormessage="email-error" til e-mailfeltet.aria-errormessage="password-error" til adgangskodefeltet. Bevar aria-describedby="password-instruction" som den separate, permanente instruktion.syncAriaInvalid(field):
:user-invalid, sættes field.ariaInvalid = "true";aria-invalid helt.invalid skal det aktuelle felt markeres programmatisk ugyldigt. Eventet kræver capture-fasen.focusout synkroniseres det felt, brugeren har forladt.input må en eksisterende fejl fjernes, så snart feltet ikke længere matcher :user-invalid. Opret ikke nye fejl, mens brugeren skriver.invalid, describedby og errormessage, mens du interagerer med formularen.aria-errormessage beskriver intentionen bedre end at blande fejl og instruktioner i samme aria-describedby. Understøttelsen i kombinationer af browser og skærmlæser er dog fortsat mindre robust. Test derfor relationen i Chrome Accessibility og om muligt med en skærmlæser. Som sammenligning kan du midlertidigt føje fejl-id’et til aria-describedby og lytte efter forskellen.
<main>
<section class="signup" aria-labelledby="signup-title">
<p class="eyebrow">Profil</p>
<h1 id="signup-title">Opret din profil</h1>
<p>Alle felter er påkrævede.</p>
<form aria-labelledby="signup-title">
<div class="form-group">
<label for="email">E-mail</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
>
<p class="error-message" id="email-error">Skriv en gyldig e-mailadresse.</p>
</div>
<div class="form-group">
<label for="password">Adgangskode</label>
<p id="password-instruction">Brug mindst otte tegn.</p>
<input
id="password"
name="password"
type="password"
autocomplete="new-password"
minlength="8"
aria-describedby="password-instruction"
required
>
<p class="error-message" id="password-error">Adgangskoden skal bestå af mindst otte tegn.</p>
</div>
<button>Opret profil</button>
<p class="status" role="status"></p>
</form>
</section>
</main>
const form = document.querySelector("form")
const status = document.querySelector(".status")
function isField(element) {
return element.matches("input, textarea, select")
}
function syncAriaInvalid(field) {
// 1. Matcher feltet :user-invalid?
// 2. Sæt aria-invalid til "true", eller fjern attributten.
}
form.addEventListener("invalid", event => {
// Native validation udløser invalid ved et mislykket submit.
}, true)
form.addEventListener("focusout", event => {
// Synkronisér feltet, når brugeren forlader det.
})
form.addEventListener("input", event => {
// Ryd kun en allerede vist fejl, når feltet bliver gyldigt.
})
form.addEventListener("submit", event => {
event.preventDefault()
status.textContent = "Formularen er gyldig."
})
Syntaks
<input
aria-describedby="password-instruction"
aria-errormessage="password-error"
>