Tapasztaltam, hogy a vizsgált honlapok java része a navigációs menükön azonnal elbukik. Saját fejlesztésű honlapjaimat emiatt rengetegen tesztelték és mindig találtak rajta valami kivetnivalót. 5 éven át fejlesztettem, mire sikerült olyan menüt felépítenem, amit a különböző tesztelőim hibátlanul akadálymentesnek találtak.

A cikk elején feltárom a titkot: az akadálymentes menü elképesztően egyszerű.

Ezt a cikket úgy építettem fel, hogy végig vezessen a menükészítés döntési fázisain és buktatóin.

A menü jellemzői

Navigációs menü vagy alkalmazás-menü?

A navigációs menü és az alkalmazás menü lehet, hogy ugyanúgy néz ki, mégis egészen más. A két menü összehasonlítása:

Mindkét menütípus lehet akadálymentes, azonban e cikkben a navigációs menüvel foglalkozom.

Reszponzív menü vagy külön menü?

Jelenleg is sokszor alkalmazzák azt a megoldást, hogy képernyőmérettől függően a két menü közül az egyiket jelenítik meg, mint az asztali gépeken. Nem feltétlenül a menü elemek különböznek, hanem maga a menü HTML kódolása. A mobiltelefonon elrejtik az asztali géphez készített menüt, az asztali gépen pedig a mobil nézetre készített menüt. Mind a kettő megoldás lehet akadálymentes.

A nem reszponzív navigációs menü esetén arra kell ügyelni, hogy a képernyőolvasók elől mindig legyen elrejtve az éppen nem használt menü. Az egyetlen egy reszponzív menü azonban sokkal elterjedtebb és egyszerűbb megoldás.

Egyszintű menü vagy többszintű menü?

Az egyszintű menüknél nincs szükség almenükre. A lehető legegyszerűbb, legátláthatóbb és legakadálymentesebb. Sok esetben azonban szükséges két szintű vagy még nagyobb mélységet kialakítani.

Elég jellegzetes a megamenü, amikor az almenü egy szinte önálló oldal címsorokkal, képekkel, magyarázó szöveggel.

Lesz-e menü gomb

Szeretnénk-e, ha a navigációs menü mindig látható legyen, vagy pedig egy menü-gombbal (menu-toggle) tesszük elérhetővé? A legtöbb esetben a keskeny képernyőkön pl. mobiltelefon szokták ezt a megoldást alkalmazni.

Akadálymentes navigációs menü létrehozása

HTML

A HTML kiosztásának két jellemzője van:

• mindig lista és mindig számozatlan lista < ul > elemmel
• Mindig a < nav > elembe ágyazzuk. Ha többszintű, akkor egymásba ágyazva

Egy többszintű navigációs menü tehát így néz ki:

A HTML < li > elem bármilyen tartalmat (flow content)tartalmazhat, ezért a megamenük kialakítása ezekben megvalósíthatók. Teljesen szabályos és jó megoldás az alábbi:

Az aria-current attribútum alkalmazásával feloldjuk azt a helyzetet, hogy önmagára mutató linkre kattintson valaki. Természetesen az is jó megoldás lenne, ha az adott oldalra mutató menüpont helyett egyszerű szöveg lenne.
Az aria-label attribútum nem kötelező, de a képernyőolvasót használó felhasználóknak segítség a navigálási régió beazonosításához.

Megjelenítés

Link-szabály

A linkek megjelenítésére a WCAG egyik alapszabályát figyelembe kell venni: a megkülönböztetéshez színen kívül mást is alkalmazni kell. A navigációs menüt amúgy is ki szoktuk emelni:

• Az elhelyezkedésével
• Kiemelésével például inverz sávban
• Betűmérettel, betűvastagsággal, betűtávolsággal, más betűtípussal

Ezek a megkülönböztetések elegendők ahhoz, hogy mindenki számára egyértelmű legyen, hogy melyik a navigációs menü az oldalon.

Akadálymentes almenük

Az almenük kinyitásával kapcsolatosan az alábbi akadálymentességi követelményeknek kell megfelelni:

• A bezárt almenü csak a képernyőn ne látszódjon, a kisegítő technológia számára elérhető maradjon
• Az almenü kinyitható legyen billentyűzettel
• Ne nyíljon meg egérrel történő rámozgatással
• A megnyitott almenü ne tűnjön el egy idő után
• Látható legyen, hogy a menüelemhez almenü tartozik
• Kinyitható legyen érintőképernyőn is

A fentiek megvalósítására rendkívül sok megoldás létezik.
A képernyőről eltüntetni úgy kell, hogy egy pixel méretűre csökkentjük és a képernyőn kívülre helyezzük:

A clip tulajdonságra a fókuszálhatóság miatt van szükség.
Az almenü kinyitása billentyűzettel legkönnyebben a focus-within tulajdonsággal valósítható meg. Ezt a tulajdonságot már minden fontos böngésző támogatja, és ahogy a nevében benne is van: a leszármazott elem fókuszba kerülése esetén aktiválódik.
li:focus-within ul {clip: auto;}
Azonban kliens oldali programmal is tökéletes megoldásokat lehet megvalósítani.
Arra érdemes figyelni, hogy amennyiben nagyon sok almenü van, akkor érdemes külön gombot létrehozni a menü kinyitására. A leírt megoldás jellemzője ugyanis, hogy a képernyőolvasó végig olvassa az összes almenü
elemet, ami nagyon fárasztó és értelmetlen lehet. Ezen segíthetünk, ha a menü elemek után egy gombot hozunk létre. Egy ilyen toggle gomb

A mintakód alapján létrehozható az almenüt kinyitó vezérlőgomb, amelyhez JavaScripttel több kényelmi funkciót lehet hozzárendelni. A legfontosabbak:

• ESC gombbal bezár az almenü. Ha több szintű az almenü, csak az éppen aktív szint záródik be.
• A menü és almenü elemei közt nyilakkal lehet közlekedni
• A kinyitott almenü jelölése más, mint a bezárté.
• Az almenükben billentyűzet csapdát alkalmazunk, azaz az utolsó almenü elem után az elsőre ugrik.

UX menü

Az UX design magában foglal néhány alapvető web-akadálymentességi irányelvet, többek közt a billentyűvel vezérlést és a billentyű fókusz jelzést (focus-visible css pszeudo osztály). Azonban a legtöbb weboldalnál nem alkalmazzák még.
A UX tervezés nemcsak a megjelenést foglalja magában, hanem a használhatóságot is.
A web-akadálymentességet úgy is el lehet képzelni, mint a UX kiterjesztését az átlagtól eltérő felhasználókra, azokra akik gyengébben látnak, akik kisegítő eszközökkel böngészik a honlapot.

Nincs tudományos kutatás arról, melyik felhasználó hol akad el leginkább. Az biztos, hogy a képernyőolvasót használók számára teljesen használhatatlan egy rossz menüvel. Az idősek többsége látássérült, az egér használatára előbukkanó megamenük a létező legrosszabb megoldások számukra.

Hasonló bejegyzések

Magyar és akadálymentes WordPress sablon Fontos tudni a web-akadálymentességről UX vagy WCAG?