Menü megnyitása és menü bezárása – Gyakorlati útmutató az akadálymentes váltó navigációs felhasználói felülethez

Kezdje egy egyértelműen címkézett “Menü megnyitása” gombbal, amely közvetlenül egy látható panelt vezérel. Csatolja az `aria-expanded` tulajdonságot az állapot tükrözésére, és az `aria-controls` tulajdonságot a panelre való hivatkozáshoz. Kezelje az akadálymentesítési forrást élő útmutatóként, és helyezze az kapcsolót a fejlécbe a lábléc szintjén, hogy a billentyűzetről navigáló felhasználók minden eszközön gyorsan elérhessék. Használjon egyszerű címkét, mint például "Menü", és kerülje a zsúfoltságot, amely elrejti a műveleteket; ez egy olyan minta, amelyet még egy Yosemite felhasználói felületen is alkalmazhat, ahol az egyértelmű navigáció fontos.

Amikor a panel megnyílik, rögzítse a fókuszt belülre, és helyezze közvetlenül az első fókuszálható elemre. Az Escape bezárja a panelt és visszaállítja a fókuszt a váltókapcsolóra. Tartsa nyugodtan a váltókapcsoló és a menü közötti elrendezést, és biztosítson egyértelmű fókuszgyűrűt, valamint nagy kontrasztú opciót. Kerülje a "hetch" stílusú rendetlenséget a minimális átmenetek és a panelnek a fejléc körüli kiszámítható mozgásának fenntartásával, és ügyeljen arra, hogy a fókusz ne essen a panel mögé, hogy a felhasználói élmény állandó és nyugodt maradjon.

Csomagolja be a panelt egy navigáció leíróval rendelkező régió aria-label és az elemeket egyszerű listaként jelenítse meg. Minden egyes elem egy billentyűzetről elérhető gomb vagy hivatkozás, és a felhasználók a nyilakkal navigálhatnak az elemek között; továbbá a Bezárás vezérlőnek láthatónak és közvetlenül elérhetőnek kell lennie, és a panel kiteregethet aria-hidden állítsd zárt állapotba, hogy a képernyőolvasók ne jelentsék be a rejtett tartalmat. Tartsd a kódot egyszerűen, és használj egyetlen erőforrást minden oldalhoz; ez biztosítja a legmagasabb szintű konzisztenciát az útvonalak és az eszközök között.

Tesztelj valós kisegítő technológiákkal és kizárólag billentyűzetet használó felhasználókkal. Kövess olyan mutatókat, mint a megnyitás/bezárás ideje, a sikerráta, és a forgalomra gyakorolt hatás a minta bevezetése után. Ne felejts el felelősségteljesen implementálni, hogy elkerüld a jelentős elrendezés-átrendeződést vagy akadozást. Használj egy kis, újrafelhasználható mintaerőforrást, és fogadd el a 'visita' elnevezési konvenciót a tervezési rendszeredben, hogy egységesítsd a kapcsolót az oldalakon. A mintának működnie kell világos vagy sötét témákkal, és meg kell őriznie a nyugalmat még a zsúfolt oldalakon is, egy katedrális-szerű fejléc megőrzésével, és elkerülve a zavaró mozgásokat, árnyékokat vagy hirtelen változásokat.

Tegyél apró lépéseket: auditalj egy oldalt, majd skálázd át másokra egy egységes dizájnnyelvvel. Mint a túravezetők, akik végigvezetnek egy ösvényen, vezessétek a fejlesztőket és a tervezőket egy megosztott erőforrással, amely elmagyarázza a Nyitott/Zárt állapotokat minden szinten. Tartsátok az interakciót kiszámíthatónak a különböző nézetméretek és a kapcsoló körüli tartalom tekintetében, hogy a webhelyet látogató felhasználók egységes élményt kapjanak. Ezek a kis kiigazítások emelik a használhatósággal kapcsolatos legmagasabb elvárásaitokat, és segítenek kiegyensúlyozni a forgalmat, a tipográfiát és az elrendezést, miközben Yosemite-t, katedrális-horgonyokat és nyugodt, barátságos interakciókat terveztek. A ti csapat fontos, hogy ezeket a mintákat egy élő stílus útmutatóban tartsuk fenn, és rendszeresen teszteljük valódi felhasználókkal, hogy finomítani tudjuk a viselkedést, beleértve azokat is, akik nagy kontrasztú témákat és képernyőolvasókat használnak.

