ArcGIS Blog

Oct 01, 2019

How accessibility features work in Web AppBuilder apps

By Tonghui Ming

Accessibility support is an important goal at Esri. Creating accessible web content, including accessible apps, can benefit people with disabilities, and also provide a better user experience for everyone.

Web AppBuilder and accessibility

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.

While the development team strives for continued Section 508 and WCAG 2.0 compliance, here are some helpful tips to consider as you use or create Web AppBuilder apps.

Keyboard navigation

Navigate between sections

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.

You can navigate between these sections by using the Esc key, without the need to tab through all the elements within them.

Web AppBuilder app with sections labeled and arrows showing how the Esc key navigates between them — Use the Esc key to quickly navigate through sections in Web AppBuilder apps.

You can also use the Skip links to quickly direct keyboard focus to other sections.

Skip to Map link highlighted in a portion of a sample app with a side panel — Use the Skip links to quickly direct focus to other sections in the app.

Navigate widgets

Widgets are key components in Web AppBuilder apps. Depending on the functionality, there are three ways to interact with the widgets:

1. Single off-panel widgets on screen (such as Default Extent, Full Screen, My Location)

These widgets are treated as a button and can be activated with the Enter key.

Single off-panel widgets highlighted in a portion of a sample app — Single off-panel widgets appear in the app as buttons, which you can activate with the Enter key.

2. Off-panel widgets with more than one element (such as Zoom Slider, Extent Navigate, Search)

These widgets are treated as a container. Use the Enter key to focus on the elements inside and the Esc key to return focus to the container itself.

If a widget panel has a container as a component inside it, you can also use the Enter key to focus inside and the Esc key to focus backwards.

Widgets that contain multiple focusable elements — 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.

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 — 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.

3. In-panel widgets set in the controller or placeholder (such as Filter, Bookmark)

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

When the keyboard focus is on the close button or back button, use one of the following keys:

Esc—Returns focus to the widget icon so you can continue to navigate to the next one without closing the widget panel.
Enter—Closes the widget panel and returns focus to the widget icon.

Bookmark widget with labeled arrows showing how the Enter key moves focus inside the widget panel and the Esc key moves focus out of the panel

Navigate out of the web app

To move the keyboard focus out of the app, navigate to the last focusable element in the app (such as the Attribute Table widget in the image below), and use one of the following methods:

For users without a screen reader, press Tab twice to navigate out of the web app.
For screen reader users, press the Tab key once (or Option + Tab for Mac users) to hear a notification that says, “Press Tab to continue and move out of the app, press Shift and Tab to go back to Skip Links within the app.” Then, press the Tab key again to navigate out of the web app.

Sample app with focus on the last focusable element and labeled arrows indicating that you tab twice to move out of the app — On the last focusable element (the attribute table, in this example), tab once to get the screen reader hint (if applicable), and tab again to move out of the app.

Use the Esc key

To summarize, use the Esc key when you need to:

Go back to the focusable container of the current focused element.
Move focus to a close button or back button in a panel (if applicable).
Quickly cycle through the focusable sections in accessible themes (if applicable).
Cancel a modal window (if further actions aren’t needed, such as a Splash window without user confirmation) or a pop-up list.

Filter widget with tool choices highlighted and a label indicating that you can use the Esc key to close the pop-up menu — Use the Esc key to close pop-up menus.

Alt text

Web AppBuilder provides the options to add alt text for images, maps, charts, and so on.

For uploaded images, the alt text comes from the image file name.

Configuration window for the Infographic widget with labeled arrow indicating that uploaded images use the file name for the alt text — Alt text for uploaded images comes from the file name.

More information

Look for more blogs about accessibility of Web AppBuilder apps to be posted in the near future.

Tonghui Ming

Product Engineer on Web AppBuilder and Experience Builder team. Big fan of aquariums.