A naptárkomponensek esetében gyakran előfordul, hogy a fejlesztők olyan megoldást alkalmaznak, amely csak látás és egérhasználat esetén működik. Jellemző probléma, hogy a dátumválasztó megnyitását követően nem kerül rá az elemre a fókusz, az nem szerepel a tabsorrendben. A másik lehetséges hiba, hogy a napokon ugyan végig lehet lépkedni a Tab billentyűvel, de a hónap, illetve az év kiválasztására ikon szolgál, amely csak a billentyűzet használatával nem érhető el.
A képernyőolvasó programot használók sokszor azt tapasztalják, hogy a program nem érzékeli a komponenst, illetve az nem kezelhető a megszokott navigációs módokon.
Jelen fejezet célja olyan naptárkomponens 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ó Date Picker Dialog 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 webáruházban történő vásárlás folyamatának azon lépése szerepel, amelyben meg kell adni a kiszállítás dátumát. A mező címkéjében szerepel a megadandó dátum formátuma. Mellette egy naptár alakú gomb található, amelynek aktiválásakor megjelenik a dátumkiválasztó komponens. Ha a mező üres, vagy nem megfelelő értéket tartalmaz, akkor a megjelenő naptárkomponens az aktuális napot mutatja, különben a korábban beírt dátumot.
<button type="button" class="icon" aria-label="Dátum kiválasztása"><span class="fa fa-calendar-alt fa-2x"></span></button>
A nyomógomb a \f073 unicode karakterrel van megjelenítve. Az aria-label="Dátum kiválasztása" tulajdonság biztosítja, hogy a képernyőolvasó megfelelően mondja be az elemet.
<div id="id-datepicker-1" class="datepicker-dialog" role="dialog" aria-modal="true" aria-label="Dátum kiválasztása">
Ez a rész a naptárkomponenst magába foglaló <div> elem. A role="dialog" tulajdonság jelzi a képernyőolvasónak, hogy az elem párbeszédpanel, az aria-modal="true" pedig azt, hogy modális. (Ez önmagában nem teszi az ablakot modálissá, ehhez szükséges a megfelelő kezelési mód javascriptben történő megvalósítása.) Az aria-label="Dátum kiválasztása" tulajdonság biztosítja, hogy a párbeszédpanel célja megfelelően legyen bemondva.
<div class="header">
A naptárkomponens fejléce. Ide kerülnek az év, illetve a hónap kiválasztására szolgáló gombok. Közöttük az aktuálisan kiválasztott év és hónap található.
<button type="button" class="prev-year" aria-label="Előző év" title="Előző év"> <span class="fas fa-angle-double-left fa-lg"></span></button>
A gomb a \f100 unicode karakterrel van megjelenítve. Az aria-label="Előző év" tulajdonság biztosítja, hogy a képernyőolvasó megfelelően mondja be az elemet. A title="Előző év" pedig azt, hogy amikor az egérmutató vagy a fókusz rákerül, megjelenjen a jelentését leíró rövid magyarázat.
<th scope="col" aria-label="Hétfő" title="Hétfő">H</th>
A <th> címke és a scope="col" tulajdonság biztosítja, hogy képernyőolvasó használata esetén lekérdezhető legyen, hogy az adott cellaelemhez a hét melyik napja tartozik. Az aria-label="Hétfő" tulajdonság biztosítja, hogy a képernyőolvasó megfelelően mondja be a nap nevét. A title="Hétfő" pedig azt, hogy amikor az egérmutató rákerül, megjelenjen a nap nevét tartalmazó hint.
A <tbody> rész feltöltése a táblázat napokat tartalmazó részének megfelelő inicializálása miatt szükséges. A komponens megjelenésekor az itt megadott értékek felülíródnak az aktuális nap vagy a mezőbe írt dátum alapján.