A menü egy olyan widget, amely választási lehetőségek (például műveletek vagy funkciók) listáját kínálja a felhasználónak. A menüwidgetek úgy viselkednek, mint az operációs rendszer beépített menüi, amelyek sok asztali alkalmazásban általában az ablak tetejéhez közel található menüsorról nyithatók le. A menü megnyitása vagy láthatóvá tétele rendszerint egy menügomb aktiválásával, egy almenüt nyitó menüelem kiválasztásával, vagy egy parancs (Windowsban például a környezetfüggő menüt megnyitó Shift + F10) kiadásával történik. A menüből kiválasztott valamelyik lehetőség aktiválásakor a menü általában bezáródik, kivéve, ha a kiválasztott menüelem egy almenüt nyitott meg.
A menüsor egy folyamatosan látható, jellemzően vízszintes menü, amelyet gyakran a számos asztali alkalmazásablak tetejéhez közel található menüsorhoz hasonló komponens létrehozására használnak. A menüsor a felhasználó számára egy következetes felépítésű és általában nem változó parancskészlethez biztosít gyors hozzáférést.
Jelen fejezet célja olyan menüsor bemutatása, amely képernyőolvasó program és csak billentyűzet használata esetén is jól használható. Bár a különböző weboldalakon menüsor ritkábban fordul elő, azonban bízunk benne, hogy a bemutatott megoldás más jellegű menük elkészítéséhez is hasznos információkat nyújt. 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ó Editor Menubar 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 következő példa a Menüsor-minta használatát mutatja be, amely egy többsoros szerkesztőmező szerkesztési műveleteihez biztosít hozzáférést. A menüsor elemei egy-egy szövegformázási műveletkategóriának felelnek meg, és az aktiválásukkal megnyitható almenükből az adott kategóriába tartozó parancsokat lehet végrehajtani. Az almenükben bemutatásra kerül a menuitemradio és a menuitemcheckbox elemtípus.
A Méret menüben szemléltetésre kerülnek a nem elérhető menüelemek. Ha éppen a legkisebb betűméret van beállítva, akkor a Kisebb menüelem nem érhető el. Ugyanígy, ha a legnagyobb betűméret van beállítva, akkor pedig a Nagyobb menüpont nem érhető el.
A kisegítő technológiát használók meg tudják állapítani, hogy éppen mely formázási beállítások aktívak, mert ezek bejelöltségi állapottal rendelkező választógomb-menüpont és jelölőnégyzet-menüpont típusú elemekként szerepelnek a menüben.
Azért, hogy a képernyőolvasó programok ne jelentsék be azokat a karakterentitásokat, amelyek a lefelé mutató nyíl és a bejelölve ikon vizuális megjelenítésére szolgálnak, az aria-hidden attribútum segítségével elrejtésre kerülnek.
Amikor a menüsor fókuszban van, akkor egy keret rajzolódik a menüsor tárolója köré, ezzel tudatosítva, hogy ilyenkor a nyílbillentyűk használatával különféle irányokban lehet navigálni a menüsoron és annak almenüiben.
Az asztali rendszereken lévő legtöbb menüsorhoz hasonlóan csak akkor nyílnak meg az almenük a menüsoron lévő szülőelemre egérrel történő rámutatás esetén, ha egy másik almenü már meg van nyitva. Tehát ha minden almenü bezárt állapotban van, akkor egy almenü megjelenítéséhez rá kell kattintani annak szülőelemére. A rámutatás hatására automatikusan megjelenő felugró ablakok kis méretűvé tétele megkönnyíti a képernyőnagyítóval való felfedezést.
Az akadálymentes widdgetekben általában véve kerülendő gyakorlat a fókusz áthelyezése az egérrel való rámutatás hatására, mivel váratlan kontextusváltozást okoz a csak billentyűzetet használók számára. Azonban ahogy az asztali környezetek menüsorainak esetében, ebben a menüsor-példában is van két feltétel, melynek teljesülése esetén a fókusz az egérrel való rámutatás hatására áthelyeződik, ezzel segítve a kontextus megmaradását a billentyűzetet és egeret is használó felhasználók számára:
Ha a menüsoron egy szülőelem aktiválását követően a felhasználó a menüsoron egy másik szülőelem fölé viszi az egeret, a fókusz követi a rámutatást.
Ha meg van nyitva egy almenü és a felhasználó az egeret az almenü egyik eleme fölé viszi, a fókusz követi a rámutatást.
Az operációs rendszer nagy kontrasztú beállításainak támogatása érdekében a fókusz kiemelése a fókuszban lévő menüelem bekeretezésével, illetve a keret megszüntetésével történik.
A menubar szerep az <ul> elemet menüsor-tárolóként azonosítja a menüsoron lévő menüelemek számára. A menüsor elem nem fókuszálható, mivel a fókusz kezelése a komponenseken belül a tabindex használatával történik.
Az <ul> elemben az aria-label="Szöveg formázása" megadja a menüsor hozzáférhető nevét. Segít a kisegítő technológia felhasználóinak megérteni a menüsor célját, és megkülönbözteti azt az oldal más menüsoraitól vagy hasonló elemeitől.
A <span> elemben a menuitem szerep az elemet a menüsor menüelemeként azonosítja. A hozzáférhető név a szöveges tartalomból származik.
A <span> elemen belül a tabindex="-1" a menüelemet fókuszálhatóvá teszi, de nem lesz része az oldal tabsorrendjének.
A <span> elemen belül a tabindex="0" a menüelemet fókuszálhatóvá és az oldal tabsorrendjének részévé teszi. A menüsoron csak egy menüpontnál van megadva a tabindex="0". Amikor az oldal betöltődik, a menüsor első eleme kapja a tabindex="0" attribútumot. Amikor a komponenseken belül mozog a fókusz, akkor a legutoljára fókuszált elem kerül be az oldal tabsorrendjébe.
A <span> elemen belül az aria-haspopup="true" azt jelzi, hogy a menüelemnek van almenüje.
A <span> elemen belül az aria-expanded="true" azt jelzi, hogy az almenü megnyitott állapotban van.
A kibontott állapot vizuális megjelenése CSS-attribútumválasztók segítségével szinkronban van tartva az aria-expanded értékével, és az aria-hidden="true" paraméter hatására rejtve marad a képernyőolvasó programok elől.
A <span> elemen belül az aria-expanded="false" azt jelzi, hogy az almenü bezárt állapotban van.
Az összecsukott állapot vizuális megjelenése CSS-attribútumválasztók segítségével szinkronban van tartva az aria-expanded értékével, és az aria-hidden="true" paraméter hatására rejtve marad a képernyőolvasó programok elől.
A <span> elemen belül az aria-hidden="true" eltávolítja a szülő menüelemek lefelé mutató nyíl ikonját ábrázoló karakterentitásokat az akadálymentességi fából, hogy azok ne kerüljenek be a menüelem akadálymentes nevébe.
A menu szerep az <ul> elemet menütárolóként azonosítja a menüben lévő menüelemek számára. Maga a menüszerepű elem nem fókuszálható, mivel a fókusz kezelése a komponenseken belül a tabindex használatával történik.
Az <ul> elemen belül az aria-label="string" meghatározza a menü akadálymentes nevét.
A menuitem szerep a <li> elemet az almenü egy elemeként azonosítja. A menüelem akadálymentes neve a szöveges tartalomból származik.
A <li> elemen belül a tabindex="-1" a menüelemet fókuszálhatóvá teszi, de nem lesz része az oldal tabsorrendjének.
A Méret menü Kisebb
és Nagyobb
menüpontjának <li> elemén belül az aria-disabled="false" használata azt jelzi, hogy az adott menüpont elérhető, tehát aktiválható.
A Méret menü Kisebb
vagy Nagyobb
menüpontjának <li> elemén belül az aria-disabled="true" használata azt jelzi, hogy az adott menüpont nem érhető el, tehát nem aktiválható, mivel már a legkisebb/legnagyobb betűméret van beállítva.
A menuitemcheckbox szerep a <li> elemet jelölőnégyzet-menüpontként azonosítja. A jelölőnégyzet-menüpont akadálymentes neve a szöveges tartalomból származik.
A <li> elemen belül a tabindex="-1" a jelölőnégyzet-menüpontot fókuszálhatóvá teszi, de nem lesz része az oldal tabsorrendjének.
A <li> elemen belül az aria-checked="true" használata azt jelzi, hogy a jelölőnégyzet-menüpont bejelölt állapotban van.
A jelölőnégyzet-menüpont bejelöltségi állapotának vizuális megjelenése CSS-attribútumválasztók segítségével szinkronban van tartva az aria-checked értékével, és az aria-hidden="true" paraméter hatására rejtve marad a képernyőolvasó programok elől.
A <li> elemen belül az aria-checked="false" használata azt jelzi, hogy a jelölőnégyzet-menüpont nem bejelölt állapotban van.
A jelölőnégyzet-menüpont bejelöltségi állapotának vizuális megjelenése CSS-attribútumválasztók segítségével szinkronban van tartva az aria-checked értékével, és az aria-hidden="true" paraméter hatására rejtve marad a képernyőolvasó programok elől.
A <span> elemen belül az aria-hidden="true" eltávolítja a jelölőnégyzet-menüpont bejelöltségét vagy nem bejelöltségét vizuálisan jelző karakterentitásokat az akadálymentességi fából, hogy azok ne kerüljenek be a jelölőnégyzet-menüpont akadálymentes nevébe.
A separator szerep a <li> elemet vizuális elválasztóként (választóvonalként) azonosítja. Ilyen elválasztó elemmel lehet egymástól elkülöníteni egy menün belül a menüelemek, pl. jelölőnégyzet-menüpontok vagy választógomb-menüpontok csoportjait. Az elválasztó elemre nem vihető rá a fókusz, de a képernyőolvasó-felhasználók észlelhetik a jelenlétét, ha olyan olvasó kurzort használnak, amely nem függ a fókusztól.
A group szerep az <ul> elemet a választógomb-menüpontok egy csoportjának tárolójaként azonosítja. Lehetővé teszi a böngészők számára az aria-setsize (csoportméret) és az aria-posinset (csoporton belüli pozíció) értékének kiszámítását.
Az <ul> elemen belül az aria-label="string" meghatározza a menüelemcsoport akadálymentes nevét.
A menuitemradio szerep a <li> elemet választógomb-menüpontként azonosítja. A választógomb-menüpont akadálymentes neve a szöveges tartalomból származik. Ha egy almenü minden eleme ugyanannak a választógombcsoportnak a tagja, akkor a csoportot a menu elem definiálja, tehát nincs szükség a group elemre.
A <li> elemen belül a tabindex="-1" a választógomb-menüpontot fókuszálhatóvá teszi, de nem lesz része az oldal tabsorrendjének.
A <li> elemen belül az aria-checked="true" használata azt jelzi, hogy a választógomb-menüpont bejelölt állapotban van.
A választógomb-menüpont bejelöltségi állapotának vizuális megjelenése CSS-attribútumválasztók segítségével szinkronban van tartva az aria-checked értékével, és az aria-hidden="true" paraméter hatására rejtve marad a képernyőolvasó programok elől.
A <li> elemen belül az aria-checked="false" használata azt jelzi, hogy a választógomb-menüpont nem bejelölt állapotban van.
A választógomb-menüpont bejelöltségi állapotának vizuális megjelenése CSS-attribútumválasztók segítségével szinkronban van tartva az aria-checked értékével, és az aria-hidden="true" paraméter hatására rejtve marad a képernyőolvasó programok elől.
A <span> elemen belül az aria-hidden="true" eltávolítja a választógomb-menüpont bejelöltségét vagy nem bejelöltségét vizuálisan jelző karakterentitásokat az akadálymentességi fából, hogy azok ne kerüljenek be a választógomb-menüpont akadálymentes nevébe.
A <textarea> elemen belül az aria-label="Szövegminta" meghatározza a többsoros szerkesztőmező akadálymentes nevét.