Gyakorlati minták hozzáférhető menükapcsolókhoz

Javaslat: Használjon egyetlen, egyértelműen megjelölt gombot a menükapcsolóként, az aria-expanded és aria-controls pedig mutasson a menütartályra; ez azonnali, képernyőolvasóbarát visszajelzést nyújt, és eszközökön átívelően működik.

Helyezze a menüt egy natív nav elembe aria-label attribútummal, és helyezze el a fejléc alatt, hogy a felhasználók gyorsan megtalálják. Kövesse ezt az irányelvet azáltal, hogy becsukott állapotban aria-hidden attribútummal jelöli a panelt, és kinyitáskor eltávolítja a rejtett állapotot, biztosítva, hogy a nagy és kis képernyők következetesek és hozzáférhetőek maradjanak.

Kezelőfelület minta billentyűzetről való használatra: támogatja az Enter és a Szóköz billentyűket a váltáshoz, a Mentés billentyűt a bezáráshoz, és a Tabulátort a vezérlők közötti navigáláshoz. Amikor a panel megnyílik, a fókuszt az első fókuszálható elemre helyezze; amikor bezárul, helyezze vissza a fókuszt a váltó gombra. Ez a négylépéses megközelítés segíti a felhasználókat abban, hogy magabiztosan mozogjanak a kontextus elvesztése nélkül.

Fókusz és állapotkezelés: tartson látható fókuszgyűrűt, jelezze az állapotváltozásokat, és kerülje el a csapdákat az oldalon. Ha a felhasználó a panelen kívül kattint, vagy átméretezi az ablakot, finoman zárja be a menüt, és állítsa vissza a fókuszt a kapcsolóra, hogy a felhasználók zavartalanul folytathassák onnan.

Vizuális és interakciós jelzések: nagy kattintási felületet biztosítson a kapcsolóhoz, tartsa fenn a magas színkontrasztot, és ikonok mellett szöveges címkét is kínáljon. Kedvezmények esetén gondoskodjon arról, hogy a panel négy különböző nagyítási szinten is olvasható maradjon, és a animációk tiszteletben tartsák a csökkentett mozgás preferenciáit; itt a legnagyobb áttekinthetőség győzedelmeskedik, és az egyszerű, lépésenkénti sorrend megjósolhatóvá teszi a kimeneteleket.

Tesztelés és kontextus: futtasson ellenőrzéseket képernyőolvasókkal, teszteljen ahwaneechee és visita stílusú forgatókönyvekben, és győződjön meg róla, hogy a felhasználó bárhonnan elérheti az oldalt, és továbbra is tudja működtetni a menüt. Készítsen utólagos összefoglalót gyakorlati tudnivalókkal és négy konkrét mérőszámmal: megnyitási idő, bezárási idő, tabulátor-megállók száma és a sikeres bezárási arány Esc billentyűvel; ez az összefoglaló segít finomítani a megvalósítást, és ajánlásokat megosztani a csapattal, foglaljon időt felhasználói tesztelésre, ha szükséges.

Elvihető: tartsa be ezeket az irányelveket egyértelmű váltókapcsolóval, robusztus fókuszkezeléssel és hozzáférhető címkézéssel, akkor jelentős javulást fog tapasztalni a használhatóságban, valamint gyorsabb és magabiztosabb interakciókat, függetlenül az eszköztől vagy a képességektől.

Billentyűzetről hozzáférhető Nyitás és zárás vezérlők

Használjon egyetlen, jól láthatóan címkézett gombot, amely az aria-expanded és aria-controls attribútumokkal kapcsolja a menüt. Nyomja meg az Enter vagy a szóköz billentyűt a menü megnyitásához vagy bezárásához, majd az Escape billentyűvel térjen vissza a fókusz a kioldó elemhez. Ez a minta kivitelezhető, gyorsabbá teszi a navigációt, és hónapokon át tartó tesztelés során, különféle eszközökön bizonyítottan jól működik, soha nem kényszerítve a felhasználókat egér használatára.

