{"id":619412,"date":"2019-10-01T12:20:44","date_gmt":"2019-10-01T19:20:44","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=619412"},"modified":"2019-10-02T11:34:43","modified_gmt":"2019-10-02T18:34:43","slug":"how-accessibility-features-work-in-web-appbuilder-apps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/web-appbuilder\/sharing-collaboration\/how-accessibility-features-work-in-web-appbuilder-apps","title":{"rendered":"How accessibility features work in Web AppBuilder apps"},"author":9992,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37511],"tags":[28911,42751],"industry":[],"product":[36631],"class_list":["post-619412","blog","type-blog","status-publish","format-standard","hentry","category-sharing-collaboration","tag-accessibility","tag-web-appbuilder","product-web-appbuilder"],"acf":{"short_description":"Get to know more about accessibility features in Web AppBuilder and how to create and use the apps with accessible themes and widgets","flexible_content":[{"acf_fc_layout":"sidebar","content":"

Starting from the online release of 7.1, support for Section 508 and WCAG has been added for these themes and widgets<\/a> in Web AppBuilder for ArcGIS<\/span><\/span>. <\/strong><\/em><\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

Accessibility support is an important goal at Esri<\/a>. Creating accessible web content, including accessible apps, can benefit people with disabilities, and also provide a better user experience for everyone.<\/p>\n"},{"acf_fc_layout":"content","content":"

 <\/p>\n

Web AppBuilder and accessibility<\/h2>\n

Web AppBuilder is used to convey information with maps and map data. Accessibility support specific to map interactions and visualizations of map data, however, is limited for now.<\/p>\n

While the development <\/span>team strives for continued Section 508 and WCAG 2.0 compliance, <\/span>here are some helpful tips to consider as you use or create Web AppBuilder apps<\/span><\/span>.<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"

 <\/p>\n

Keyboard navigation<\/h2>\n

Navigate between sections<\/h3>\n

In different themes, there may be some divided sections in addition to the map. Examples include the header controller in the foldable theme, side panels in the jewelry box and tab themes, and the hidden skip links at the top left of the app.<\/p>\n

You can navigate between these sections by using the Esc<\/strong> key, without the need to tab through all the elements within them.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":621212,"id":621212,"title":"wab_a11y_1_navigatesections","filename":"wab_a11y_1_navigatesections.png","filesize":358885,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/web-appbuilder\/sharing-collaboration\/how-accessibility-features-work-in-web-appbuilder-apps\/wab_a11y_1_navigatesections","alt":"Web AppBuilder app with sections labeled and arrows showing how the Esc key navigates between them","author":"9992","description":"","caption":"Use the Esc key to quickly navigate through sections in Web AppBuilder apps.","name":"wab_a11y_1_navigatesections","status":"inherit","uploaded_to":619412,"date":"2019-10-01 21:27:00","modified":"2019-10-02 02:38:25","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":2878,"height":1641,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections.png","medium-width":458,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections.png","medium_large-width":768,"medium_large-height":438,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections.png","large-width":1894,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections.png","1536x1536-width":1536,"1536x1536-height":876,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections.png","2048x2048-width":2048,"2048x2048-height":1168,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections-816x465.png","card_image-width":816,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_1_navigatesections-1894x1080.png","wide_image-width":1894,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

You can also use the Skip links to quickly direct keyboard focus to other sections.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":621232,"id":621232,"title":"wab_a11y_2_skiplinks","filename":"wab_a11y_2_skiplinks-1.png","filesize":48731,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/web-appbuilder\/sharing-collaboration\/how-accessibility-features-work-in-web-appbuilder-apps\/wab_a11y_2_skiplinks-2","alt":"Skip to Map link highlighted in a portion of a sample app with a side panel","author":"9992","description":"","caption":"Use the Skip links to quickly direct focus to other sections in the app.","name":"wab_a11y_2_skiplinks-2","status":"inherit","uploaded_to":619412,"date":"2019-10-01 21:28:49","modified":"2019-10-02 02:41:15","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":1282,"height":478,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1.png","medium-width":464,"medium-height":173,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1.png","medium_large-width":768,"medium_large-height":286,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1.png","large-width":1282,"large-height":478,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1.png","1536x1536-width":1282,"1536x1536-height":478,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1.png","2048x2048-width":1282,"2048x2048-height":478,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1-826x308.png","card_image-width":826,"card_image-height":308,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_2_skiplinks-1.png","wide_image-width":1282,"wide_image-height":478}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Navigate widgets<\/h3>\n

Widgets are key components in Web AppBuilder apps. Depending on the functionality, there are three ways to interact with the widgets:<\/p>\n

1. Single off-panel widgets on screen (such as Default Extent<\/em>, Full Screen<\/em>, My Location)<\/em><\/strong><\/p>\n

These widgets are treated as a button and can be activated with the Enter<\/strong> key.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":621242,"id":621242,"title":"wab_a11y_4_btn1","filename":"wab_a11y_4_btn1-1.png","filesize":31206,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/web-appbuilder\/sharing-collaboration\/how-accessibility-features-work-in-web-appbuilder-apps\/wab_a11y_4_btn1-2","alt":"Single off-panel widgets highlighted in a portion of a sample app","author":"9992","description":"","caption":"Single off-panel widgets appear in the app as buttons, which you can activate with the Enter key.","name":"wab_a11y_4_btn1-2","status":"inherit","uploaded_to":619412,"date":"2019-10-01 21:29:55","modified":"2019-10-02 02:52:40","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":1204,"height":464,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1.png","medium-width":464,"medium-height":179,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1.png","medium_large-width":768,"medium_large-height":296,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1.png","large-width":1204,"large-height":464,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1.png","1536x1536-width":1204,"1536x1536-height":464,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1.png","2048x2048-width":1204,"2048x2048-height":464,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1-826x318.png","card_image-width":826,"card_image-height":318,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_4_btn1-1.png","wide_image-width":1204,"wide_image-height":464}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

2. Off-panel widgets with more than one element (such as Zoom Slider<\/em>, Extent Navigate<\/em>, Search)<\/em><\/strong><\/p>\n

These widgets are treated as a container. Use the Enter<\/strong> key to focus on the elements inside and the Esc<\/strong> key to return focus to the container itself.<\/p>\n

If a widget panel has a container as a component inside it, you can also use the Enter<\/strong> key to focus inside and the Esc<\/strong> key to focus backwards.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":620692,"id":620692,"title":"wab_a11y_5_btn2","filename":"wab_a11y_5_btn2.png","filesize":35555,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/web-appbuilder\/sharing-collaboration\/how-accessibility-features-work-in-web-appbuilder-apps\/wab_a11y_5_btn2","alt":"Widgets that contain multiple focusable elements","author":"9992","description":"","caption":"When widgets have multiple focusable elements inside, you can use the Enter key to move focus inside the widget and the Esc key to return focus to the widget.","name":"wab_a11y_5_btn2","status":"inherit","uploaded_to":619412,"date":"2019-10-01 20:24:54","modified":"2019-10-02 02:51:49","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":858,"height":470,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2.png","medium-width":464,"medium-height":254,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2.png","medium_large-width":768,"medium_large-height":421,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2.png","large-width":858,"large-height":470,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2.png","1536x1536-width":858,"1536x1536-height":470,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2.png","2048x2048-width":858,"2048x2048-height":470,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2-826x452.png","card_image-width":826,"card_image-height":452,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_5_btn2.png","wide_image-width":858,"wide_image-height":470}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":621302,"id":621302,"title":"wab_a11y_6_btn3.2","filename":"wab_a11y_6_btn3.2.png","filesize":43501,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/web-appbuilder\/sharing-collaboration\/how-accessibility-features-work-in-web-appbuilder-apps\/wab_a11y_6_btn3-2","alt":"Layer List widget with a labeled arrow pointing to one of its elements, indicating that you can use the Enter key to move focus inside a component","author":"9992","description":"","caption":"When components have multiple focusable elements inside, you can use the Enter key to move focus inside the component and the Esc key to return focus to the component.","name":"wab_a11y_6_btn3-2","status":"inherit","uploaded_to":619412,"date":"2019-10-01 21:35:47","modified":"2019-10-02 02:50:51","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":742,"height":610,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2.png","medium-width":317,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2.png","medium_large-width":742,"medium_large-height":610,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2.png","large-width":742,"large-height":610,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2.png","1536x1536-width":742,"1536x1536-height":610,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2.png","2048x2048-width":742,"2048x2048-height":610,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2-566x465.png","card_image-width":566,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/wab_a11y_6_btn3.2.png","wide_image-width":742,"wide_image-height":610}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

3. In-panel widgets set in the controller or placeholder (such as Filter,<\/em>\u00a0Bookmark)<\/em><\/strong><\/p>\n

These widgets are similar to a button. Use the Enter<\/strong> key to open the widget panel, which focuses on elements inside the widget. Then, press Tab<\/strong> or Shift+Tab<\/strong> to navigate through the elements and press the Esc<\/strong> key to focus on the close button or back button.<\/p>\n

When the keyboard focus is on the close button or back button, use one of the following keys:<\/p>\n