Placeholders en de zoekfunctie

Een gebruikelijke opzet voor een zoekoptie in de header is:

• een onzichtbaar label;
• de placeholder als zichtbaar label;
• rechts naast het formulierveld een submitbutton met de tekst “Zoek” en/of een icoontje van een loopje.

Hierbij wordt het zoekloopje als zichtbaar label gebruikt over wat in te vullen als de placeholder verdwijnt. Omdat dit een veel gebruikte constructie is, is dit prima. Het is door buttontekst of icoon voldoende duidelijk wat er wordt verwacht.

<astro-static-slot>() => createVNode(Fragment, {
          children: [createVNode("p", {
            children: createVNode("label", {
              className: "sr-only",
              htmlFor: "header-search",
              children: "Zoek"
            })
          }), createVNode("p", {
            children: createVNode("input", {
              id: "header-search",
              placeholder: "Zoek",
              type: "search"
            })
          }), createVNode("p", {
            children: createVNode("button", {
              children: "Zoek"
            })
          })]
        })</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.

• Succescriterium 1.1.1 Niet-tekstuele content
• Succescriterium 1.3.1 Info en relaties
• Succescriterium 2.4.6 Koppen en labels
• Succescriterium 3.3.2 Labels of instructies

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.