1. Trigger elem: Használjon valódi gombot stabil azonosítóval és egy menüre mutató aria-controls referenciával. A címkének tükröznie kell a műveletet és az állapotot; fontolja meg a címke vagy az aria-label cseréjét a menü megnyitásakor. Példa jelölés (escapingelve):

   Menü megnyitása

2. Menü konténer és szerepkörök: Csomagolja a tételeket egy navigációs régióba, és tegye elérhetővé őket menüként. A menü elrejtése, amikor zárva van (hidden vagy aria-hidden). Példa jelölőre (escape-elt):

3. Billentyűzet viselkedése: Kiszámítható vezérlők engedélyezése. Az Enter vagy a Szóköz megnyomásával lehet a menüt megnyitni/bezárni; a Menekülés gombbal lehet bezárni. Ha függőleges listát használ, a Fel/Le nyilak mozgatják a fókuszt az elemek között; az Otthon/Vég ugranak az első vagy utolsó elemre. A menü megnyitása során valósítson meg egy egyszerű fókuszcsapdát, hogy a fókuszt bent tartsa.

4. Fókuszkezelés és tesztelés: Nyitáskor fókuszálja a menün belüli első fókuszálható elemet; záráskor helyezze vissza a fókuszt a triggerre. Tesztelés valós körülmények között: augusztusban a backcountry útvonalak térképein, intenzív környezetben és Amerikában eszközökön keresztül. Biztosítsa, hogy a peremek és a legmagasabb pontok tiszták legyenek, és soha ne felejtse el érthető nevű címkékkel ellátni az elemeket. Ha olyan címke jelenik meg, mint a „WC”, cserélje le egyértelmű kifejezésre a félreértések elkerülése érdekében; ossza meg a vezérlő célját minden felhasználóval.

Extra tippek: adjon leíró címkéket minden elemhez (Kaland, Térképek, Visszabeszélés, Magasság, Perem). Kerülje a szlenghez hasonló szakzsargont, tartsa a kifejezéseket konkrétan és világosan. Tartsa a válaszidőket melegen és egyenletesen, és biztosítsa, hogy az interakció kábelekkel, hardveres billentyűzetekkel és érintőképernyős eszközökkel is működjön. Ez a megközelítés segít az embereknek magabiztosságot szerezni és hatékonyan elvégezni a feladatokat, még zsúfolt helyeken vagy zord környezetben is.

ARIA szerepkörök, állapotok és tulajdonságok menükapcsolókhoz

Indíts egy natív gombbal a kapcsolóként, és kösd össze az ARIA attribútumokkal: aria-expanded=”false”, aria-controls=”menu1”, és aria-haspopup=”menu”. Tartsd a kezdeti állapotot zártan, és csak akkor nyisd meg a menüt, amikor a felhasználó aktiválja a gombot; majd állítsd az aria-expanded értéket ”true“-ra, jelenítsd meg a menüt, és vidd a fókuszt az első elemre. Bezáráskor állítsd vissza az aria-expanded értéket ”false”-ra, és vidd vissza a fókuszt a kapcsolóra.

Rendeld hozzá a ”menu” szerepkört a tartóelemhez és a ”menuitem” szerepkört minden opcióhoz; kösd a menüt a kapcsolóhoz az ”aria-labelledby" segítségével, és gondoskodj arról, hogy minden elem rendelkezzen "tabindex='-1'" értékkel, hogy a szkript programozottan tudjon fókuszálni.

Billentyűzetvezérlők: Fel és Le nyilak a fókusz mozgatásához az elemek között; Kezdő és Vég gombokkal az első vagy utolsó elemhez ugorhat; Esc lenyomásával bezárható a menü; Tab lenyomásával a fókuszt az oldalra helyezheti.

Állapotkezelés: Tartsa az aria-hidden=”true” értéket a menün, amikor az csukva van, és az aria-hidden=”false” értéket, amikor nyitva van; biztosítsa, hogy az aria-expanded tükrözze a tényleges láthatóságot; frissítse a címkét szükség szerint a jelenlegi állapot tükrözésére, és biztosítson következetes visszajelzést az idők során.

