Akadálymentes alkalmazás létrehozása

Cikk
08/05/2024

Az internetezők 20%-ának szüksége van akadálymentes webalkalmazásokra. Ezért fontos, hogy az alkalmazás úgy legyen kialakítva, hogy bármely felhasználó könnyen használhassa. Ahelyett, hogy az akadálymentességet feladathalmazként tekintenél, gondoljon rá az általános felhasználói élmény részeként. Minél akadálymentesebb az alkalmazás, annál többen használhatják.

Ha olyan gazdag interaktív tartalmakról van szó, mint a térkép, néhány gyakori akadálymentességi szempont:

A képernyőolvasó támogatása olyan felhasználók számára, akik nehezen látják a webalkalmazást.
A webalkalmazással , például az egérrel, az érintéssel és a billentyűzettel való interakcióra és navigálásra több módszer is használható.
Győződjön meg arról, hogy a színkontraszt olyan, hogy a színek nem keverednek össze, és nehezen különböztethetők meg egymástól.

Az Azure Maps Web SDK előre összeállított akadálymentességi funkciókkal rendelkezik, például:

A képernyőolvasó leírja, hogy mikor mozog a térkép, és mikor összpontosít a felhasználó egy vezérlőre vagy előugró ablakra.
Az egér, az érintés és a billentyűzet támogatása.
Akadálymentes színkontraszt támogatása az ütemterv stílusában.
Kontrasztos támogatás.

Az akadálymentességi megfelelőségről az összes Microsoft-termékre vonatkozóan lásd : Akadálymentességi megfelelőségi jelentések. Keressen rá az "Azure Maps web" kifejezésre, és keresse meg a dokumentumot kifejezetten az Azure Maps Web SDK-hoz.

Navigálás a térképen

A térkép többféleképpen is nagyítható, pásztázható, elforgatható és dobható. Az alábbi ábra részletesen ismerteti a térképen való navigálás különböző módjait.

A térkép nagyítása

Egérrel kattintson duplán a térképre egy szint nagyításához.
Egérrel görgetheti a kereket a térkép nagyításához.
Érintőképernyővel érintse meg a térképet két ujjal, és csippentsen össze, hogy kicsinyítse vagy szétterjessze az ujját a nagyításhoz.
Érintőképernyő használatával koppintson duplán a térképre egy szint nagyításához.
A térkép fókuszában a Plus (+) vagy az Equals () jel (=) használatával nagyíthat egy szintet.
A térkép fókuszában a mínuszjel, a kötőjel (-) vagy az aláhúzásjel (_) használatával kicsinyíthet egy szintet.
A nagyítási vezérlővel egérrel, érintéssel vagy billentyűzettel,vagy billentyűk beírásával.
Nyomja le és tartsa lenyomva a Shift gombot, és nyomja le a bal egérgombot a térképen, és húzással rajzoljon ki egy területet a térkép nagyításához.
Néhány többérintésű párna használatával húzza fel két ujját a nagyításhoz, vagy lefelé a nagyításhoz.

A térkép pásztázása

Egérrel nyomja le a bal egérgombbal a térképen, és húzza a kívánt irányba.
Érintőképernyővel érintse meg a térképet, és húzza az alakzatot tetszőleges irányba.
A térkép fókuszában a nyílbillentyűkkel helyezze át a térképet.

A térkép elforgatása

Egérrel nyomja le a jobb egérgombbal a térképen, és húzza balra vagy jobbra.
Érintőképernyővel két ujjal érintse meg a térképet, és forgassa el.
A térkép fókuszában a shift billentyűt és a balra vagy jobbra mutató nyílbillentyűket használhatja.
A forgatási vezérlő egérrel, érintéssel vagy billentyűzettel történő bevitelével/billentyűk beírásával.

A térkép felosztása

Az egérrel nyomja le a jobb egérgombbal a térképen, és húzza felfelé vagy lefelé.
Érintőképernyő használatával két ujjal érintse meg a térképet, és húzza őket felfelé vagy lefelé.
Ha a térkép fókuszban van, használja a shift billentyűt, valamint a felfelé vagy lefelé mutató nyílbillentyűket.
A hangmagasság-vezérlő egérrel, érintéssel vagy billentyűzettel történő bevitelével/billentyűk beírásával.

A térképstílus módosítása

Nem minden fejlesztő szeretné, hogy minden lehetséges térképstílus elérhető legyen az alkalmazásban. Ha a fejlesztő megjeleníti a térkép stílusválasztó vezérlőjét, akkor a felhasználó módosíthatja a térképstílust az egérrel, egy érintéssel vagy a billentyűzettel a tabulátorral, vagy beírhatja a billentyűt. A fejlesztő megadhatja, hogy mely térképstílusokat szeretné elérhetővé tenni a térképstílus-választó vezérlőben. Emellett a fejlesztő programozott módon állíthatja be és módosíthatja a térképstílust.

