| title | description | services | keywords | author | ms.author | ms.date | ms.topic | ms.service | documentationcenter | manager | ms.devlang |
|---|---|---|---|---|---|---|---|---|---|---|---|
Making an accessible application with Azure Maps | Microsoft Docs |
How to build an accessible application using Azure Maps |
azure-maps |
chgennar |
chgennar |
09/17/2018 |
article |
azure-maps |
timlt |
na |
This article shows you how to build a map application that can be used by a screen reader.
<iframe height='500' scrolling='no' title='Make an accessible application' src='//codepen.io/azuremaps/embed/ZoVyZQ/?height=504&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Make an accessible application by Azure Maps (@azuremaps) on CodePen. </iframe>The map comes prebuilt with accessibility features. Users can navigate the map using the keyboard. If a screen reader is running, the map will notify the user of changes to its state. For example, users are notified of map changes when the map is panned or zoomed. Any additional information that is placed on the base map should have corresponding textual information for screen reader users.
Using Popup is one way to achieve this. In the above search example, a popup with textual information is added to the map for every pin that is placed on the map. Using the Popup's attach method allows the popup to be seen by a screen reader without visually displaying the popup on the map.
Learn more about the Popup class and its methods used in this article:
[!div class="nextstepaction"] Popup
Check out more code samples:
[!div class="nextstepaction"] Code sample page