Tesztelés és megfontolások: Tesztelés képernyőolvasókkal eszközökön keresztül; ellenőrizze, hogy a fókusz megnyitáskor az első elemre kerüljön, és bezáráskor visszatérjen a kapcsolóhoz; multi-eszközös beállításokon ellenőrizze, beleértve a térképeket és útvonal opciókat; biztosítsa, hogy a legnagyobb menük navigálhatóak és robusztusak maradjanak az interfész változásai esetén.

Egy olyan világban, ahol az utazók többnapos tervvel érkeznek, használjon egy váltókapcsolót, amely megnyit egy kötelező látnivalók, engedélyek és útvonalválasztási lehetőségek listáját. Kösse össze a címkét az aria-labelledby attribútummal, tegye láthatóvá a menüt a role=”menu” attribútummal, és rendeljen minden opcióhoz role=”menuitem” attribútumot. Minden elem képviselhet egy utazást vagy kerékpáros opciót, és mutathat térképekre részletekkel. Ez a beállítás lehetővé teszi az árváltozások vagy a rendelkezésre állás változásainak kezelését a fókuszsorrend megszakítása nélkül, és skálázható a legnagyobb menükig. Ezek a tételek magukba foglalhatnak kötelező túrákat, felfedezendő völgyeket és fürdőhelyeket; ha egy felhasználó nem tud dönteni, kínáljon egyszerű szűrést. A nyitott állapot frissítéseinek tükrözniük kell a felhasználói választásokat, így az évek során következetes interakció tanúi lehetünk. A kalandtervezés zökkenőmentesebbé válik, ha a navigáció kiszámítható marad.

Fókuszkezelési stratégiák a váltás közbeni átmenetek során

Ajánlás: A fókusz beállítása a megnyitott panelen belüli első interaktív elemre a váltás után egy képkockán belül. Ha nincs ilyen, a fókusz áthelyezése a panel fejlécére, és az `aria-expanded` frissítése az állapotnak megfelelően. Ez a megközelítés kiszámítható útvonalat biztosít a felhasználó számára, és lehetővé teszi a tájékozódást olyan helyzetekben, mint például csak billentyűzetes használat vagy képernyőolvasók. Általánosságban tartsa a fókusz áramlását lineárisnak, és kerülje a nem kapcsolódó vezérlőkhöz való ugrást. Ez segít a felhasználónak abban, hogy magabiztosan nézzen szembe a változással.

Amikor egy panel megnyílik, tartsa a fókuszt a panelon belül, hogy a felhasználók ne tudjanak a kapcsoló mögötti elemekre tabulálni. Rögzítse azt az elemet, amelyen a fókuszt tartotta a kapcsoló előtt (a kapcsoló utáni horgony), és állítsa vissza a bezáráskor. Ez a fókusz essen kívül esés csökkenti a kognitív terhelést, és megakadályozza a zavaró mozgásokat az aktivitás során. Biztosítson látható fókuszgyűrűt, és fontolja meg az aria-live frissítéseket a dinamikus tartalomhoz.

Tartson logikus fület a belső vezérlők számára, és kínáljon átugrási lehetőségeket, ha a panel hosszadalmas tartalmat tartalmaz. Ha a felhasználó lenyomja az Escape billentyűt, zárja be, és adja vissza az elemet a kapcsoló utáni elemre. Adjon egyértelmű címkéket a panelen belüli hivatkozásokhoz, hogy az utazók gyorsan megtalálják a megfelelő lehetőséget. Tartalmazzon lehetőségeket a média szüneteltetésére vagy átugrására, és tartsa a videóvezérlőket elérhetővé, hogy a videók ne fogják le a fókuszt.

Tesztelj sok felhasználóval különböző körülmények között: billentyűzet, érintőképernyő és képernyőolvasó. Mérd meg, mennyi időbe telik a fókusz visszanyerése minden egyes váltás után, és győződj meg róla, hogy a fókusz a panelen belül marad az átmenetek során. Gyűjts visszajelzéseket az általános használhatóságról, valamint a magas kontrasztú módokban vagy zsúfolt elrendezésekben tapasztalt problémákról. Nagyszerű alapszint eléréséhez futtasd a teszteket délután, és hasonlítsd össze az eredményeket a korábbi iterációkkal.

