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:
| A navigációs menü | Az alkalmazás menü |
|---|---|
| Weboldalak navigálásához alkalmazzuk/td> | webalkalmazásokhoz tervezték |
| Új oldalra vezető link | Egy funkciót indít |
| Tisztán HTML kódolással megoldható | JavaScript és wai-aria jelölések szükségesek |
| Mindegyik képernyőolvasóval jól használható | A wai-aria eltérő támogatása miatt kiterjesztett tesztelés szükséges |
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 - 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
- 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
- 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.
Hungarian
English
German