Vytvoření přístupné aplikace

Článek
08/05/2024

Až 20 % uživatelů internetu potřebuje přístup k webovým aplikacím. Proto je důležité zajistit, aby byla vaše aplikace navržená tak, aby ji mohl snadno používat každý uživatel. Místo toho, abyste přemýšleli o přístupnosti jako o sadě úkolů, které se mají dokončit, si je představte jako součást celkového uživatelského prostředí. Čím je vaše aplikace přístupnější, tím více lidí, kteří ji můžou používat.

Pokud jde o bohatý interaktivní obsah, jako je mapa, je potřeba vzít v úvahu některé běžné aspekty přístupnosti:

Podpora čtečky obrazovky pro uživatele, kteří mají potíže se zobrazením webové aplikace
Máte více metod pro interakci s webovou aplikací a navigaci v ní, jako je myš, dotykové ovládání a klávesnice.
Zajistěte, aby barevný kontrast byl takový, aby se barvy vzájemně neprolínaly, a aby se navzájem obtížně odlišily.

Sada Azure Maps Web SDK je předem připravená s funkcemi přístupnosti, jako jsou:

Popisy čtečky obrazovky, když se mapa přesune a kdy se uživatel zaměřuje na ovládací prvek nebo místní okno
Podpora myši, dotykového ovládání a klávesnice
Podpora přístupného barevného kontrastu ve stylu roadmapy
Podpora vysokého kontrastu

Podrobnosti o souladu s přístupností pro všechny produkty Microsoftu najdete v tématu Sestavy shody přístupnosti. Vyhledejte "Web Azure Maps", abyste našli dokument speciálně pro sadu Azure Maps Web SDK.

Navigace v mapě

Mapa se dá přiblížit, posunout, otočit a rozmístit několika různými způsoby. Následující podrobnosti jsou všechny různé způsoby navigace v mapě.

Zvětšení mapy

Pomocí myši poklikáním na mapu přibližte jednu úroveň.
Pomocí myši posouvejte kolečko a přibližte mapu.
Pomocí dotykové obrazovky se dotkněte mapy dvěma prsty a připnutím prstu oddálíte nebo roztáhněte prsty od sebe, abyste ji mohli přiblížit.
Pomocí dotykové obrazovky poklepáním na mapu přibližte jednu úroveň.
Když je mapa zaměřená, pomocí znaménka plus (+) nebo znaménka Rovná se (=) můžete přiblížit o jednu úroveň.
Když je mapa zaměřená, pomocí znaménka minus, spojovníku (-) nebo podtržítka (_) oddálit jednu úroveň.
Použití ovládacího prvku lupy pomocí myši, dotykové klávesy nebo klávesy tab/enter
Stiskněte a podržte Shift tlačítko a stiskněte levé tlačítko myši dolů na mapě a tažením nakreslete oblast, do které chcete mapu přiblížit.
Pomocí některých vícedotykových panelů můžete přetažením dvou prstů oddálit nebo zmenšit zobrazení.

Posouvání mapy

Pomocí myši stiskněte na mapě tlačítko levého tlačítka myši a přetáhněte ho libovolným směrem.
Pomocí dotykové obrazovky se dotkněte mapy a přetáhněte ji libovolným směrem.
S fokusem na mapě přesuňte mapu pomocí kláves se šipkami.

Otočení mapy

Pomocí myši stiskněte na mapě pravé tlačítko myši a přetáhněte ho doleva nebo doprava.
Pomocí dotykové obrazovky se dotkněte mapy dvěma prsty a otočte ji.
Pomocí fokusu na mapě použijte klávesu Shift a šipkové klávesy vlevo nebo vpravo.
Použití ovládacího prvku otočení pomocí myši, dotykového ovládání nebo klávesy tab/enter

Rozmíst mapu

Pomocí myši stiskněte na mapě pravé tlačítko myši a přetáhněte nahoru nebo dolů.
Pomocí dotykové obrazovky se dotkněte mapy dvěma prsty a potáhněte je nahoru nebo dolů.
S fokusem na mapě použijte klávesu Shift a šipkové klávesy nahoru nebo dolů.
Použití ovládacího prvku pro výšku pomocí myši, dotykové klávesy nebo klávesy tab/enter

Změna stylu mapy