Képzeljen el egy gyakorlati forgatókönyvet egy utazási webhelyen, például a Mariposa vagy egy magashegyi útikalauznál. A panel útvonalakra, étkezési lehetőségekre és oda-vissza utazási ötletekre mutató hivatkozásokat jeleníthet meg. Tartsa stabilan a fókuszt, amikor a felhasználók délután medvékkel vagy vadon élő állatokkal kapcsolatos panelre kattintanak. Ha a panel plakátokat vagy videókat tartalmaz, győződjön meg róla, hogy a fókusz visszatér egy értelmes vezérlőelemre a lejátszás szüneteltetése után. Az egész rendszernek koherensnek kell lennie, rengeteg kontextussal kell irányítania a felhasználókat, és egyértelmű arccal kell rendelkeznie az elejétől a végéig azoknak az első látogatóknak, akik lehetőségeket szeretnének felfedezni és folytatni utazásukat.

Képernyőolvasó értesítések: Élő területek és bejelentések

Ajánlás: Helyezd a dinamikus felhasználói felületi frissítéseket egy élő régióba, és válaszd meg gondosan az aria-live értékeket: az aria-live=”polite” értéket a nem sürgős változásokhoz, az aria-live=”assertive” értéket pedig az azonnali bejelentést igénylő változásokhoz. Biztosítsd, hogy a váltó gomb frissítse a régiót, amikor megnyit vagy bezár egy menüt, így a képernyőolvasók zökkenőmentesen működnek extra kattintások nélkül.

Tény: Az élő régiók akkor is bejelentik a frissítéseket, ha a fókusz elmozdul. Használja az aria-atomic=”true” attribútumot, hogy a teljes üzenet kerüljön felolvasásra a részleges töredékek helyett, és győződjön meg arról, hogy a régió nyelve és szerepköre be van állítva (például: role=”status” vagy role=”region”).

Ajánlások: tartsa az üzeneteket tömören (egy-két mondat), és adja meg a kontextust, mint például a vezérlő neve és az új állapot (Menü megnyitva; Menü bezárva). Ha lehetséges, használja újra az 53-as sztringet az élő régió azonosítójaként, hogy elkerülje az ismétlődést és biztosítsa, hogy a frissítések a megfelelő elemre irányuljanak. Párosítsa a kapcsolódó üzeneteket, hogy elkerülje a félreértéseket és a felhasználókat összezavaró magyarázatokat. Vegyen figyelembe más vezérlőket és forgatókönyveket a szélesebb körű használhatóság érdekében.

Implementációs tippek: helyezze az élő régiót a kioldó elem alá, párosítsa a kioldót az aria-controls tulajdonsággal, és állítsa be a megfelelő aria-expanded tulajdonságot. Frissítse az élő régiót minden állapotváltozáskor: “Menü megnyitva” és “Menü bezárva”. Ez a megközelítés segíti az olvasókat a bonyolult felületeken, és képes kezelni más vezérlők frissítéseinek zuhatagát.

Tesztelés és valós használat: ellenőrizze NVDA, VoiceOver és TalkBack segítségével. Futtassa az offline demókat, figyelje meg, hogyan olvassa fel a frissítéseket az egyszerű oldalokon, és állítsa be az időzítést a várakozás csökkentése érdekében. Ezenkívül hozzon létre egy fresnói túrázással foglalkozó blog forgatókönyvet, ahol az élő régió a “Túrautak betöltve” és a “Túratippek frissítve” üzeneteket jelenti be, hogy megmutassa, hogyan lesznek felolvasva a túrautakkal, tippekkel és térképekkel kapcsolatos tartalmak. Használjon zöld színjelzést és barátságos nyelvezetet, hogy mindenki otthon érezze magát, a képernyő alatti tartalom pedig akkor legyen felolvasva, amikor relevánssá válik. Remélem, hogy a csapata átveszi ezt a megközelítést, gondoljon rá úgy, mint egy gyakorlati tippre bloggereknek és alkalmazásoknak egyaránt.

Gyors ellenőrzőlista: végezz gyors átvizsgálást az összes dinamikus panelen, gondoskodj róla, hogy a string53 maradjon a stabil azonosító, és dokumentáld az élő régió stratégiádat, valamint tippeket a jövőbeli iterációkhoz.

Érintés, mutató és kis célterületek mobil eszközökön