Kontrasztos megjelenítés használata

A térképvezérlő betöltésekor ellenőrzi, hogy engedélyezve van-e a kontrasztos megjelenítés, és hogy a böngésző támogatja-e.
A térképvezérlő nem figyeli az eszköz kontrasztos módját. Ha az eszköz üzemmódja megváltozik, a térkép nem fog. Így a felhasználónak újra kell betöltenie a térképet az oldal frissítésével.
Ha nagy kontrasztot észlel, a térképstílus automatikusan kontrasztosra vált, és minden beépített vezérlő kontrasztos stílust használ. A ZoomControl, a PitchControl, a CompassControl, a StyleControl és más beépített vezérlők például kontrasztos stílust használnak.
Kétféle kontrasztos, világos és sötét. Ha a térképvezérlők észlelik a kontrasztos megjelenítés típusát, a térkép viselkedése ennek megfelelően módosul. Ha világos, akkor a grayscale_light térképstílus betöltődik. Ha a típus nem észlelhető vagy sötét, akkor a high_contrast_dark stílus betöltődik.
Egyéni vezérlők létrehozásakor hasznos tudni, hogy a beépített vezérlők kontrasztos stílust használnak-e. A fejlesztők css-osztályt adhatnak hozzá a térképtároló div-hoz, hogy ellenőrizhessenek. A hozzáadandó css-osztályok a következők high-contrast-dark : és high-contrast-light. A JavaScript használatának ellenőrzéséhez használja a következőt:

map.getMapContainer().classList.contains("high-contrast-dark")

vagy használja a következőt:

map.getMapContainer().classList.contains("high-contrast-light")

Billentyűparancsok

A térkép beépített billentyűparancsai megkönnyítik a térkép használatát. Ezek a billentyűparancsok akkor működnek, ha a térkép fókuszban van.

Kulcs	Művelet
`Tab`	Navigáljon a térkép vezérlői és előugró ablakai között.
`ESC`	Helyezze át a fókuszt a térkép bármely eleméről a legfelső szintű térképelemre.
`Ctrl` + `Shift` + `D`	A képernyőolvasó részletességi szintjének váltása.
Balra nyílbillentyű	A térkép pásztája balra 100 képpont
Jobbra nyílbillentyű	A térkép jobbra pásztázása 100 képpont
Le nyílbillentyű	A térkép pásztázása 100 képponttal lefelé
Fel nyílbillentyű	A térkép pásztázása 100 képpontig
`Shift` + felfelé mutató nyíl	Térképmagasság növelése 10 fokkal
`Shift` + lefelé mutató nyíl	Térképmagasság csökkentése 10 fokkal
`Shift` + jobbra mutató nyíl	A térkép elforgatása 15 fokkal az óramutató járásával megegyező irányban
`Shift` + balra nyíl	A térkép elforgatása 15 fokkal az óramutató járásával ellentétesen
Pluszjel (`+`) vagy ^*egyenlőségjel (`=`)	Nagyítás
Mínuszjel, kötőjel (`-`) vagy ^*aláhúzásjel (`_`)	Kicsinyítés
`Shift` + egér húzása a térképen a rajzterülethez	Terület nagyítása

^* Ezek a billentyűparancsok általában ugyanazt a billentyűt használják a billentyűzeten. Ezek a billentyűparancsok a felhasználói élmény javítása érdekében lettek hozzáadva. Az sem számít, hogy a felhasználó a shift billentyűt használja-e, vagy sem ezekhez a billentyűparancsokhoz.

A felhasználók a billentyűzettel navigálhatnak a térképen. Ha egy képernyőolvasó fut, a térkép értesíti a felhasználót az állapot változásairól. A felhasználók például értesítést kapnak a térkép változásairól a térkép pásztázásakor vagy nagyításakor. Alapértelmezés szerint a térkép egyszerűsített leírásokat biztosít, amelyek kizárják a térkép középpontjának nagyítási szintjét és koordinátáit. A felhasználó a rövid billentyűzetkivágással Ctrl + + ShiftDválthat a leírások részletességi szintjére.

Az alaptérképen elhelyezett további információknak megfelelő szöveges információkkal kell rendelkezniük a képernyőolvasó felhasználói számára. Szükség esetén mindenképpen vegyen fel akadálymentes rich internetalkalmazásokat (ARIA), alt és címattribútumokat.

Előugró billentyűzet akadálymentesítése

