A webes és szoftveres felhasználói felületek (UI) egyik leggyakrabban alkalmazott és sokoldalú eleme a legördülő menü, angolul dropdown menu. Ez a vizuális komponens alapvető szerepet játszik a felhasználói élmény (UX) kialakításában, hiszen segíti az információk rendezését, a navigációt és a felhasználói interakciók egyszerűsítését. Lényegében egy olyan vezérlőelemről van szó, amely alapállapotban csak egy kiválasztott elemet vagy egy címkét mutat, majd egy felhasználói interakcióra (például kattintásra vagy egérrel való rámutatásra) felfedi a rejtett opciók teljes listáját. Ez a lista azután lehetővé teszi a felhasználó számára, hogy kiválasszon egyet a felkínált alternatívák közül, vagy navigáljon a különböző tartalmi szekciók között.
A legördülő menük funkciója túlmutat a puszta lista megjelenítésén. A digitális felületek zsúfoltságának csökkentésében, az információk hierarchikus rendszerezésében és a felhasználó számára releváns választási lehetőségek áttekinthető bemutatásában kulcsfontosságú szerepet töltenek be. Gondoljunk csak egy webáruház kategóriáira, egy beállítási panel opcióira, vagy egy hírportál fő navigációs menüjére: mindezek gyakran legördülő formában jelennek meg, hogy a felhasználó ne vesszen el a rengeteg információban, és célirányosan megtalálja, amit keres. Az elmúlt évtizedek során a legördülő menük folyamatosan fejlődtek, alkalmazkodva az új technológiákhoz és a változó felhasználói szokásokhoz, miközben alapvető céljuk, a hatékony és intuitív interakció biztosítása, változatlan maradt.
A legördülő menü alapvető definíciója és funkciója
A legördülő menü, vagy angolul dropdown menu, egy olyan grafikus felhasználói felületi (GUI) elem, amely alapvetően egy listát tartalmaz, melynek elemei csak akkor válnak láthatóvá, ha a felhasználó rákattint vagy rámutat az adott vezérlőre. Ez a „legördülés” vagy „lenyílás” egyértelmesen jelzi, hogy további opciók állnak rendelkezésre. A menü elnevezése is ebből a viselkedésből ered: az opciók listája mintegy „legördül” az aktiváló elem alól.
A legördülő menük elsődleges funkciója a helytakarékosság. Képesek nagy mennyiségű információt vagy választási lehetőséget elrejteni, anélkül, hogy túlzsúfolnák a képernyőt. Ez különösen fontos a korlátozott képernyőterületű eszközökön, mint például az okostelefonok vagy tabletek. Amikor a menü nincs aktív állapotban, csak egyetlen elem – jellemzően a kiválasztott opció vagy egy címke, például „Válassz kategóriát” – látható, így a felület letisztult és áttekinthető marad.
Történelmi szempontból a legördülő menük megjelenése a korai grafikus felhasználói felületekkel és az egér bevezetésével esett egybe. Az első jelentős alkalmazások az 1980-as években jelentek meg, amikor a Xerox PARC kutatói, majd később az Apple Macintosh és a Microsoft Windows operációs rendszerek elkezdték széles körben használni ezt a navigációs és választási mechanizmust. Kezdetben főként az operációs rendszerek menüsorában, fájlkezelőiben és alkalmazásainak eszköztáraiban jelentek meg. Ekkoriban még egyszerű, monokróm listák voltak, de már akkor is a hatékony helykihasználás és a strukturált információkezelés alapköveinek számítottak.
A legördülő menü az információdús felületek rendszerezésének és a felhasználói döntéshozatal egyszerűsítésének egyik sarokköve, amely a digitális interakciók alapvető elemévé vált.
Az internet elterjedésével és a weboldalak komplexitásának növekedésével a legördülő menük a webdesign szerves részévé váltak. A HTML `
A hierarchikus információszervezés a legördülő menük másik kulcsfontosságú aspektusa. Képesek egymásba ágyazott struktúrákat megjeleníteni, ahol egy fő kategória kiválasztása további alkategóriákat tár fel. Ez a „főmenü – almenü” logika különösen hasznos nagy weboldalakon, ahol a tartalom több szinten van rendszerezve. A felhasználó így lépésről lépésre juthat el a keresett információhoz, anélkül, hogy egyszerre túl sok opcióval szembesülne, ami kognitív túlterheléshez vezethet.
Az alapvető működési elv rendkívül egyszerű: a felhasználó egy trigger elemre (pl. egy gombra, szövegre vagy ikonra) kattint, vagy rámutat, ami aktiválja a menüt. Ekkor egy előre definiált lista jelenik meg, amelyből a felhasználó kiválaszthatja a kívánt opciót. A kiválasztás után a menü általában bezáródik, és a kiválasztott elem vagy az annak megfelelő művelet végrehajtódik. Ez a ciklikus működés – rejtett állapot, aktiválás, választás, visszatérés rejtett állapotba – teszi a legördülő menüket hatékony és kiszámítható interakciós eszközzé.
A legördülő menük tipológiája és felhasználási területei
A „legördülő menü” kifejezés meglehetősen széles skálán mozoghat, és számos felhasználói felületi elemet takarhat, amelyek mind hasonló alapelven működnek: információt rejtenek el, majd igény szerint felfedik azt. Fontos különbséget tenni a különböző típusok között, hiszen mindegyiknek megvannak a maga specifikus felhasználási területei és implementációs kihívásai.
Navigációs legördülő menük
Ezek a leggyakrabban látott legördülő menük a weboldalakon és alkalmazásokban, amelyek a felhasználó számára biztosítják a különböző oldalak, szekciók vagy funkciók közötti navigációt. Jellemzően a főmenü részeként jelennek meg, ahol egy fő kategória (pl. „Termékek”, „Szolgáltatások”, „Rólunk”) lenyitásakor megjelennek az alkategóriák (pl. „Elektronika”, „Ruházat”, „Élelmiszer” a „Termékek” alatt). Ezek a menük lehetnek:
- Egyszerű lenyíló menük: Egy szintű lenyílás, ahol a főmenü elemre kattintva megjelenik az almenü.
- Többszintű (multi-level) legördülő menük: Itt az almenü elemei is tartalmazhatnak további almenüket, így egy komplex hierarchikus struktúra építhető fel. Ez gyakori nagy webáruházakban vagy információs portálokon, ahol a tartalom mélyen strukturált.
- Megamenük: Ezek a legösszetettebb navigációs legördülő menük. Nem csupán egyszerű listát jelenítenek meg, hanem gyakran oszlopokba rendezett linkeket, képeket, leírásokat vagy akár beépített keresőmezőket is tartalmazhatnak. Céljuk, hogy egyetlen kattintással átfogó áttekintést nyújtsanak egy nagyobb kategória tartalmáról, minimalizálva a kattintások számát.
A navigációs menük esetében a hozzáférhetőség és a reszponzivitás kiemelten fontos. A felhasználóknak könnyen el kell tudniuk érni a menüpontokat egérrel, billentyűzettel és érintőképernyővel is, és a menünek minden eszközön jól kell megjelennie és működnie.
Űrlapokhoz kapcsolódó legördülő listák (
A HTML `
- Egyszerű kiválasztás: A leggyakoribb eset, amikor a felhasználó egyetlen opciót választhat ki a listából.
- Többszörös kiválasztás (`multiple` attribútum): Lehetővé teszi több opció kiválasztását a listából (általában Ctrl/Cmd + kattintással). Ez azonban kevésbé felhasználóbarát, és gyakran alternatív UI elemeket (pl. checkbox listákat) használnak helyette.
Az `
Kontextuális menük (Context Menus)
Ezek a menük akkor jelennek meg, amikor a felhasználó egy adott objektumra vagy területre kattint (általában jobb egérgombbal, vagy mobil eszközökön hosszan nyomva tartva). A megjelenő opciók az adott kontextushoz, azaz a kiválasztott elemhez kapcsolódnak. Például egy fájlra kattintva „Másolás”, „Beillesztés”, „Törlés” opciók jelenhetnek meg, míg egy képre kattintva „Kép mentése”, „Megnyitás új lapon” lehetőségek. Céljuk a releváns műveletek gyors elérése, anélkül, hogy a felhasználónak a főmenüben kellene keresgélnie.
Fájlkezelő és alkalmazásmenük
Az operációs rendszerek és asztali alkalmazások menüsorában (pl. „Fájl”, „Szerkesztés”, „Nézet”) található legördülő menük szintén ebbe a kategóriába tartoznak. Ezek tartalmazzák az alkalmazás fő funkcióit, beállításait és parancsait. Bár a webes környezetben kevésbé dominánsak, mint a navigációs menük, alapvető működési elvük megegyezik: helytakarékosan, strukturáltan kínálnak fel opciókat.
Accordion (harmonika) menük és a legördülő menüvel való kapcsolata
Bár az accordion menü nem klasszikus legördülő menü, de hasonló elven működik: egy címke vagy fejléc kattintásra feltár egy rejtett tartalmi szekciót, majd egy újabb kattintásra visszacsukódik. Fő különbség, hogy az accordion menü általában nem választási lehetőségeket kínál, hanem részletesebb információkat rejt el. Gyakran használják GYIK (Gyakran Ismételt Kérdések) szekciókban, termékleírásokban vagy beállítási paneleken, ahol a felhasználó csak azokat a részleteket szeretné látni, amelyek aktuálisan érdeklik. Kapcsolatuk a legördülő menüvel abban rejlik, hogy mindkettő a progresszív felfedezés (progressive disclosure) elvét alkalmazza, azaz az információt csak akkor mutatja meg, amikor arra szükség van, csökkentve ezzel a kezdeti vizuális zajt és kognitív terhelést.
Minden típusnak megvannak a maga tervezési és fejlesztési kihívásai, de az alapvető céljuk közös: a felhasználó számára intuitív és hatékony módon biztosítani a választás és a navigáció szabadságát, miközben optimalizálják a rendelkezésre álló képernyőterületet.
A felhasználói élmény (UX) és a felhasználói felület (UI) szempontjai
A legördülő menük tervezésekor és implementálásakor a felhasználói élmény (UX) és a felhasználói felület (UI) szempontjai kulcsfontosságúak. Egy rosszul megtervezett menü frusztrációt okozhat, míg egy jól átgondolt változat jelentősen javíthatja a weboldal vagy alkalmazás használhatóságát és hatékonyságát.
A legördülő menük előnyei
A legördülő menük számos előnnyel járnak, amelyek indokolják széles körű elterjedésüket:
- Helytakarékosság: Képesek nagy mennyiségű opciót elrejteni, így a felület tisztább és kevésbé zsúfolt marad. Ez különösen értékes mobil eszközökön, ahol a képernyőterület korlátozott.
- Rendezett megjelenés: A rejtett opciók hozzájárulnak a vizuális minimalizmushoz és a letisztult dizájnhoz, ami javítja az oldal esztétikáját és olvashatóságát.
- Strukturált információkezelés: Lehetővé teszik a hierarchikus információk logikus és áttekinthető rendszerezését, ami segíti a felhasználókat a komplex tartalmak közötti tájékozódásban.
- Fókuszált interakció: Mivel az opciók csak akkor válnak láthatóvá, amikor a felhasználó aktívan keresi őket, a figyelem a releváns tartalomra irányulhat a menü inaktív állapotában.
- Ismerős mintázat: A legördülő menük az interneten és a szoftverekben olyannyira elterjedtek, hogy a felhasználók nagy része azonnal felismeri és tudja, hogyan kell használni őket, ami csökkenti a tanulási görbét.
A legördülő menük hátrányai és buktatói
Az előnyök mellett azonban számos hátrány és buktató is társul a legördülő menük használatához, amelyeket figyelembe kell venni a tervezés során:
- Rejtett információ: Az opciók alapállapotban rejtve vannak, ami csökkentheti a felfedezhetőséget. Ha a felhasználó nem tudja, hogy egy adott funkció létezik, vagy hol találja, könnyen elkerülheti a menüt.
- Extra kattintás/interakció: A felhasználónak egy extra lépést (kattintást vagy rámutatást) kell tennie az opciók megtekintéséhez, ami lassíthatja a folyamatot, különösen gyakran használt funkciók esetén.
- Kognitív terhelés: Túl sok opció egy legördülő menüben vagy túl sok egymásba ágyazott szint növelheti a kognitív terhelést és a döntési fáradtságot. A felhasználó elveszhet a lehetőségek tengerében.
- Rossz mobil élmény: A hagyományos legördülő menük gyakran nehezen kezelhetők érintőképernyőn, különösen, ha az elemek túl közel vannak egymáshoz. A kis célterületek (hitboxok) további problémákat okozhatnak.
- SEO kihívások: Bár közvetlenül nem befolyásolják a SEO-t, ha a fontos tartalmak csak mélyen elrejtett legördülő menükön keresztül érhetők el, az akadályozhatja a keresőrobotok feltérképezését és indexelését.
A láthatóság és felfedezhetőség kérdése
A felfedezhetőség (discoverability) kulcsfontosságú. Ha egy opció rejtve van, a felhasználóknak egyértelmű jelzést kell kapniuk arról, hogy ott van. Ezt vizuális jelzésekkel (pl. lefelé mutató nyíl ikon, három pont ikon, árnyékok), egyértelmű címkézéssel és a menü aktív állapotának egyértelmű visszajelzésével lehet elérni. A felhasználónak azonnal látnia kell, hogy valami „leereszthető”.
A láthatóság szempontjából pedig fontos, hogy a menü elemei jól olvashatóak legyenek, megfelelő kontraszttal és betűmérettel rendelkezzenek. A lenyíló lista ne takarjon el fontos tartalmat, és a felhasználó számára egyértelmű legyen, melyik elem van kiválasztva, vagy melyikre mutat rá az egér.
Kognitív terhelés és döntési fáradtság
A kognitív terhelés akkor merül fel, ha a felhasználónak túl sok információt kell feldolgoznia vagy túl sok döntést kell meghoznia. Egy hosszú legördülő lista, különösen, ha nincs logikusan csoportosítva vagy rendezve, gyorsan kimerítheti a felhasználó mentális erőforrásait. A döntési fáradtság (decision fatigue) pedig azt jelenti, hogy minél több döntést kell meghoznia valakinek, annál rosszabb minőségű döntéseket hoz, vagy annál inkább hajlamos lesz feladni a feladatot.
A kevesebb néha több. Egy legördülő menü akkor a leghatékonyabb, ha a lehetőségek száma áttekinthető, és a választás egyértelműen vezet a kívánt eredményhez.
Ennek elkerülése érdekében javasolt a menüpontok számának korlátozása (ideális esetben 5-7 elem, de maximum 10-12), a hasonló elemek csoportosítása, és szükség esetén a többszintű menük alkalmazása, de csak akkor, ha az indokolt és jól strukturált. Ha a lehetőségek száma túl nagy, alternatív UI elemek, például keresőmezővel ellátott szűrőrendszer vagy kategóriaoldalak lehetnek hatékonyabbak.
Visszajelzés és állapotjelzés
A felhasználói felületnek folyamatosan visszajelzést kell adnia a felhasználó interakcióiról. Egy legördülő menü esetében ez a következőket jelenti:
- Aktiválás visszajelzése: Amikor a felhasználó rákattint vagy rámutat a menüre, annak vizuálisan meg kell változnia (pl. háttérszín, árnyék, nyíl iránya), jelezve, hogy aktív.
- Kiválasztott elem jelzése: Ha a menü egy kiválasztó listaként működik (pl. `
- Rámutatás (hover) állapot: Az egérkurzorral való rámutatáskor a menüpontoknak vizuálisan meg kell változniuk, jelezve, hogy kattinthatók.
- Fókusz állapot: Billentyűzettel navigáló felhasználók számára a fókuszban lévő elemnek egyértelműen kiemeltnek kell lennie.
A megfelelő vizuális visszajelzések elengedhetetlenek ahhoz, hogy a felhasználó magabiztosan és hatékonyan használja a legördülő menüt, és elkerülje a téves kattintásokat vagy a frusztrációt.
Legjobb gyakorlatok a legördülő menük tervezésében és implementálásában
A legördülő menük hatékony és felhasználóbarát kialakításához számos legjobb gyakorlatot érdemes figyelembe venni. Ezek a tippek segítenek maximalizálni az előnyöket és minimalizálni a hátrányokat, javítva ezzel a teljes felhasználói élményt.
Egyszerűség és tisztaság
A menünek vizuálisan letisztultnak és könnyen értelmezhetőnek kell lennie. Kerüljük a túlzott díszítéseket, a felesleges animációkat és a zavaró elemeket. A lényeg a funkció és az olvashatóság. Egy egyszerű, konzisztens dizájn sokkal hatékonyabb, mint egy túlbonyolított, divatos, de nehezen használható menü.
Címkézés és szövegezés
A menüpontok címkéinek egyértelműnek, tömörnek és félreérthetetlennek kell lenniük. Használjunk olyan szavakat és kifejezéseket, amelyeket a célközönség azonnal megért. Kerüljük a szakzsargont, hacsak nem egy speciális szakmai közönségnek szól az oldal. A menü aktiváló elemének is egyértelműen jeleznie kell, mire számíthat a felhasználó (pl. „Válassz nyelvet”, „Kategóriák”, „Beállítások”).
Elemek sorrendje és csoportosítása
A menüpontok sorrendje logikus legyen. Gyakran alkalmazott elrendezések:
- Alfabetikus sorrend: Különösen hosszú listák esetén (pl. országok, városok).
- Frekvencia szerinti sorrend: A leggyakrabban használt opciók kerüljenek felülre.
- Logikai sorrend: Például időrendi sorrend (régebbitől újabbig), vagy fontosság szerinti sorrend.
- Csoportosítás: Hasonló elemeket csoportosítsunk vizuálisan (pl. elválasztó vonallal vagy alcímekkel), ha a lista hosszú. Ez segít a felhasználónak gyorsabban megtalálni a releváns opciókat.
A lenyílás módja és animációk
A menü lenyílása legyen gyors és reszponzív. A túl lassú animációk frusztrálóak lehetnek. Ugyanakkor egy finom animáció (pl. fade-in, slide-down) segíthet a felhasználónak észlelni a változást és a menü megjelenését. A menünek stabilan kell megjelennie, nem szabad „ugrálnia” vagy villognia. A lenyílás iránya általában lefelé van, de bizonyos esetekben (pl. ha nincs elég hely alul) felfelé vagy oldalra is nyílhat, ezt azonban egyértelműen jelezni kell.
Interakciós területek (hitboxok)
A menüpontok és az aktiváló elem kattintható területe (hitbox) legyen elegendően nagy, különösen mobil eszközökön. A túl kicsi célterületek frusztrációt okoznak, és pontatlan kattintásokhoz vezetnek. Az ajánlott minimális érinthető terület 48×48 pixel mobil eszközökön.
Hibakezelés és validáció (űrlapoknál)
Űrlapokhoz kapcsolódó legördülő listák esetén fontos a validáció. Ha egy mező kötelező, és a felhasználó nem választott ki semmit, egyértelmű hibaüzenetet kell kapnia. Ha a kiválasztott opció valamilyen más mező tartalmától függ (pl. megye kiválasztása után városok listája), akkor a menünek dinamikusan frissülnie kell, és egyértelműen jeleznie kell a betöltést vagy a frissítést (pl. egy loading spinnerrel).
Keresési funkciók integrálása
Ha a legördülő listában nagyon sok opció van (pl. több száz ország), érdemes keresőmezőt integrálni a lenyíló listába. Ez lehetővé teszi a felhasználó számára, hogy gépeléssel szűkítse a listát, és gyorsabban megtalálja a kívánt elemet. Ez drámaian javíthatja a felhasználói élményt hosszú listák esetén.
A fent említett gyakorlatok alkalmazásával a legördülő menük nem csak funkcionálisak, hanem a felhasználói élményt is gazdagító, intuitív elemekké válhatnak, amelyek hozzájárulnak a weboldal vagy alkalmazás sikeres működéséhez.
Hozzáférhetőség (Accessibility) és a legördülő menük
A hozzáférhetőség (accessibility), vagy röviden a11y, azt jelenti, hogy a weboldalakat és alkalmazásokat mindenki, beleértve a fogyatékkal élő embereket is, képes legyen használni és megérteni. A legördülő menük tervezésekor és fejlesztésekor a hozzáférhetőség kiemelten fontos szempont, hiszen ezek az elemek gyakran a navigáció vagy a kulcsfontosságú interakciók alapját képezik.
WCAG irányelvek és a legördülő menük
A Web Content Accessibility Guidelines (WCAG) egy nemzetközi szabvány, amely iránymutatásokat ad a webes tartalmak hozzáférhetővé tételéhez. A legördülő menükre vonatkozóan több WCAG elv is releváns:
- Perceivable (Felfogható): A tartalomnak felfoghatónak kell lennie minden felhasználó számára. Ez azt jelenti, hogy a menüpontoknak elegendő színkontraszttal kell rendelkezniük a háttérhez képest, és a betűméretnek is megfelelőnek kell lennie. A menü állapotát (nyitott/csukott, kiválasztott elem) vizuálisan és programozottan is jelezni kell.
- Operable (Működtethető): A felhasználóknak képesnek kell lenniük a menü működtetésére különböző beviteli eszközökkel, nem csak egérrel. Ez magában foglalja a billentyűzetes navigációt, az érintőképernyős vezérlést és a segítő technológiákkal való kompatibilitást.
- Understandable (Érthető): Az információnak és a felhasználói felület működésének érthetőnek kell lennie. A menüpontok címkéinek egyértelműnek és következetesnek kell lenniük. A felhasználónak tudnia kell, mi fog történni, ha kiválaszt egy elemet.
- Robust (Robusztus): A tartalomnak stabilnak és kompatibilisnek kell lennie a különböző böngészőkkel, eszközökkel és segítő technológiákkal, ahogy azok fejlődnek.
ARIA attribútumok használata
A Accessible Rich Internet Applications (ARIA) szabvány egy sor attribútumot definiál, amelyekkel a HTML elemekhez további szemantikai információ adható, különösen a dinamikus és interaktív UI komponensekhez. Ezek az attribútumok segítenek a segítő technológiáknak (pl. képernyőolvasók) értelmezni a komplex felületi elemeket.
Legördülő menük esetében kulcsfontosságú ARIA attribútumok:
- `role=”button”` vagy `role=”combobox”`: A trigger elem szerepének definiálása.
- `aria-haspopup=”true”`: Jelzi, hogy az elem egy felugró menüt vagy listát nyit meg.
- `aria-expanded=”true”` vagy `false`: Jelzi, hogy a menü aktuálisan nyitva van-e vagy zárva. Ezt dinamikusan frissíteni kell JavaScripttel.
- `aria-controls=”id_of_menu_list”`: Összekapcsolja a trigger elemet a menü listájával (annak azonosítójával).
- `role=”menu”`, `role=”menuitem”`, `role=”menuitemcheckbox”`, `role=”menuitemradio”`: A lenyíló lista és az egyes menüpontok szerepének definiálása.
- `aria-labelledby=”id_of_label”`: Összekapcsolja a menüt egy látható címkével.
- `aria-activedescendant=”id_of_active_item”`: Dinamikusan frissül, jelezve, melyik menüpont van éppen fókuszban (billentyűzetes navigáció során).
Ezek az attribútumok lehetővé teszik a képernyőolvasók számára, hogy pontosan tájékoztassák a felhasználókat a menü állapotáról, a navigációs lehetőségekről és a kiválasztott elemekről.
Billentyűzetes navigáció
Minden legördülő menünek teljes mértékben navigálhatónak és működtethetőnek kell lennie billentyűzetről, egér használata nélkül. Ez magában foglalja:
- Tab gomb: A Tab gombbal el kell érni a menü aktiváló elemét.
- Enter/Szóköz gomb: Ezen gombokkal kell aktiválni (kinyitni/bezárni) a menüt.
- Fel/Le nyilak: A lenyíló listában a menüpontok között a Fel és Le nyilakkal kell tudni mozogni.
- Esc gomb: Az Esc gombbal be kell tudni zárni a menüt, és a fókusz vissza kell, hogy ugorjon az aktiváló elemre.
- Home/End gomb: Hosszú listák esetén a Home gombbal az első, az End gombbal az utolsó elemre kell ugrani.
- Betűk gépelése: Ha a menü kiválasztó listaként működik (pl. országválasztó), a felhasználónak be kell tudnia gépelni az első betűt, hogy a megfelelő opcióra ugorjon.
Képernyőolvasók támogatása
A képernyőolvasók (pl. JAWS, NVDA, VoiceOver) a weboldal tartalmát felolvasva segítik a látássérült felhasználókat. Egy jól hozzáférhető legördülő menü esetében a képernyőolvasónak képesnek kell lennie:
- Bejelenteni, hogy egy legördülő menü van fókuszban.
- Közölni a menü címkéjét vagy célját.
- Jelezni, hogy a menü nyitva van-e vagy zárva.
- Felolvasni a menüpontokat, ahogy a felhasználó navigál közöttük.
- Jelezni, ha egy elem ki van választva.
Ez az ARIA attribútumok pontos használatával és a megfelelő HTML szemantikával érhető el.
Fókuszkezelés és fókuszsorrend
A fókuszkezelés kritikus a billentyűzetes és segítő technológiát használó felhasználók számára. Amikor a menü kinyílik, a fókusz automatikusan az első menüpontra vagy egy logikus alapértelmezett elemre kell, hogy ugorjon. Amikor a menü bezáródik (akár kiválasztással, akár Esc-vel), a fókusz vissza kell, hogy térjen arra az elemre, amelyik aktiválta a menüt. A tabulátor sorrendnek logikusnak kell lennie az egész oldalon.
Színkontraszt és olvashatóság
A WCAG 2.1 szabvány legalább 4.5:1 kontrasztarányt ír elő a szöveg és a háttér között a normál méretű szövegeknél, és 3:1 arányt a nagy szövegeknél és a felhasználói felület komponenseknél. Ez biztosítja, hogy a menüpontok jól olvashatóak legyenek a gyengénlátó felhasználók számára is. Emellett a betűméretnek is megfelelőnek kell lennie, és kerüljük a túl vékony betűtípusokat, amelyek nehezen olvashatóak.
A hozzáférhetőségi szempontok integrálása a tervezési és fejlesztési folyamatba nem utólagos feladat, hanem alapvető fontosságú. Egy hozzáférhető legördülő menü nemcsak a fogyatékkal élők számára teszi lehetővé az oldal használatát, hanem általánosságban is javítja a felhasználói élményt mindenki számára, hiszen a jó hozzáférhetőségi gyakorlatok gyakran jobb használhatósági gyakorlatok is egyben.
Technikai megvalósítás: HTML, CSS és JavaScript
A legördülő menük technikai megvalósítása a webes környezetben alapvetően három technológiai pilléren nyugszik: a HTML biztosítja a struktúrát és a szemantikát, a CSS felel a vizuális megjelenésért és az animációkért, a JavaScript pedig az interaktivitásért és a dinamikus viselkedésért.
Alapvető HTML struktúrák
A legördülő menük HTML struktúrája a menü típusától függően változhat. A két leggyakoribb eset a natív `
Natív `
Ez a legegyszerűbb forma, amelyet böngészők natívan kezelnek:
<label for="orszag">Ország:</label>
<select id="orszag" name="orszag">
<option value="">Válasszon országot</option>
<option value="hu">Magyarország</option>
<option value="de">Németország</option>
<option value="at">Ausztria</option>
</select>
Ez az elem alapvetően hozzáférhető, de a stílusozási lehetőségei korlátozottak.
Egyedi (CSS/JS alapú) navigációs menü:
Ez a típus sokkal nagyobb rugalmasságot biztosít a dizájnban és a funkcionalitásban. Gyakran használják `