A főmenü váltó legyen legalább 44×44 CSS pixeles érintési területtel, minden szomszédos céltől legalább 8 px távolsággal. Ez a szabály a töréspontokon átível, így egy kézzel is megbízható marad a használat, amikor a hüvelykujj eléri a szélét egy tioga-nézetű telefonon egy tavaszi naplemente túra során.

Növeld a találati területeket gomb-elemre alkalmazott margóval, ne az ikon zsugorításával. Tartsd a látható címkét olvashatóan legalább 16 képpontos betűmérettel és 1,4-es sortávolsággal. Már egy kis extra margó is segít, és ez a megközelítés költséghatékony, miközben jobb akadálymentesítést biztosít az ujj- vagy fogáskorlátozásokkal élő felhasználók számára. Ez a kis változtatás jól működik minden terv esetében, és kiszámíthatóbb érintéseket tesz lehetővé.

A tapintásra és mutatóeszközre tervezés egyértelmű célpontokat és kiszámítható viselkedést igényel. Hagyjon legalább 8 képpontnyi helyet a célpontok között; a gyökérszintű kapcsolók a tartalom teteje közelében helyezkedjenek el, hogy könnyen elérhetőek legyenek a zsúfolt területektől távol. Adjon hozzá egy explicit stop műveletet a panelek egyértelmű koppintással történő összecsukásához, és használja az aria-expanded és aria-controls attribútumokat az állapot tükrözésére. Tartsa a felhasználói interakciót konzisztensnek, hogy elkerülje a téves koppintásokat, és akadályozza meg a téves koppintásokat intenzív használat során; ez a stabilitás fontos azoknak a felhasználóknak, akik gyakran támaszkodnak a gyors, szándékos koppintásokra a forgalmas pillanatokban.

A kisegítő lehetőségek attribútumai számítanak: gondoskodjon a billentyűzetet használók számára látható fókuszgyűrűről, adjon meg aria-címkéket, hogy az ikonok jelentést hordozzonak, és feleljen meg a színkontraszt irányelveinek (4,5:1). Támogassa az érintést és az egeret is mutatóesemények implementálásával, és biztosítson redundáns szöveges címkét a csak ikonokat tartalmazó gombokhoz a véletlen koppintások vagy a napfényben vagy világos égbolton való zavar elkerülése érdekében. Tartsa a leállítási gesztust kiszámíthatónak, hogy megakadályozza a véletlen bezárásokat, amelyek megzavarják a kisegítő lehetőségeket az asztali géptől távoli helyzetekben.

Tesztelés és validálás: tesztelés iPhone és Android eszközökön, különböző képernyőméretekkel és körülményekkel. Mérje a koppintások sikerességét, a navigációs mélység koppintásait és a mellékoppintásokat. Törekedjen 95%-os sikerességi arányra tipikus használat esetén; szükség esetén állítsa be a találati terület méretét. Ez a terv költséghatékony és skálázható; használja újra a CSS változókat, hogy ugyanazt a méretezést alkalmazza az alkalmazásban, így több időt fordíthat a finomításra valós felhasználókkal, mint az újjáépítésre. Mindig vonjon be különböző igényű és kontextusú felhasználókat, beleértve a túrázókat és az utazókat, hogy biztosítsa, az élmény olyan helyeket is lefedjen, mint Muir, Tuolumne, Tioga, Vernal, naplemente kilátások számos eszközön.

Megvalósítási gondolkodásmód: a mobil navigációt úgy kezeljük, mint egy tömör utazást a legfontosabb helyekre – Muir, Tuolumne, Tioga, Vernal és naplemente kilátók. Alkalmazzunk egyetlen, következetes mintát az összes kapcsolóhoz, és biztosítsunk egyértelmű visszalépési vagy bezárási lehetőséget egy almenü megnyitásakor. A cél a türelem növelése és a súrlódás csökkentése, hogy a felhasználók mindig érezzék az irányítást, és soha ne maradjanak le semmiről. Ez az örökzöld megközelítés jobb a hozzáférhetőség szempontjából, és több felhasználót is támogathat utazási körülmények között, segítve az utazások megtervezését, az élvezet eltöltését a kilátásokban, és a string53 referenciacímkeként való megtartását a tesztelő eszközökben a folyamatos ellenőrzésekhez. Ez a megközelítés továbbra is örökzöld, költséghatékony és készen áll az utazásra.