A fülespanelek 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. A fülespanel lapokból áll, amelyek közül mindig csak egy aktív, ez az egy látható. Jellemzően a komponens tetején található egy sáv, amelynek elemei a megjelenített lap váltogatására használhatóak. A fejlesztők a lapokat általában <div> címkékkel, a fülek jelzésére szolgáló vezérlőket pedig listaelemekkel vagy gombokkal valósítják meg. A fülespanel kinézetét stíluslapok, működését egérhasználaton alapuló JavaScriptek segítségével valósítják meg.
Ilyen megoldás esetén a csak billentyűzetet használó felhasználók nem tudnak váltani a fülek között. A képernyőolvasó program a megvalósítás során használt komponensek típusait fogja bemondani, amely alapján a felhasználó számára nem lesz egyértelmű, hogy azok egy fülespanelt takarnak.
Jelen fejezet célja olyan fülespanel 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ó Example of Tabs with Manual Activation 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 négy magyar kutyafaj rövid ismertetése található egy fülespanelen. A fülespanel <div>, a fejlécelemek <button> címkékkel lettek megvalósítva. A képernyőolvasó program a forrásban szereplő ARIA tulajdonságok alapján ismeri fel a fülespanel elemeit.
<div role="tablist" aria-labelledby="tablistlabel" class="manual">
A role="tablist" tulajdonság jelzi a képernyőolvasó programnak, hogy a <div> elem fülespanel megvalósítására szolgál. Az aria-labelledby="tablistlabel" pedig az előző sorban szereplő <h2 id="tablistlabel">Magyar kutyafajták</h2> címsort társítja bemondandó címként a fülespanelhez.
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
A role="tab" tulajdonság jelzi a képernyőolvasó programnak, hogy a button elem lapfül megvalósítására szolgál. Az aria-selected="true" tulajdonság pedig azt, hogy ez a fülespanel kiválasztott eleme. Az aria-controls="tabpanel-1" tulajdonság arra utal, hogy a lapfül kiválasztásakor a tabpanel-1 azonosítójú <div> címke tartalmát kell bemondani.
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
A többi lapfülnél az aria-selected tulajdonság false, a tabindex -1 értékre van állítva. Ez arra utal, hogy ezek a lapfülek nincsenek kiválasztva, illetve nincsenek megjelenítve.
<div id="tabpanel-1" role="tabpanel" aria-labelledby="tab-1">
A role="tabpanel" tulajdonság jelzi a képernyőolvasó programnak, hogy a <div> elem a kiválasztott lapfül tartalmának megjelenítésére szolgál. Az aria-labelledby="tab-1" pedig a hozzátartozó lapfület társítja bemondandó címként hozzá.
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.
Megjegyzés: Képernyőolvasó program használata esetén a Jobbranyíl, a Balranyíl, a Home és az End billentyűt a Shift lenyomásával együtt szükséges alkalmazni.