A jelölőket vagy szimbólumokat gyakran használják a térkép egy helyének ábrázolására. A helyről általában további információk jelennek meg egy előugró ablakban, amikor a felhasználó interakcióba lép a jelölővel. A legtöbb alkalmazásban előugró ablakok jelennek meg, amikor egy felhasználó kiválaszt egy jelölőt. A kattintáshoz és koppintáshoz azonban a felhasználónak egérrel és érintőképernyővel kell rendelkeznie. Az előugró ablakok billentyűzettel való használata esetén ajánlott akadálymentessé tenni az előugró ablakokat. Ez a funkció úgy érhető el, hogy minden adatponthoz létrehoz egy előugró ablakot, és hozzáadja azt a térképhez.

Az Akadálymentes előugró példa egy szimbólumréteg használatával tölti be a térképen az érdeklődési pontokat, és felugró ablakokat ad hozzá a térképhez minden egyes érdekes ponthoz. Az egyes előugró ablakokra mutató hivatkozást az egyes adatpont tulajdonságai tárolják. Egy jelölőhöz is lekérhető, például egy jelölő kijelölésekor. Ha a térképre összpontosít, a tabulátorbillentyű lenyomásával a felhasználó végiglépkedhet a térkép egyes előugró ablakain. A minta forráskódját lásd : Akadálymentes előugró ablakok forráskódja.

Képernyőkép akadálymentes előugró ablakokat tartalmazó térképről.

További akadálymentességi tippek

Az alábbiakban további tippeket talál a webleképezési alkalmazás akadálymentesebbé tételéhez.

Ha sok interaktív pontadatot jelenít meg a térképen, fontolja meg a zsúfoltság csökkentését, és használjon fürtözést.
Győződjön meg arról, hogy a szöveg/szimbólumok és a háttérszínek kontrasztaránya 4,5:1 vagy több.
A képernyőolvasó (ARIA, alt és címattribútumok) üzeneteinek rövid, leíró és értelmes megőrzése. Kerülje a szükségtelen zsargont és betűszókat.
Próbálja optimalizálni a képernyőolvasónak küldött üzeneteket, hogy a felhasználó számára könnyen értelmezhető, rövid, jól érthető információkat nyújtson. Ha például nagy gyakorisággal szeretné frissíteni a képernyőolvasót, például a térkép áthelyezésekor, fontolja meg a következő pontok elvégzését:
- Várjon, amíg a térkép elkészült a képernyőolvasó frissítéséhez.
- A frissítések szabályozása néhány másodpercenként egyszer.
- Az üzenetek kombinálása logikusan.
Ne használjon színt az információk továbbításának egyetlen eszközeként. Szöveg, ikonok vagy minták használatával egészítheti ki vagy cserélheti le a színt. Néhány szempont:
- Ha buborékréteget használ az adatpontok közötti relatív érték megjelenítéséhez, fontolja meg az egyes buborékok sugarának skálázását, a buborék színezését vagy mindkettőt.
- Érdemes lehet különböző ikonokkal rendelkező szimbólumréteget használni különböző metrikakategóriákhoz, például háromszögekhez, csillagokhoz és négyzetekhez. A szimbólumréteg támogatja az ikon méretének skálázását is. Egy szövegfelirat is megjeleníthető.
- Vonaladatok megjelenítésekor a szélesség a súly vagy a méret ábrázolására használható. A szaggatott tömbminta a vonalak különböző kategóriáit ábrázolja. A szimbólumrétegek egy vonallal kombinálva átfedhetik az ikonokat a vonal mentén. A nyíl ikonnal megjelenítheti a vonal folyamatát vagy irányát.
- Ha sokszögadatokat jelenít meg, a mintázatok, például a csíkok a szín alternatívájaként használhatók.
Egyes vizualizációk, például hőtérképek, csemperétegek és képrétegek nem érhetők el a látássérült felhasználók számára. Néhány szempont:
- Írja le a képernyőolvasóval, hogy mit jelenít meg a réteg, amikor hozzáadja a térképhez. Ha például egy időjárási radar csemperéteg jelenik meg, akkor a képernyőolvasó azt mondja: "Az időjárási radar adatai túl vannak írva a térképen".
Korlátozza az egérmutatót igénylő funkciók mennyiségét. Ezek a funkciók nem érhetők el azoknak a felhasználóknak, akik billentyűzetet vagy érintéses eszközt használnak az alkalmazással való interakcióhoz. Vegye figyelembe, hogy továbbra is érdemes rámutatási stílussal rendelkezni az interaktív tartalmakhoz, például a kattintható ikonokhoz, hivatkozásokhoz és gombokhoz.
Próbálja meg navigálni az alkalmazást a billentyűzettel. Győződjön meg arról, hogy a tabulátorrendezés logikus.
Billentyűparancsok létrehozásakor próbálja meg két vagy kevesebb billentyűre korlátozni.