"},{"ID":335892,"user_firstname":"Jessica","user_lastname":"Mccall","nickname":"Jessica Mccall","user_nicename":"jmccall","display_name":"Jessica McCall","user_email":"jmccall@esri.com","user_url":"","user_registered":"2023-03-24 19:40:44","user_description":"Jessica McCall is the Senior Accessibility Project Manager for the Esri Accessibility team and manages strategic planning and project management activities for the accessibility team. She also works to gather and support customer requirements for accessibility alongside product team members. Previously, Jessica worked for a consulting firm as a project and operations manager supporting utility data migration and data integration projects between GIS and CAD-based software.","user_avatar":"
"}],"short_description":"Learn how to make your web app accessible using the JavaScript Maps SDK and Calcite.","flexible_content":[{"acf_fc_layout":"image","image":{"ID":1894992,"id":1894992,"title":"a11y-web-apps-cover","filename":"a11y-web-apps-cover.png","filesize":3052559,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-accessible-web-apps-with-arcgis-maps-sdk-for-javascript-and-calcite-design-system\/a11y-web-apps-cover","alt":"Basemap zoom focused on the city of New Braunfels, Texas.","author":"309572","description":"","caption":"","name":"a11y-web-apps-cover","status":"inherit","uploaded_to":1878872,"date":"2023-04-04 15:27:10","modified":"2024-10-24 22:06:58","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\/2023\/03\/a11y-web-apps-cover-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/a11y-web-apps-cover-1920x1080.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Web accessibility is the practice of removing barriers that <\/span>may <\/span>prevent people from ful<\/span>ly experiencing content and supporting<\/span>\u00a0inclusion <\/span>for<\/span> individuals with disabilities. It can be a complex process <\/span>to <\/span>creat<\/span>e<\/span> fully accessible <\/span>web solutions as the <\/span>manner of which an individual <\/span>interact<\/span>s<\/span> with <\/span>the web can <\/span>var<\/span>y greatly <\/span>from person to person<\/span>.\u00a0<\/span>\u00a0<\/span><\/p>\n However, we can look to the <\/span>Web Content Accessibility Guidelines<\/a>, or WCAG, <\/span>a<\/span>s a <\/span>guide to improve accessibility on the web<\/span>. WCAG serves as<\/span> an <\/span>internationally recognized coding standard, developed to meet the <\/span>varying <\/span>needs of individuals, organizations, and government agencies implementing web accessibility.<\/span> WCAG’s success <\/span>criterion provide <\/span>standards for developers of <\/span>web and mobile<\/span> content when publishing web content or apps. <\/span><\/p>\n"},{"acf_fc_layout":"content","content":" Esri\u2019s commitment to accessibility is e<\/span>vident in the development of accessible components in JavaScript Maps SDK<\/span> and Calcite, which<\/span> aim to provide building blocks to design an<\/span>\u00a0<\/span>accessible UI. <\/span>Below are some ways to build accessi<\/span>ble and inclusive apps with<\/span>\u00a0<\/span>JavaScript Maps SDK and Calcite.<\/span><\/p>\n"},{"acf_fc_layout":"content","content":" Color contrast is key for individuals who <\/span><\/span><\/span>may <\/span><\/span><\/span>have low <\/span><\/span><\/span>vision, macular degeneration due to age, color vision deficiency (color blindness), or a variety of other vision-related <\/span><\/span><\/span>impairments. <\/span><\/span><\/span>Being aware of the contrast of colors or specific combinations of colors is key to creating<\/span><\/span><\/span> an accessible web app. <\/span><\/span><\/span>WCAG Success Criterion 1.4.3: Contrast (Minimum)<\/a>\u00a0aims for a 4.5 to 1 ratio when visually presenting text and images.<\/p>\n"},{"acf_fc_layout":"content","content":" Calcite’s colors support WCAG Success Criterion 1.4.3: Contrast (Minimum)<\/a>, or level AA.<\/p>\n You can add further support with WCAG Success Criterion 1.4.6: Contrast (Enhanced)<\/a>, or level AAA, as an example, by updating the CSS variable of High contrast modes can be enabled on an operating system (OS), where colors are forced and visual elements are simplified. High contrast mode supports individuals <\/span><\/span><\/span>who <\/span><\/span><\/span>may <\/span><\/span><\/span>have low <\/span><\/span><\/span>vision or are unable to distinguish shapes or details in objects.<\/span><\/span><\/span><\/p>\n"},{"acf_fc_layout":"content","content":" You can add high contrast basemaps, toggle control themes, and update graphic colors to showcase solutions to a wider audience while supporting the success criterion.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Toggle between high contrast basemaps","description":" Switch between high contrast light and dark basemaps using the To do this, start by adding the high contrast basemaps<\/a>\u00a0as objects:<\/p>\n Next, set the map\u2019s\u00a0 Then add the\u00a0 Finally, toggle the JS Maps SDK theme for additional contrast on the controls. For instance, when the high contrast light basemap is active, the JS Maps SDK theme is dark:<\/p>\n To style graphics added to the map with an appropriate color contrast ratio of the basemap, first obtain the basemap background color using Use Once the view has finished updating, use Focus attributes, which is the practice of underlining, <\/span><\/span><\/span>highlighting<\/span><\/span><\/span> or placing a shape around an active element, <\/span><\/span><\/span>are<\/span><\/span><\/span> important to accessibility<\/span><\/span><\/span> because it shows people where they are on the screen and provide<\/span><\/span><\/span>s<\/span><\/span><\/span> context in <\/span><\/span><\/span>navigation as well as supporting better keyboard navigation. <\/span><\/span><\/span>WCAG Success Criterion 2.4.3: Focus Order<\/a> ensures users can navigate sequentially through content, including operation with a keyboard.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Add focus to popups on open","description":" Use the When using the Shift focus between the search widget and the search results popup with When the popup is visible, set focus to the popup from the search widget using the First, create a promise with the A second promise waits for the popup to no longer be visible, where focus will be set back to the search widget.<\/p>\n People who ma<\/span><\/span><\/span>Building accessibility into web maps<\/h2>\n
Color contrast<\/h2>\n
Enhanced color contrast with Calcite’s web components<\/h3>\n
calcite-ui-danger<\/code> to provide a contrast ratio greater than 7 to 1, where the background color is white or #FFF<\/code>:<\/p>\nbody<\/span> { \r\n --calcite-ui-danger<\/span>: #A92519<\/span>; \r\n}\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":1892992,"id":1892992,"title":"Capture","filename":"Capture-1.png","filesize":6527,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-accessible-web-apps-with-arcgis-maps-sdk-for-javascript-and-calcite-design-system\/capture-23","alt":"Calcite's Input and Input Message components color can be modified to support higher contrast ratios for your audience.","author":"309572","description":"","caption":"Calcite's Input and Input Message components color can be modified to support higher contrast ratios for your audience.","name":"capture-23","status":"inherit","uploaded_to":1878872,"date":"2023-03-31 22:12:39","modified":"2023-03-31 22:13:11","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":743,"height":124,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1-213x124.png","thumbnail-width":213,"thumbnail-height":124,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","medium-width":464,"medium-height":77,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","medium_large-width":743,"medium_large-height":124,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","large-width":743,"large-height":124,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","1536x1536-width":743,"1536x1536-height":124,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","2048x2048-width":743,"2048x2048-height":124,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","card_image-width":743,"card_image-height":124,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Capture-1.png","wide_image-width":743,"wide_image-height":124}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"High contrast mode<\/h3>\n
Add contrast to maps<\/h3>\n
BasemapToggle<\/code><\/a> widget.<\/p>\n","static":false,"storymap_url":"https:\/\/kellyhutchins.github.io\/DevSummit2023-A11y\/demos\/HighContrastBasemapToggle.html<\/a>"},{"acf_fc_layout":"content","content":"const<\/span> highContrastLightBasemap = new<\/span> Basemap({\r\n portalItem: {\r\n id: \"084291b0ecad4588b8c8853898d72445\"<\/span>\r\n },\r\n title: \"High contrast light theme\"<\/span>,\r\n id: \"high-contrast-light\"<\/span>\r\n});\r\n\r\nconst<\/span> highContrastDarkBasemap = new<\/span> Basemap({\r\n portalItem: {\r\n id: \"3e23478909194c54992eaaee78b5f754\"<\/span>\r\n },\r\n title: \"High contrast dark theme\"<\/span>,\r\n id: \"high-contrast-dark\"<\/span>\r\n});\r\n<\/code><\/pre>\nbasemap<\/a><\/code>\u00a0property to the light basemap.<\/p>\nconst<\/span> map = new<\/span> Map<\/span>({ \r\n basemap: highContrastLightBasemap \r\n});\r\n<\/code><\/pre>\nBasemapToggle<\/code>\u00a0<\/a>widget with the\u00a0nextBasemap<\/code><\/a>\u00a0set to the dark basemap:<\/p>\nconst<\/span> baseToggleWidget = new<\/span> BasemapToggle({ \r\n view: view, \r\n nextBasemap: highContrastDarkBasemap, \r\n container: baseToggleDiv \r\n});\r\n<\/code><\/pre>\nconst<\/span> baseToggleDiv = document<\/span>.getElementById(\"baseToggleDiv\"<\/span>);\r\n\r\nbaseToggleDiv.addEventListener(\"click\"<\/span>, () => { \r\n const<\/span> lightTheme = document<\/span>.getElementById(\"darkTheme\"<\/span>); \r\n const<\/span> darkTheme = document<\/span>.getElementById(\"lightTheme\"<\/span>); \r\n lightTheme.toggleAttribute(\"disabled\"<\/span>); \r\n darkTheme.toggleAttribute(\"disabled\"<\/span>); \r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"storymap","title":"Customize graphics by basemap theme","description":"getBasemapBackground<\/code> and getBasemapColor<\/code>and use the value.<\/p>\n","static":false,"storymap_url":"https:\/\/kellyhutchins.github.io\/DevSummit2023-A11y\/demos\/BasemapColor.html<\/a>"},{"acf_fc_layout":"content","content":"reactiveUtils<\/code><\/a> to watch when the basemap’s background theme color changes from light to dark, or vice versa. An AbortController<\/code><\/a> signal can be used to communicate, or abort a request in the DOM, in this case when the view is no longer updating.<\/p>\ngetBackgroundColorTheme<\/code><\/a> and based on the light or dark value, update the graphic’s symbol<\/a> color.<\/p>\nlet<\/span> abortController = null<\/span>;\r\n\r\nconst<\/span> basemapHandle = reactiveUtils.watch(\r\n () => view.map.basemap,\r\n () => onBasemapChange(),\r\n { initial: true<\/span> }\r\n);\r\n\r\n\/\/ Remove watch handle when view is destroyed<\/span>\r\nview.addHandles(basemapHandle);\r\n\r\nasync<\/span> function<\/span> onBasemapChange<\/span>() {\r\n abortController?.abort();\r\n const<\/span> { signal } = (abortController = new<\/span> AbortController());\r\n\r\n await<\/span> reactiveUtils.whenOnce(() => !view.updating, signal);\r\n\r\n \/\/ getBackgroundColor is also available<\/span>\r\n const<\/span> backgroundTheme = await<\/span> colorUtils.getBackgroundColorTheme(view);\r\n const<\/span> color = backgroundTheme === \"light\"<\/span> ? lightColor : darkColor;\r\n\r\n locate.graphic.symbol.color = color;\r\n if<\/span> (hasLocation) {\r\n \/\/ We already have a graphic. Let's recreate<\/span>\r\n view.graphics.removeAll();\r\n locate.locate();\r\n }\r\n}\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"Navigating through content<\/h2>\n
shouldFocus<\/code> option to shift focus to the popup on Popup.open<\/code>.<\/p>\n","static":false,"storymap_url":"https:\/\/kellyhutchins.github.io\/DevSummit2023-A11y\/demos\/PopupFocus.html<\/a>"},{"acf_fc_layout":"content","content":"Popup<\/code>‘s open<\/code> method<\/a>, use the shouldFocus<\/code> option to shift focus to the popup when opened.<\/p>\nview.popup.open({ \r\n location: event.mapPoint, \r\n shouldFocus: true<\/span> \r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"storymap","title":"Search widget focus","description":"reactiveUtils<\/code>. Upon closing the results popup, focus will shift back to the search widget so users can navigate sequentially while searching the map's content.<\/p>\n","static":false,"storymap_url":"https:\/\/kellyhutchins.github.io\/DevSummit2023-A11y\/demos\/SearchFocus.html<\/a>"},{"acf_fc_layout":"content","content":"search-complete<\/a><\/code> event.<\/p>\nreactiveUtils whenOnce()<\/a><\/code> method and an AbortController<\/code><\/a> signal when the popup is visible. Once visible, shift focus to the popup.<\/p>\nsearch.on(\"search-complete\"<\/span>, () => onSearchComplete());\r\n\r\nlet<\/span> abortController = null<\/span>;\r\n \r\nasync<\/span> function<\/span> onSearchComplete<\/span>() {\r\n abortController?.abort();\r\n const<\/span> { signal } = (abortController = new<\/span> AbortController());\r\n\r\n \/\/ When the popup is visible set focus on it.<\/span>\r\n await<\/span> reactiveUtils.whenOnce(() => view.popup.visible, signal);\r\n view.popup.focus();\r\n\r\n \/\/ And when the popup is closed move the focus back to the search widget.<\/span>\r\n await<\/span> reactiveUtils.whenOnce(() => !view.popup.visible, signal);\r\n search.focus();\r\n}\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"Animations<\/h2>\n