Inhoudsopgave

Definition of Done
Community implementaties
Missing Heading
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Over deze richtlijnen

Zet de foutmeldingen bij de betreffende formuliervelden

Voor foutmeldingen geldt hetzelfde als voor descriptions: de beste locatie is boven het formulierveld. Bovendien moet de foutmelding aria-describedby gekoppeld zijn aan het formulierveld.

Hoe dit te doen is beschreven bij de richtlijn Plaats descriptions tussen label en formulierveld.

Doen

Plaats alle descriptions, ook de foutmeldingen, op een consistente plek, liefst tussen het label en het formulierveld.

() => createVNode(Fragment, { children: [createVNode("p", { children: createVNode("label", { htmlFor: "wachtwoord2", children: "Nieuw wachtwoord" }) }), createVNode("p", { id: "description-wachtwoord2", children: "Kies een wachtwoord van minimaal 8 karakters lang." }), createVNode("p", { id: "error-wachtwoord2", children: "Invoerfout: Je gekozen wachtwoord is te kort." }), createVNode("p", { children: createVNode("input", { id: "wachtwoord2", type: "password", name: "nieuw-wachtwoord", "aria-describedby": "description-wachtwoord2 error-wachtwoord2" }) })] })

<astro-static-slot>() => createVNode(Fragment, {
          children: [createVNode("p", {
            children: createVNode("label", {
              htmlFor: "wachtwoord2",
              children: "Nieuw wachtwoord"
            })
          }), createVNode("p", {
            id: "description-wachtwoord2",
            children: "Kies een wachtwoord van minimaal 8 karakters lang."
          }), createVNode("p", {
            id: "error-wachtwoord2",
            children: "Invoerfout: Je gekozen wachtwoord is te kort."
          }), createVNode("p", {
            children: createVNode("input", {
              id: "wachtwoord2",
              type: "password",
              name: "nieuw-wachtwoord",
              "aria-describedby": "description-wachtwoord2 error-wachtwoord2"
            })
          })]
        })</astro-static-slot>

Niet doen

Description boven het formulierveld en foutmelding eronder plaatsen.

() => createVNode(Fragment, { children: [createVNode("p", { children: createVNode("label", { htmlFor: "wachtwoord4", children: "Nieuw wachtwoord" }) }), createVNode("p", { id: "description-wachtwoord4", children: "Kies een wachtwoord van minimaal 8 karakters lang." }), createVNode("p", { children: createVNode("input", { id: "wachtwoord4", type: "password", name: "nieuw-wachtwoord", "aria-describedby": "description-wachtwoord4 error-wachtwoord4" }) }), createVNode("p", { id: "error-wachtwoord4", children: "Invoerfout: Je gekozen wachtwoord is te kort." })] })

<astro-static-slot>() => createVNode(Fragment, {
          children: [createVNode("p", {
            children: createVNode("label", {
              htmlFor: "wachtwoord4",
              children: "Nieuw wachtwoord"
            })
          }), createVNode("p", {
            id: "description-wachtwoord4",
            children: "Kies een wachtwoord van minimaal 8 karakters lang."
          }), createVNode("p", {
            children: createVNode("input", {
              id: "wachtwoord4",
              type: "password",
              name: "nieuw-wachtwoord",
              "aria-describedby": "description-wachtwoord4 error-wachtwoord4"
            })
          }), createVNode("p", {
            id: "error-wachtwoord4",
            children: "Invoerfout: Je gekozen wachtwoord is te kort."
          })]
        })</astro-static-slot>

Meer lezen over gerelateerde WCAG-succescriteria op NL Design System

Op de WCAG succescriteria pagina’s op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.

Over deze richtlijnen

Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.