Ne všichni vývojáři chtějí, aby byly ve své aplikaci dostupné všechny možné styly map. Pokud vývojář zobrazí ovládací prvek pro výběr stylu mapy, může uživatel změnit styl mapy pomocí myši, dotykového ovládání nebo klávesnice pomocí klávesy Tab nebo Enter. Vývojář může určit, které styly mapy chtějí zpřístupnit v ovládacím prvku pro výběr stylu mapy. Vývojář může také programově nastavit a změnit styl mapy.

Použití vysokého kontrastu

Při načtení ovládacího prvku mapy zkontroluje, jestli je povolený vysoký kontrast a prohlížeč ho podporuje.
Ovládací prvek mapy nemonitoruje režim vysokého kontrastu zařízení. Pokud se režim zařízení změní, mapa se nezobrazí. Uživatel tedy musí mapu znovu načíst tak, že aktualizuje stránku.
Když se zjistí vysoký kontrast, styl mapy se automaticky přepne na vysoký kontrast a všechny předdefinované ovládací prvky používají styl vysokého kontrastu. Například ZoomControl, PitchControl, CompassControl, StyleControl a další předdefinované ovládací prvky, použijte styl vysokého kontrastu.
Existují dva typy vysokého kontrastu, světlé a tmavé. Pokud je možné zjistit typ vysokého kontrastu ovládacími prvky mapy, chování mapy se odpovídajícím způsobem upraví. Pokud je světlo, načte se styl mapy grayscale_light. Pokud typ nelze rozpoznat nebo je tmavý, načte se styl high_contrast_dark.
Pokud vytváříte vlastní ovládací prvky, je užitečné vědět, jestli předdefinované ovládací prvky používají styl vysokého kontrastu. Vývojáři můžou přidat třídu css na div kontejneru mapy a zkontrolovat. Třídy css, které by byly přidány jsou high-contrast-dark a high-contrast-light. Pokud chcete zkontrolovat použití JavaScriptu, použijte:

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

nebo použijte:

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

Klávesové zkratky

Mapa obsahuje klávesové zkratky, které usnadňují používání mapy. Tyto klávesové zkratky fungují, když je na mapě fokus.

Klíč	Akce
`Tab`	Procházejte ovládací prvky a automaticky otevírané okno v mapě.
`ESC`	Přesuňte fokus z libovolného prvku v mapě na prvek mapování nejvyšší úrovně.
`Ctrl` + `Shift` + `D`	Přepněte úroveň podrobností čtečky obrazovky.
Klávesa se šipkou doleva	Posunutí mapy doleva o 100 pixelů
Klávesa se šipkou doprava	Posunutí mapy doprava o 100 pixelů
Šipka dolů	Posunutí mapy dolů o 100 pixelů
Šipka nahoru	Posunutí mapy o 100 pixelů
`Shift` +šipka nahoru	Zvětšení rozteče mapy o 10 stupňů
`Shift` +šipka dolů	Zmenšení rozteče mapy o 10 stupňů
`Shift` +šipka vpravo	Otočení mapy o 15 stupňů po směru hodinových ručiček
`Shift` +šipka vlevo	Otočení mapy o 15 stupňů proti směru hodinových ručiček
Znaménko plus (`+`) nebo ^*rovnítko (`=`)	Přiblížit
Znaménko minus, spojovník (`-`) nebo ^*podtržítko (`_`)	Oddálit
`Shift` + přetažením myši na mapě nakreslit oblast	Přiblížení oblasti

^* Tyto klávesové zkratky obvykle sdílejí stejnou klávesu na klávesnici. Tyto klávesové zkratky byly přidány za účelem zlepšení uživatelského prostředí. Nezáleží také na tom, jestli uživatel používá klávesu Shift nebo ne pro tyto klávesové zkratky.

Uživatelé můžou mapu procházet pomocí klávesnice. Pokud je čtečka obrazovky spuštěná, mapa upozorní uživatele na změny stavu. Uživatelům se například při posouvání nebo přiblížení mapy zobrazí oznámení o změnách mapy. Ve výchozím nastavení mapa poskytuje zjednodušené popisy, které vylučují úroveň přiblížení a souřadnice středu mapy. Uživatel může přepnout úroveň podrobností těchto popisů pomocí klávesové zkratky CtrlD + Shift + .

Všechny další informace umístěné na základní mapě by měly mít odpovídající textové informace pro uživatele čtečky obrazovky. Nezapomeňte tam, kde je to vhodné, přidat přístupné internetové aplikace (ARIA), alternativní a titulní atributy.

Zpřístupnění automaticky otevíraných oken pomocí klávesnice

