"},{"ID":4801,"user_firstname":"Kelly","user_lastname":"Hutchins","nickname":"Kelly","user_nicename":"kelly","display_name":"Kelly Hutchins","user_email":"khutchins@esri.com","user_url":"","user_registered":"2018-03-02 00:16:25","user_description":"Software developer on the instant apps team building apps that help you share your Online content. Outside of work I enjoy spending time trail running with my dogs.","user_avatar":"
"}],"short_description":"Learn how to make your web maps accessible to wider audiences using live regions and descriptions.","flexible_content":[{"acf_fc_layout":"image","image":{"ID":2316092,"id":2316092,"title":"aria-cover","filename":"aria-cover.png","filesize":301412,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-accessibility-into-your-web-maps-with-arcgis-maps-sdk-for-javascript\/aria-cover","alt":"A map centered on the United States lower 48 states, which summarize the count, and rates, of accidental deaths in each state.","author":"309572","description":"","caption":"","name":"aria-cover","status":"inherit","uploaded_to":2310182,"date":"2024-04-23 22:31:37","modified":"2024-10-24 21:45:28","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"When building interactive maps, which are very visual in nature, apps can include improvements so they can reach wider audiences. Interactive map users benefit when context is provided as they interact with the map. For example, providing context when the map has loaded in the display, what the map’s data includes, and and map’s purpose.<\/p>\n
By providing additional context to audiences with low, or no vision, mapping apps can be used more universally. Similar strategies can also support lower internet speed connections, where context is provided if the content takes longer than expected to load in the app.<\/p>\n"},{"acf_fc_layout":"content","content":"
While a fully sighted user may be able to indicate when the map has loaded on the page, users who rely on assistive technologies, such as a screen reader, may not know when the map has loaded in the app. When content dynamically changes, its context can be provided to a user through assistive technologies with an ARIA live region<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":" To provide similar on-demand context when the map has loaded to assistive technologies, a live region can be added to the map. Add an aria-describedby attribute<\/a> to the parent element of the map, such as the document’s body. The aria-describedby attribute will be associated with another element’s “id” on the page, where the description will be provided. The element can also include the aria-live attribute set to “polite” so users receive the information when they are idle. By adding an aria-describedby attribute, those navigating an app with assistive technologies will have the ability to better understand the content in the app.<\/p>\n To visually hide the description from users, add a “sr-only” class to the element. The class will still contain the description’s text contents, but will be visually hidden in the app via CSS:<\/p>\n To use a similar strategy for low internet speeds, the CSS class above could be omitted to provide both visual and descriptive information to users, in the event the messaging could be useful visually and to assistive technology users.<\/p>\n"},{"acf_fc_layout":"content","content":" Update the live region with information from the web map after the view is ready with the\u00a0web map’s title, Accidental Deaths, and add it to the live region:<\/p>\n The map can also contain a description when a user is actively focused on the map with assistive technologies.<\/p>\n Similar to the live region, a new element can be added to contain the map’s description. Add the same “sr-only” class to the element, where the description will be visually hidden to users:<\/p>\n If an app contains a web map, the webmap’s snippet or description can be used to update the “map-description” element, which provides additional context on the map’s purpose and contents to the user.<\/p>\n To add the description to the map view’s surface node, use “getElementsByClassName” to return elements from the “esri-view-surface” class. There is only one element, but the method returns an array of results. The spread syntax (…)<\/a> iterates through the array, which applies the description to the element.<\/p>\n"},{"acf_fc_layout":"content","content":" Below is a demonstration app, with the code<\/a> and app<\/a> available on GitHub.<\/p>\n To test the app:<\/p>\n Note: Not all assistive technologies support the aria-describedby attribute. For example, Narrator<\/a> does not. For full supporting information of aria-described by, visit a11ysupport.io<\/a>.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/geospatialem.github.io\/build-a11y-web-maps-sdk-js-calcite-ds-2024\/demos\/description-region.html<\/a>"}],"related_articles":[{"ID":2093302,"post_author":"68331","post_date":"2024-01-16 00:00:13","post_date_gmt":"2024-01-16 08:00:13","post_content":"","post_title":"Accessible Labels with ArcGIS Web Apps","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"a11y-labels-arcgis-online-web-apps","to_ping":"","pinged":"","post_modified":"2024-10-24 15:19:55","post_modified_gmt":"2024-10-24 22:19:55","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2093302","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1878872,"post_author":"309572","post_date":"2023-04-10 07:39:50","post_date_gmt":"2023-04-10 14:39:50","post_content":"","post_title":"Build accessible web apps with ArcGIS Maps SDK for JavaScript and Calcite Design System","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"build-accessible-web-apps-with-arcgis-maps-sdk-for-javascript-and-calcite-design-system","to_ping":"","pinged":"","post_modified":"2024-10-24 15:07:33","post_modified_gmt":"2024-10-24 22:07:33","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1878872","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-card2.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/aria-cover.png"},"yoast_head":"\nAdd a live region<\/h3>\n
<body<\/span> aria-describedby<\/span>=\"map-loaded\"<\/span>><\/span>\r\n <p<\/span> id<\/span>=\"map-loaded\"<\/span> aria-live=\"polite\"<\/span> class<\/span>=\"sr-only\"<\/span>><\/span><\/p<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/code><\/pre>\n.sr-only {\r\n position<\/span>: absolute;\r\n width<\/span>: 1px<\/span>;\r\n height<\/span>: 1px<\/span>;\r\n padding<\/span>: 0<\/span>;\r\n margin<\/span>: -1px<\/span>;\r\n overflow<\/span>: hidden;\r\n clip<\/span>: rect(0<\/span>, 0<\/span>, 0<\/span>, 0<\/span>);\r\n border<\/span>: 0<\/span>;\r\n}<\/code><\/pre>\nDynamically add the description<\/h3>\n
const<\/span> mapLoadMsg = document<\/span>.getElementById(\"map-loaded\"<\/span>);\r\n\r\nawait<\/span> view.when();\r\nmapLoadMsg.innerText = `${map.portalItem.title}<\/span> map has loaded.`<\/span>;\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"Create a map description<\/h2>\n
<p id<\/span>=\"map-description\"<\/span> class<\/span>=\"sr-only\"<\/span>><\/span><\/p><\/span><\/code><\/p>\nconst<\/span> mapLoadMsg = document<\/span>.getElementById(\"map-loaded\"<\/span>);\r\nconst<\/span> mapDescription = document<\/span>.getElementById(\"map-description\"<\/span>);\r\n\r\nawait<\/span> view.when();\r\nmapLoadMsg.innerText = `${map.portalItem.title}<\/span> map has loaded.`<\/span>;\r\nmapDescription.innerText = map.portalItem.snippet;\r\nconst<\/span> surfaceEls = [...document.getElementsByClassName(\"esri-view-surface\"<\/span>)];\r\nsurfaceEls.forEach((surfaceEl) =>\r\n surfaceEl.setAttribute(\"aria-describedby\"<\/span>, \"map-description\"<\/span>)\r\n);\r\n<\/code><\/pre>\nExplore the demonstration app<\/h2>\n
\n