A weboldalak űrlapjain a szöveges jellegű adatok megadása kétféleképpen történhet. Amennyiben a kitöltendő mező tetszőleges szöveg lehet, a fejlesztők az input címkét szokták használni, ahol a type paraméter értéke általában text szokott lenni. Ha a szóbajöhető válaszok köre előre meghatározott, akkor pedig a select címkét. Ez utóbbi kombinált listamező megjelenítésére szolgál.
Az esetek többségében az adott mezőt néhány ismert értékkel ki lehet tölteni, ám időnként akadnak kivételek. Ebben az esetben kombinált szerkesztőmezőt szükséges alkalmazni, amelybe a felhasználó begépelheti a kívánt értéket, de az adatbevitelt valamilyen listás megoldás is támogatja, amelyből kiválasztható az előre megadott elemek egyike. A HTML szabvány jelenleg nem támogatja natív módon a kombinált szerkesztőmező elemet, azt a szerkesztőmező kiterjesztésével lehet megvalósítani.
Jelen fejezet célja olyan kombinált szerkesztőmező bemutatása, amely csak billentyűzet, illetve képernyőolvasó program használata esetén is megfelelően működik. A példa elkészítéséhez a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Editable Combobox without Autocomplete eleme szolgált kiindulásként, annak módosított, magyar nyelvű és magyar formátumú változata szerepel a komponens gyakorlati példájában.
A példaoldalon a felhasználó kedvenc virágát kell megadni. A mezőbe tetszőleges értéket be lehet gépelni, illetve a Lefelényíl vagy a Felfelényíl billentyű lenyomására megnyíló listából kiválasztható a tulipán, a rózsa, valamint a nárcisz.
<label for="cb1-input">Mi a kedvenc virága?</label>
Ez a sor a kombinált szerkesztőmezőhöz tartozó címke. A for="email" tulajdonság biztosítja az összerendelést, megfelelve a WCAG 2.1 ajánlás 1.3.1 teljesítési feltételének.
<div class="combobox combobox-list">
A szerkesztőmezőt és a hozzátartozó listát magában foglaló <div> címke.
<div class="group">
A szerkesztőmezőt és a hozzátartozó ikont magában foglaló <div> címke. Az elem kombinált listamezőnek látszik, ez úgy van megvalósítva, hogy az <input> címke mellett egy lefelé mutató háromszög alakú ikon is szerepel. Ezért van szükség erre a <div> elemre.
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="none" aria-expanded="false" aria-controls="cb1-listbox">
A kombinált szerkesztőmező <input> eleme. A role="combobox" tulajdonság jelzi a képernyőolvasónak, hogy a szerkesztőmezőhöz lista is tartozik, amelyet az aria-controls="cb1-listbox" attribútum határoz meg. Az aria-expanded="false" tulajdonság jelzi a képernyőolvasó számára, hogy a lista alapértelmezetten nincs megnyitva. Az aria-autocomplete="none" beállítás biztosítja, hogy a mezőhöz kapcsolódóan ne jelenjenek meg korábban már megadott értékek.
<button type="button" id="cb1-button" tabindex="-1" aria-hidden="true">
A szerkesztőmező melletti ikonhoz tartozó <button> címke. Egérhasználat esetén erre kattintva nyílik meg a lista. Képernyőolvasó program használata esetén viszont nincs rá szükség, megzavarhatja a felhasználót. Ezért az aria-hidden="true" tulajdonság megadásával el kell rejteni a képernyőolvasó program elől.
<ul id="cb1-listbox" role="listbox" aria-label="Értéklista">
A szerkesztőmezőhöz tartozó értéklista <ul> címkéje. A role="listbox" tulajdonság jelzi a képernyőolvasónak, hogy az elem egy értéklista. Az aria-label="Értéklista" tulajdonság adja meg, hogy a képernyőolvasó program milyen címkét mondjon be az elemhez.