{"id":694972,"date":"2024-08-30T17:26:00","date_gmt":"2024-08-31T00:26:00","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&p=694972"},"modified":"2024-08-30T17:26:00","modified_gmt":"2024-08-31T00:26:00","slug":"jsaccessibility","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility","title":{"rendered":"Accessibility Built into Your Web Maps with ArcGIS Maps SDK for JavaScript"},"author":1031,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[486442,25002],"tags":[],"arcuser_issues":[490002],"class_list":["post-694972","arcuser","type-arcuser","status-publish","format-standard","hentry","category-arcgis-maps-sdk-for-javascript-developer-technology","category-developers-corner","arcuser_issues-au-summer-2024"],"acf":{"short_description":"Apps can reach wider audiences when additional context is provided for audiences with low or no vision.","pdf":{"host_remotely":false,"file":694992,"file_url":""},"flexible_content":[{"acf_fc_layout":"blockquote","content":"Interactive maps are very visual in nature. Apps can reach wider audiences when additional context\u2014such as the map\u2019s purpose or the data included in the map\u2014is provided for audiences with low or no vision. The same strategies can also support lower internet speed connections that take longer to load content in an app."},{"acf_fc_layout":"content","content":"While a fully sighted user can determine when a map has loaded on a page, users who rely on screen readers or other assistive technologies may not know when a map has loaded in the app. When content dynamically changes, its context can be provided to a user through assistive technologies with an Accessible Rich Internet Applications (ARIA) live region. [ARIA live regions provide a way to programmatically expose dynamic content changes, such as an update to a list of search results on the fly or a discreet alert that does not require user interaction, so that they can be announced by assistive technologies.]<\/em>"},{"acf_fc_layout":"image","image":695052,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Add a Live Region<\/h3>\r\nTo 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 to the parent element of the map, such as the document\u2019s body. The aria-describedby attribute will be associated with another element\u2019s 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. (See Listing 1.) 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.\r\n\r\nTo visually hide the description from users, add a sr-only class to the element. The class will still contain the description\u2019s text contents, but will be visually hidden in the app via CSS, as shown in Listing 2."},{"acf_fc_layout":"image","image":695062,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"To use a similar strategy for low internet speeds, the CSS class as shown in Listing 2 could be omitted to provide both visual and descriptive information to users. This deals with messaging that cannot be read or that will be translated by assistive technologies.\r\n

Dynamically Add the Description<\/h3>\r\nUpdate the live region with information from the web map after the view is ready with the web map\u2019s title and add it to the live region as shown in Listing 3."},{"acf_fc_layout":"image","image":695072,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Create a Map Description<\/h3>\r\nThe map can also contain a description when a user is actively focused on the map with assistive technologies. Like a live region, a new element can be added to contain the map\u2019s description. As shown in Listing 4, add the same sr-only class to the element, where the description will be visually hidden to users."},{"acf_fc_layout":"content","content":"If an app contains a web map, the web map\u2019s snippet or description can be used to update the map-description element, which provides additional context on the map\u2019s purpose and contents to the user.\r\n\r\nTo add the description to the map view\u2019s 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 (\u2026) syntax iterates through the array, which applies the description to the element as shown in Listing 5.\r\n

Explore the Demonstration App<\/h3>\r\nAccess a demonstration app with the code (links.esri.com\/democode<\/a>) and app (links.esri.com\/demoapp<\/a>), available on GitHub.\r\n\r\nTo test the app:\r\n1. Enable a screen reader, such as the free NVDA screen reader (https:\/\/www.nvaccess.org\/<\/a>) or JAWS (links.esri.com\/jaws<\/a>), both for Windows; or VoiceOver, which is included with MacOS.\r\n2. Open the app in a browser window. For VoiceOver, Safari is the MacOS-supported browser.\r\n3. Navigate into the app and explore the live region and map description.\r\nNote: Not all assistive technologies support the aria-describedby attribute. For example, Narrator does not. For full supporting information of aria-describedby, visit a11ysupport.io<\/a>."}],"references":null},"yoast_head":"\nUse SDK features to build accessible maps<\/title>\n<meta name=\"description\" content=\"Interactive maps are very visual in nature. Apps can reach wider audiences when additional context\u2014such as the map\u2019s purpose or the data included in the map\u2014is provided for audiences with low or no vision. The same strategies can also support lower internet speed connections that take longer to load content in an app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility Built into Your Web Maps with ArcGIS Maps SDK for JavaScript\" \/>\n<meta property=\"og:description\" content=\"Interactive maps are very visual in nature. Apps can reach wider audiences when additional context\u2014such as the map\u2019s purpose or the data included in the map\u2014is provided for audiences with low or no vision. The same strategies can also support lower internet speed connections that take longer to load content in an app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2024\/08\/JS_banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility\",\n\t \"name\": \"Use SDK features to build accessible maps\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t },\n\t \"datePublished\": \"2024-08-31T00:26:00+00:00\",\n\t \"description\": \"Interactive maps are very visual in nature. Apps can reach wider audiences when additional context\u2014such as the map\u2019s purpose or the data included in the map\u2014is provided for audiences with low or no vision. The same strategies can also support lower internet speed connections that take longer to load content in an app.\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Accessibility Built into Your Web Maps with ArcGIS Maps SDK for JavaScript\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t \"name\": \"Esri\",\n\t \"description\": \"Esri Newsroom\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t },\n\t \"query-input\": {\n\t \"@type\": \"PropertyValueSpecification\",\n\t \"valueRequired\": true,\n\t \"valueName\": \"search_term_string\"\n\t }\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468\",\n\t \"name\": \"Monica Pratt\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t \"caption\": \"Monica Pratt\"\n\t },\n\t \"description\": \"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.\",\n\t \"sameAs\": [\n\t \"https:\/\/x.com\/ArcUser\"\n\t ],\n\t \"url\": \"\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Use SDK features to build accessible maps","description":"Interactive maps are very visual in nature. Apps can reach wider audiences when additional context\u2014such as the map\u2019s purpose or the data included in the map\u2014is provided for audiences with low or no vision. The same strategies can also support lower internet speed connections that take longer to load content in an app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility","og_locale":"en_US","og_type":"article","og_title":"Accessibility Built into Your Web Maps with ArcGIS Maps SDK for JavaScript","og_description":"Interactive maps are very visual in nature. Apps can reach wider audiences when additional context\u2014such as the map\u2019s purpose or the data included in the map\u2014is provided for audiences with low or no vision. The same strategies can also support lower internet speed connections that take longer to load content in an app.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2024\/08\/JS_banner.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility","name":"Use SDK features to build accessible maps","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2024-08-31T00:26:00+00:00","description":"Interactive maps are very visual in nature. Apps can reach wider audiences when additional context\u2014such as the map\u2019s purpose or the data included in the map\u2014is provided for audiences with low or no vision. The same strategies can also support lower internet speed connections that take longer to load content in an app.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/jsaccessibility#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Accessibility Built into Your Web Maps with ArcGIS Maps SDK for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468","name":"Monica Pratt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","caption":"Monica Pratt"},"description":"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.","sameAs":["https:\/\/x.com\/ArcUser"],"url":""}]}},"sort_order":"17","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/694972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/1031"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/694972\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=694972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=694972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=694972"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=694972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}