Značka nebo symbol se často používá k reprezentaci umístění na mapě. Další informace o umístění se obvykle zobrazí v automaticky otevírané nabídce, když uživatel komunikuje se značkou. Ve většině aplikací se automaticky otevírané okno zobrazí, když uživatel vybere značku. Kliknutí a klepnutí ale vyžaduje, aby uživatel použil myš a dotykovou obrazovku. Osvědčeným postupem je zpřístupnění automaticky otevíraných oken při použití klávesnice. Tuto funkci lze dosáhnout vytvořením automaticky otevíraného okna pro každý datový bod a jeho přidáním do mapy.

Příklad překryvných oken s podporou přístupnosti načte body zájmů na mapě pomocí vrstvy symbolů a přidá do mapy automaticky otevírané okno pro každý bod zájmu. Odkaz na každé automaticky otevírané okno je uložen ve vlastnostech každého datového bodu. Lze ho také načíst pro značku, například při výběru značky. Když je fokus na mapě, stisknutím klávesy Tab může uživatel procházet jednotlivé automaticky otevírané okno na mapě. Zdrojový kód pro tuto ukázku najdete v části Přístupné automaticky otevírané okno se zdrojovým kódem.

Snímek obrazovky znázorňující mapu s přístupnými automaticky otevíranými oky

Další tipy pro přístupnost

Tady je několik dalších tipů, jak aplikaci mapování webu zpřístupnit.

Pokud se na mapě zobrazuje mnoho interaktivních dat bodů, zvažte snížení nepotřebné funkce a použití clusteringu.
Zajistěte, aby poměr barevného kontrastu mezi textem a symboly a barvami pozadí byl 4,5:1 nebo více.
Nechte čtečku obrazovky (ARIA, alt a atributy nadpisu) krátké, popisné a smysluplné. Vyhněte se zbytečným žargonům a zkratkám.
Pokuste se optimalizovat zprávy odeslané do čtečky obrazovky, aby poskytovaly krátké smysluplné informace, které jsou pro uživatele snadno použitelné. Pokud například chcete aktualizovat čtečku obrazovky s vysokou frekvencí, například při přesouvání mapy, zvažte následující body:
- Počkejte, až se mapa dokončí, aby se aktualizovala čtečka obrazovky.
- Omezte aktualizace jednou za několik sekund.
- Zkombinujte zprávy logickým způsobem.
Nepoužívejte barvu jako jediný způsob předávání informací. K doplnění nebo nahrazení barvy použijte text, ikony nebo vzory. Některé aspekty:
- Pokud k zobrazení relativní hodnoty mezi datovými body používáte vrstvu bublin, zvažte škálování poloměru každé bubliny, obarvení bubliny nebo obojí.
- Zvažte použití vrstvy symbolů s různými ikonami pro různé kategorie metrik, jako jsou trojúhelníky, hvězdy a čtverce. Vrstva symbolů také podporuje škálování velikosti ikony. Můžete také zobrazit textový popisek.
- Pokud se zobrazují data čáry, můžete šířku použít k vyjádření váhy nebo velikosti. Vzor pomlčky lze použít k reprezentaci různých kategorií čar. Vrstvu symbolů lze použít v kombinaci s čárou k překrytí ikon podél čáry. Použití ikony šipky je užitečné pro zobrazení toku nebo směru čáry.
- Pokud se zobrazují mnohoúhelníková data, lze jako alternativu k barvě použít vzor, například pruhy.
Některé vizualizace, jako jsou heat mapy, vrstvy dlaždic a vrstvy obrázků, nejsou přístupné uživatelům s vadami zraku. Některé aspekty:
- Požádejte čtečku obrazovky, která popisuje, co se vrstva zobrazuje při přidání do mapy. Pokud je například zobrazena vrstva dlaždice radaru počasí, požádejte čtečku obrazovky, aby se na mapě zobrazila informace o překryvných datech meteorologické radary.
Omezte množství funkcí, které vyžadují najetí myší. Tyto funkce jsou pro uživatele, kteří k interakci s vaší aplikací používají klávesnici nebo dotykové zařízení, nepřístupné. Poznámka: Stále je vhodné mít styl přechodu myší pro interaktivní obsah, jako jsou ikony, odkazy a tlačítka, na které se dá kliknout.
Zkuste aplikaci procházet pomocí klávesnice. Ujistěte se, že řazení ovládacích prvků je logické.
Pokud vytváříte klávesové zkratky, zkuste ho omezit na dvě nebo méně kláves.