Számos esetben előfordul, hogy a fejlesztők olyan megoldást alkalmaznak modális ablak megvalósítására, amely csak látás és egérhasználat esetén működik. Gyakori probléma, hogy az ablak megnyitását követően a fókusz a látványban mögötte lévő tartalmon marad, csak billentyűzettel történő használat esetén a vezérlés az alapoldal elemein lépked végig. A másik hiba, hogy a Tab billentyűvel történő bejárás esetén a fókusz nem marad az ablakon belül, a vezérlés annak utolsó elemét követően a mögöttes tartalmon halad tovább.
Ugyanezen problémák gyakran megjelennek képernyőolvasó program használata esetén is, kiegészítve azzal, hogy az általában az oldal forráskódjának végén található modális ablak elemei mindig bemondásra kerülnek, függetlenül attól, hogy a párbeszédpanel éppen megjelenik vagy sem.
Jelen fejezet célja olyan modális megoldás 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 részben a Word Wide Web Consortium ARIA Authoring Practices Guide (APG) útmutatójának külön oldalon megnyíló Modal Dialog Example 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 egy vásárló adatai (név, telefonszám, e-mail-cím) kerülnek megjelenítésre. A Módosítás gomb megnyomására megjelenik egy modális ablak, amelyben az adatok módosíthatóak. A Mentés gomb megnyomásakor lefutnak a szükséges ellenőrzések, és amennyiben nincsenek hibák, az alapoldalon szereplő adatok felülírásra kerülnek a módosított értékekkel. Hiba esetén azok megjelennek a modális ablakban, a képernyőolvasó program felolvassa azt. A Mégse gomb aktiválásakor az ablak bezáródik, az adatok nem kerülnek felülírásra.
<div role="dialog" id="dialog" aria-labelledby="dialog_label" aria-modal="true" class="hidden">
A role="dialog" tulajdonság jelzi a képernyőolvasó programnak, hogy a <div> elem modális párbeszédpanel megvalósítására szolgál. Az aria-modal="true" pedig azt, hogy az oldal többi részét nem szabad bejárnia. Az aria-labelledby="dialog_label" tulajdonság a következő sorban található, dialog_label azonosítójú egyes szintű címsort társítja bemondandó címként a párbeszédpanelhez.
<div aria-live="assertive" id="error_area" class="error-area"></div>
Erre a területre kerülnek a kitöltés során fellépő esetleges hibaüzenetek. Az elem az ablak megjelenítésekor üres. A Mentés gomb megnyomását követően a checkModify függvény ellenőrzi a kitöltést. Amennyiben hiba lép fel, annak leírása bekerül a terület innerHTML tulajdonságába. Az aria-live="assertive" tulajdonság biztosítja, hogy az elem megváltozott tartalma bemondásra kerüljön.
<label class="label_text" for="phonem">Telefonszáma (pl. 06301234567):</label>
Ez a sor a telefonszám megadására szolgáló mezőhöz tartozó címke. A for="phonem" tulajdonság biztosítja az összerendelést, megfelelve a WCAG 2.1 ajánlás 1.3.1 teljesítési feltételének. A címkében kitöltési minta is található. (3.3.2 teljesítési feltétel). Ugyanez a kitöltési minta szerepel a mezőhöz tartozó hibaüzenetben is. (3.3.3 teljesítési feltétel).
<input id="phonem" type="tel" maxlength=11 class="phonec">
A type="tel" tulajdonság jelzi a böngésző számára, hogy a mező gyakran használt (telefonszám) típusú. (1.3.5 teljesítési feltétel). Hasonló célból, a következő mező type tulajdonságánál az email érték szerepel.
<button type="button" onclick="document.getElementById('namem').focus();var mresult=checkModify(); if (mresult==''){fillSpans();closeDialog(this)} else {document.getElementById('error_area').innerHTML=mresult;} ">Mentés</button>
A document.getElementById('namem').focus() utasítással a vezérlés az oldal első fókuszálható elemére kerül, amennyiben a kitöltés hibás. Mivel ebben az esetben nem történik oldalfrissítés, e nélkül a fókusz a Mentés gombon maradna, így mind a csak billentyűzetet, mind a képernyőolvasó programot használó felhasználóknak visszafelé kellene lépkedniük a kitöltés megismétléséhez.
if (hiba==document.getElementById('error_area').innerHTML){hiba=hiba+" ";}
A képernyőolvasó program csak abban az esetben mondja be az aria-live terület tartalmát, ha az ténylegesen megváltozik. Előfordulhat, hogy a javítás sikertelen, a Mentés gomb megnyomását követő ellenőrzés során a hibaüzenet szövege nem változik. Ebben az esetben a hibaüzenet nem kerül ismételten felolvasásra. A szóköz hozzáadásával biztosítható a hibaüzenet megváltozása, anélkül, hogy az látvány, illetve tartalom szerint érdemben eltérjen.
Megjegyzés: A forráskód magyarázata az akadálymentes hozzáféréshez szükséges elemek bemutatására szorítkozik, az általános HTML-, CSS-, illetve programozási fogások, eljárások ismertetése nem célja az anyagnak.