Accessibility has become a top-of-mind topic for businesses, government agencies, and developers of technology in recent years; U.S. legislation like Section 508, which requires inclusivity for end-users of all abilities, has emerged in recent years and historic exemptions for web mapping have been eliminated.
Since 2015, Geocortex Viewer for HTML5 has been accessible out-of-the-box and meets the criteria to be Web Content Accessibility Guideline (WCAG) AA compliant, without requiring administrators to undertake complicated and onerous configuration or development. In this week’s Tech Tip, Garrett takes a closer look at screen reader support, keyboard navigation, and other accessibility features that ship with Geocortex Viewer for HTML5.
Video Transcription
“Hi my name is Garrett, I work on the Product Experience Design team here at Geocortex. Today we’re going to take a look at some of the accessibility features included in our viewers. You don’t need to do anything to configure these – they’re all included out-of-the-box with every viewer implementation.
Geocortex Viewer for HTML5 is accessible and meets WCAG AA standards. This has taken a lot of work on our part to look at many different things, from color contrast to screen reader support to keyboard navigation.
Let me show you how keyboard navigation works in [Geocortex Viewer for HTML5]. First, we have skip links. When you first come to our viewer and use the tab key to navigate throughout the application, the first time you hit “tab” you’ll be presented with what we call skip links. This gives you quick shortcuts to jump to popular portions of our viewer.
The skip links allow you to jump to other regions in our application without having to tab through each individual, clickable item. If we wanted to jump straight to the tool bar, we just tab over and hit enter. Now once the toolbar is open, we can navigate through the different tabs on the toolbar to find an individual tool that we want to use.
Let’s try drawing a polygon on the map. When we activate the drawing tools with keyboards, we have activated “accessibility drawing mode”. Once we’ve activated the polygon drawing tool, our focus is now on the map, as indicated by the purple line around the map. We can now draw on the map using the keyboard.
Hitting Enter will drop a marker in the center of the map extent, and we can control the position using the arrow keys on the keyboard. Hitting Enter will drop a vertex on the map, from which now we can move our cursor around with the keyboard. Hitting Enter again will drop another vertex. If you find that the increments with which the keyboard moves around is too large, you can hold the Alt key and you get a more fine-grained control over where you want to drop the vertex.
Hitting Enter again will complete the shape, and now we can edit this shape using the keyboard shortcut “V”: we can cycle through all the vertices, which we can move. Holding Shift+V will cycle the vertices in reverse order. Between each vertex, another handle will get added that we can then drag out to edit the shape, which will add more handles that we can edit. When we’re done drawing the shape, hit Enter again to complete the shape. And now your shape is drawn on the map. If you hit Enter again, you can draw a second shape. And that’s how you draw on the map with the keyboard.
Another great accessibility feature in our viewers is screen reader support. Geocortex Viewer for HTML5 supports the combination of Firefox with the NVDA screen reader. The screen reader will read aloud changes in the application, links, text, map location, those sorts of things.
In combination with some of the keyboard support, we can navigate through the viewer and the visually impaired will have the benefit of a screen reader reading out the context and instructions to them. Let’s try a couple examples here.
[Screen reader reading results]
Now know that we can perform a search because the screen reader has read out those instructions for us. So, let’s perform a simple search.
[Screen reader reading results]
After we perform the search, the screen reader read out that we’ve closed the home panel and opened the search results panel. We can tab through here to hear other instructions.
[Screen reader reading results]
As you could hear, as we zoom to all the features in the feature collection, the screen reader read out the coordinates and extent change on the map to keep users centered with where the map is now located.
To learn more about accessibility with our viewers, you can visit our Documentation Center at docs.geocortex.com. Just search for “accessibility” and you can read all about accessibility in our viewers, including a detailed list of all the keyboard shortcuts to help you navigate through applications with just the keyboard.”
You can learn more about Geocortex Essentials accessibility features in our 2017 webinar, which is available on YouTube here.
Contributors