{"id":613102,"date":"2023-08-31T18:28:26","date_gmt":"2023-09-01T01:28:26","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&p=613102"},"modified":"2023-09-14T19:35:56","modified_gmt":"2023-09-15T02:35:56","slug":"accessibilejs","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs","title":{"rendered":"Build Accessible Web Apps"},"author":1031,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","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,485082,25002],"tags":[287782,339112,486372,486432],"arcuser_issues":[486292],"class_list":["post-613102","arcuser","type-arcuser","status-publish","format-standard","hentry","category-arcgis-maps-sdk-for-javascript-developer-technology","category-arcgis-maps-sdk-for-javascript","category-developers-corner","tag-accessibility","tag-blindness","tag-inclusion","tag-low-vision","arcuser_issues-arcuser-summer-2023"],"acf":{"short_description":"Web accessibility techniques remove the barriers in web apps that can prevent people from fully experiencing content .","pdf":{"host_remotely":false,"file":613112,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Web accessibility techniques remove the barriers in web apps that can prevent people from fully experiencing content and supports the inclusion of individuals with disabilities.\r\n\r\nCreating fully accessible web solutions can be a complex process because the way individuals interact with the web can vary greatly. However, the Web Content Accessibility Guideline<\/a>s (WCAG) is a guide for improving accessibility on the web. WCAG is an internationally recognized coding standard that was developed to meet the varying needs of individuals, organizations, and government agencies when implementing web accessibility. Its success criterion provides standards for developers of web and mobile content when publishing web content or apps.\r\n

Building Accessibility into Web Maps<\/h3>\r\nThe accessible components in ArcGIS Maps SDK for JavaScript (JavaScript Maps SDK) and Calcite Design System demonstrate Esri\u2019s commitment to accessibility. These components provide the building blocks to design an accessible UI. This article includes some ways accessible and inclusive apps can be built with JavaScript Maps SDK and Calcite.\r\n

Improve Color Contrast<\/h3>\r\nColor contrast is key for individuals who have low vision, macular degeneration due to age, color vision deficiency (color blindness), or other vision-related impairments.\r\n\r\nBeing aware of the contrast of colors or specific combinations of colors is a key aspect when creating an accessible web app. WCAG Success Criterion 1.4.3: Contrast (Minimum) aims for a 4.5 to 1 ratio when visually presenting text and images.\r\n\r\nColor contrast can be enhanced with Calcite\u2019s web components to support WCAG Success Criterion 1.4.3: Contrast (Minimum), or level AA. [WCAG has three levels of conformance: A is minimum, AA is midrange and widely accessible, and AAA is the most optimal accessibility rating.]<\/em>\u00a0 You can also add support for WCAG Success Criterion 1.4.6: Contrast (Enhanced), or level AAA, by updating the CSS variable of calcite-ui-danger. It provides a contrast ratio greater than 7 to 1, when the background color is white or #FFF.\r\n

Using High-Contrast Mode<\/h3>\r\nHigh-contrast modes increase the contrast of elements, making it easier to read text and distinguish individual elements. When these modes are enabled for an operating system (OS), colors are forced, visual elements are simplified, and browser-specific values are selected from a set of system colors that ensures consistent contrast. High-contrast mode supports individuals who have low vision or who are unable to distinguish shapes or details in objects.\r\n

Add Contrast to Maps<\/h3>\r\nThere are several ways you can improve the contrast of maps to showcase solutions to a wider audience while supporting the success criterion. One method is to toggle between high-contrast basemaps. Switch between high-contrast light and dark basemaps using the BasemapToggle widget. To do this, add high-contrast basemaps as objects, as shown in Listing 1. Next, set the map\u2019s basemap property to the light basemap, as shown in Listing 2.\r\n\r\n "},{"acf_fc_layout":"image","image":619772,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":619782,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Then add the BasemapToggle widget with the nextBasemap set to the dark basemap, as shown in Listing 3.You can also toggle the JavaScript Maps SDK theme for additional contrast on the controls. For instance, when the high-contrast light basemap is active, the JavaScript Maps SDK theme is dark, as shown in Listing 4.\r\n\r\n "},{"acf_fc_layout":"image","image":619792,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":619802,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Customize Graphics by Basemap Theme<\/h3>\r\nTo style graphics added to the map with an appropriate color contrast ratio for the basemap, first obtain the basemap background color using getBasemapBackground and getBasemapColor and use that value.\r\n\r\nUse reactiveUtils to watch when the basemap\u2019s background theme color changes from light to dark, or vice versa. An AbortController signal can be used to communicate, or abort a request in the document object model (DOM) when the view is no longer updating. Once the view has finished updating, use getBackgroundColorTheme to update the graphic\u2019s symbol color, based on the light or dark value. See Listing 5.\r\n\r\nn access web maps."},{"acf_fc_layout":"image","image":613272,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Navigating through Content<\/h3>\r\nFocus attributes are important to accessibility because they help show people where they are on the screen and provide context for navigating through the screen as well as supporting better keyboard navigation. Setting focus attributes to underline, highlight, or place a shape around an active element ensures users can navigate sequentially through content when using a keyboard to meet WCAG Success Criterion 2.4.3: Focus Order. When using the open method for a pop-up, employ the shouldFocus option to shift focus to the pop-up when it is opened, as shown in Listing 6.\r\n\r\n "},{"acf_fc_layout":"image","image":613282,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Search Widget Focus<\/h3>\r\nShift focus between the search widget and the search results pop-up with reactiveUtils. Upon closing the results pop-up, focus will shift back to the search widget so users can navigate sequentially while searching the map\u2019s content.\r\n\r\nWhen the pop-up is visible, set focus to the pop-up from the search widget using the search-complete event. First, create a promise with the reactiveUtils whenOnce() method and an AbortController signal when the pop-up is visible. Once visible, shift focus to the pop-up. A second promise waits for the pop-up to no longer be visible so that the focus will be set back to the search widget, as shown in Listing 6.\r\n

Animations<\/h3>\r\nPeople who suffer from disorders of the vestibular system (which affects balance) or who have suffered traumatic brain injury can experience headaches, nausea, seizures, or other symptoms that are triggered by animations. Those users may consider choosing OS and browser settings to reduce animations and other interactive elements. WCAG Success Criterion 2.3.3: Animation from Interaction recommends allowing users to disable interactions unless animation is essential for conveying information.\r\n\r\nCalcite minimizes animation when system animations are turned off or reduced. When animations are enabled, animations are executed in Calcite\u2019s loader component.\r\n\r\nWith JavaScript Maps SDK, animation on the map can be reduced when animations are not shown or reduced with prefers-reduced-motion. When animations are enabled, some of the map\u2019s functions\u2014such as zooming to a feature\u2014include basemap tile animations. When animations are turned off or reduced, a function can be added to reduce map animations. Add the goToOverride function to the pop-up\u2019s goTo method, as shown in Listing 7.\r\n\r\n "},{"acf_fc_layout":"image","image":613292,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Explore Further<\/h3>\r\nThis article summarizes Building Accessible Web Apps with ArcGIS Maps SDK for JavaScript and Calcite Design System, a session presented at the 2023 Esri Developer Summit in Palm Springs, California.\r\nThe code and full demonstrations are available on GitHub (https:\/\/github.com\/kellyhutchins\/DevSummit2023-A11y). Subscribe to the Accessibility Community (community.esri.com\/t5\/accessibility\/ct-p\/accessibility) on Esri Community.\r\n

Some Final Thoughts<\/h3>\r\nEsri supports the successful implementation of accessible mapping apps. Accessibility should not be an afterthought. It is more efficient for developers and designers to include accessibility rather than reworking published apps. Accessibility should be a part of the development process throughout the app design and development workflow so that anyone can access web maps."}],"references":null},"yoast_head":"\nUse ArcGIS Maps SDK for JavaScript for accessible apps<\/title>\n<meta name=\"description\" content=\"Use ArcGIS Maps SDK for JavaScript to build fully accessible web solutions to make content available to people with low vision.\" \/>\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\/accessibilejs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Accessible Web Apps\" \/>\n<meta property=\"og:description\" content=\"Use ArcGIS Maps SDK for JavaScript to build fully accessible web solutions to make content available to people with low vision.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-15T02:35:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2023\/08\/accessibleJS_banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\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\/accessibilejs\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs\",\n\t \"name\": \"Use ArcGIS Maps SDK for JavaScript for accessible apps\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t },\n\t \"datePublished\": \"2023-09-01T01:28:26+00:00\",\n\t \"dateModified\": \"2023-09-15T02:35:56+00:00\",\n\t \"description\": \"Use ArcGIS Maps SDK for JavaScript to build fully accessible web solutions to make content available to people with low vision.\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs#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\/accessibilejs\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs#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\": \"Build Accessible Web Apps\"\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 ArcGIS Maps SDK for JavaScript for accessible apps","description":"Use ArcGIS Maps SDK for JavaScript to build fully accessible web solutions to make content available to people with low vision.","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\/accessibilejs","og_locale":"en_US","og_type":"article","og_title":"Build Accessible Web Apps","og_description":"Use ArcGIS Maps SDK for JavaScript to build fully accessible web solutions to make content available to people with low vision.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2023-09-15T02:35:56+00:00","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2023\/08\/accessibleJS_banner.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs","name":"Use ArcGIS Maps SDK for JavaScript for accessible apps","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2023-09-01T01:28:26+00:00","dateModified":"2023-09-15T02:35:56+00:00","description":"Use ArcGIS Maps SDK for JavaScript to build fully accessible web solutions to make content available to people with low vision.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/accessibilejs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Build Accessible Web Apps"}]},{"@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\/613102","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\/613102\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=613102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=613102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=613102"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=613102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}