Gyakran előfordul, hogy amennyiben a portál keresési lehetőséget biztosít, a fejlesztők azt a megoldást választják, hogy amint a felhasználó beír néhány karaktert a keresőmezőbe, megjelennek az illeszkedő találatok, amelyek a további begépelt karakterektől függően folyamatosan változnak. A kontextus állandó változása megzavarhatja a megértésben korlátozott, illetve a képernyőolvasó programot használó felhasználókat.
Jelen fejezet célja olyan megoldás bemutatása, amelyben csak akkor történik keresés, ha a felhasználó lenyomja az Enter billentyűt, illetve megnyomja a Keresés gombot. A megoldás gyakorlati példájában a tulipán, a rózsa és a nárcisz különböző fajtáira lehet keresni.
<label for="keresés">Keresés:</label>
Ez a sor a keresőmezőhöz tartozó címke. A for="keresés" tulajdonság biztosítja az összerendelést, megfelelve a WCAG 2.1 ajánlás 1.3.1 teljesítési feltételének.
<input type="text" name="kereses" id="kereses" aria-label="Keresés" autocomplete="off"/>
A keresőmező. Az autocomplete="off" érték jelzi a böngészőnek, hogy ne ajánljon fel korábban beírt értéket.
<input type="button" onclick="search()" value="Keresés">
A keresés elindítására szolgáló gomb. A gomb aktiválását követően a search() funkció a virágfajták listájából kikeresi azokat az elemeket, amelyek tartalmazzák a keresőmezőbe írt szöveget, és megjeleníti azokat.
<div id="talalat"></div>
A találatok megjelenítésére szolgáló terület. Az oldal betöltésekor üres, a search() függvény tölti ki a találatokkal.