Add/Improve Keyboard Navigation to meet/improve WCAG standards

[chughes-lincoln]

It would be helpful to improve keyboard navigation to better meet Web Content Accessibility Guidelines (WCAG), partly because all US state and local governments will need to meet WCAG 2.1 Level AA by April 2026 for all public web content (and a lot of other countries have rules regarding web accessibility).

WCAG covers a lot of things (including having acceptable color contrast ratios, having high contrast basemaps (ESRI has a high contrast basemap that could be useful to add as one of the examples) not using color as the only means for conveying information, having alternative text for screen readers, having the application still function at higher browser zoom levels, and being able to interact with the application using only the keyboard). I’m focusing on keyboard navigation here, but I wanted to mention other aspects that should be considered (though a lot of it is in control of whoever is configuring the application).

What's Standard?

• I found a few sites mentioning some navigation standards - i.e. https://accessibleweb.com/question-answer/navigate-website-keyboard/ (I copied their examples below)
• Tab - move to next interactive element
• Shift + Tab - move to previous interactive element
• Return/Enter - activate elements (links, buttons, etc)
• Spacebar - activates buttons (such as to pause/play videos, submit forms, etc)
• Esc - close opened content (modals, navigation menus, etc) or cancel current action
• Arrows - navigate within widgets (tablists, checkboxes within a disclosure button, etc) and navigate around a page
• Map Navigation
  • I haven't found any standards for what keys should be using for panning/zooming, but the maps that I've seen that have good navigation used arrow keys for panning and +/- buttons for zooming (technically used "-" or "_" for zoom out and "+" or "=" for zoom in so that you don't have to hold shift to navigate)

What already works

• Can Tab/Shift+Tab (Hereafter referred to as Navigate) through some of the application - toolbar, any active tools, zoom to extent, etc
• Can use space/enter to activate buttons/tools (though only ones you can Navigate to)
• Can Navigate to metadata icons in Catalog (only if Catalog is active and layer with metadata isn’t hidden (i.e. in an unexpanded group)
• Can Close and Run tools
• Can Navigate to and interact with drop-down menus/text boxes in any active tools
• Can use escape to back out of active tools (akin to clicking Close)
• Search seems to be completely functional (assuming you can activate a search tool)
• Navigating through tab results works (Navigating to any links, up/down arrows to scroll); Same with grid (assuming it’s not minimized)

What doesn't work

• Can’t Navigate to the map
• Can’t Navigate to any inactive tab (i.e. Catalog/Favorites/Visible/Super Tab)
• Can’t Open search drop-down menu
  • It opens when you hover over it, but not when you navigate to it and hit Enter/Space
• Can’t Navigate to tab toggle button
• Catalog/Favorites
  • Can’t navigate to groups or layers
  • Can’t expand/unexpand groups
  • Can’t turn layers on or off
  • Can’t Favorite/Unfavorite layers
  • Can’t access sketch tools
    • Can't access the additional icons that show in the map when you open the drawing tools
  • Can’t access fade/unfade icons
• Visible Tab
  • Can't Navigate to Up/Down Icons
• Tools
  • Measure/Select/Identify
    • Can’t change measure Units/Using parameter for select/any radio button
• Tab Results
  • Can’t access Zoom to/delete/buffer buttons (if configured)
  • Can’t navigate to header buttons (clear all results/zoom to results)
  • Highlight on Hover - some sort of analogous functionality for highlight when result is navigated to somehow?
• Grid Results
  • Can’t Navigate to Download as CSV or Min/Max buttons
  • Can’t access zoom to/delete/buffer buttons
  • Can’t access Sort/Filter buttons
• Interacting with Map in General (Measure/Select/Identify)
  • This is more complicated - I could see something like an icon is added at the center of your map when you’re not using a mouse/when you start navigating by keyboard controls, and space allows you to click/enter allows you to run the tool? - that would give the basic functionality for running an identify/selection/adding sketches - I found a MN gov document that suggested adding a crosshair graphic and fetching the map center for the location of the click event

What could be improved

• What uses Enter vs Space seems inconsistent (could just be that I don't understand what should be using space vs enter)
  • i.e. Identify - Space starts the tool (akin to left click), Enter runs the tool which throws a pop-up error because the tool was run without a geometry - may be the expected behavior but it can be a bit jarring
  • i.e. Print - Space or Enter allows you to open the various drop-downs; only Enter allows you to select the drop-down
• Escape for backing out of popups? - currently escape will close any active tools in the Super Tab
• Navigation Order?
  • If I activate a tool that give you a pop-up you have to tab through a bunch of stuff to get to the pop-up (potentially more if interacting with the catalog works)
  • I could see people getting frustrated if you have to tab a bunch of times to get to the map - I saw a webmap that had a menu that only appeared if you were navigating by keyboard that gave you a bunch of shortcuts you could jump to so that you didn't have to tab through the entire interface

[elil]

See also, PSC minutes with background info and links/references, https://github.com/geomoose/geomoose/wiki/PSC-Meeting-2025-04-25

[chughes-lincoln]

I figured out a couple ways of adding keyboard navigation to the tabs and the tab toggler by modifying the index.html file (allowing you to change between the Catalog/Favorites/Visible/Super Tabs, and open/close the tab panel).

The easy way:

Just replace the spans for the tabs and the tab toggler with buttons, as the functionality is already built in. From what I've read it's recommended to use elements that already have the functionality built in rather than trying to add it to something that doesn't (like a div or a span). The result is a bit ugly for the tabs as they now look like buttons instead of a tab header, but that could be adjusted in the css.

<button type="button" id="catalog-tab" class="tab show" onclick="showTab('catalog', event)">Catalog</button>

The slightly harder way:

Manually add the functionality to index.html - For each of the tabs and the tab-toggler, add role="button" (so that screen readers know it's a button - though I didn't notice any impact to adding it) and tab-index="0" (so that it can be navigated to). I also had to add an id to the tab toggler. Then add a block of javascript adding the space/enter functionality.

<span role="button" tabindex="0" id="catalog-tab" class="tab show" onclick="showTab('catalog', event)">Catalog</span>

<script>
/* JavaScript */
      document.getElementById("catalog-tab")
            .addEventListener("keyup", function (event) {
                  event.preventDefault();
                  if ((event.keyCode === 13) || (event.keyCode === 32)) {
                    showTab('catalog', event)
                  }
          });
</script>

[klassenjs]

See #921