Published: May 26, 2017

The differences between keyboard and mouse navigation are more than just the type of device someone uses; navigation shapes a user’s whole approach. Most screen readers use keyboard navigation where keys are assigned to various kinds of content and actions. Mouse navigation is any sort of pointing device that moves freely across the screen according to a user’s hand eye coordination.

If information is programmatic and a screen reader has a protocol for navigation by that type of information, a screen reader user can move through content by type of element. Programmatic information means the screen reader has access to the information and knows what it means. For example, most screen readers have assigned “h” to move from heading to heading throughout a page or website. NVDA and JAWS screen readers have the command “control+tab+arrow keys “programmed to allow the user to navigate by cell in any direction inside a table. In NVDA, “Caps lock/insert+F7” gives a user lists of various elements with their labels as an alternate way to summarize and navigate the content on a page.

Here is a video of a screen reader user demonstrating basic website navigation.

While many other accessible technologies use keyboard navigation, the focus of this article is explaining keyboard navigation as it relates to a screen reader. Devices such as keyboards and mice lead users to navigate using different techniques, but devices can also impact the way someone approaches and perceives content.

How Perspective Changes Understanding

Putting aside all ecological accuracy, imagine digital content is the swamp a user has to explore to extract and use information. One user is a frog that jumps from lily pad to lily pad, with some flexibility in direction and length of jump, but a limited path by which to navigate. Another user is a dragonfly, buzzing around from above, with what seems like an infinite number of paths to travel. The frog will probably have a more linear understanding of the swamp—jump forward, left, good place to swim, forward, right, yikes alligator. The dragonfly probably has a more spatial understanding of the swamp—clump of trees straight ahead, off to the left is a flower and then right behind that flower is a hungry looking frog. The frog is more likely to use objects it finds as landmarks, as it must pay closer attention to its immediate location with its possibilities and obstacles. The dragonfly, on the other hand, is more likely to use unique visual qualities such as a patch of orange flowers and the swamp rat half way between two groups of trees; the dragonfly does not have set gradations defined by leaps from one place to the next, so it is more likely to understand the swamp as a whole by whatever qualities are most distinctive.

Similarly, a screen reader user is more likely to construct a map of the swamp in her head based on her experiences and priorities. A sighted mouse user is more likely to start out with a literal map of a space and to mentally add markers that correlate to his experiences and priorities. It is important to look at the swamp/digital content from the perspective of the frog/screen reader user in order to be able to design accessible content for her.

Tab Order

The most basic version of keyboard navigation is tab order, which is simply the order a user would go through each  of the interactable elements in digital content if they were to hit the tab key until going through everything. Tab order is like the frog jumping from one lily pad to the next until she lands on all of them. All interactive elements, such as links, buttons, and form fields should appear in tab order. Elements such as a link or box designed to look like a button are not standard focusable elements, so it is important to make them focusable. When focusable, they should appear in the tab order. However, it is also important to make sure tab order makes sense and provide access to all the interactive elements on a page. For example, in a web form, a “submit” button should not come before the last form field a user needs to complete. All of the navigation controls should come in the same order and groups as they are arranged visually. If text refers to a control that follows, a user should be able to tab forward from the text and find the mentioned control.

There are also other, more complex problems with tab order. The virtual buffer is a mode screen readers use to interact with elements not normally accessible through the standard settings. Screen reader users switch regularly in and out of the virtual buffer mode when using webpages, but sometimes content that appears in the tab order while in virtual mode does not appear in the tab order while out of virtual mode (or vice-versa). This is problematic, because a user might not know they need to switch modes and thus miss content.

Tab order also needs to stay consistent. A common problem is that navigating with shortcut keys by line, link, or form field may be different from the tab order. It is disorienting to have the tab order relocate the user to a different part of the page from what all other behavior would indicate. The order of content can also change based on whether a user is tabbing forward or backward.  Make sure to actually check, not just assume, the tab order.

Function of Elements

Another important component of keyboard accessibility is making sure that every function that a mouse can perform can also be completed with only a keyboard.

If a user can open a dropdown menu with their mouse hovering over it, play media by clicking on a page element, or add a signature into a field by moving the mouse around, they should be able to complete the same actions using a keyboard. Unless there is something key to the movement of a mouse, such as testing how quickly and accurately a user moves the cursor, there needs to be a way for a keyboard user to access every function that a mouse can complete.

Content Structure Related to Keyboard Navigation

Part of being a skilled screen reader user is knowing the different ways to navigate a computer whether using a keyboard or gestures or a mobile device with gestures designed to navigate a touch screen. Here is a video of a screen reader using a variety of tools to both navigate and figure out the organization of content. Some screen reader users can quickly bounce around the screen, assessing what is there, nimbly find the content they want without having to navigate through every single piece of content. They are able to do this because of accurate usage of markup for headings, landmarks, lists, tables, form fields, graphics, iframes, controls, paragraphs, etc. Each piece of markup communicates important information about the larger picture of a webpage. For example, a H2 heading followed by a series of H3 headings indicates sub-content related to the first heading; another H2 heading indicates new content or subject matter. The first form field on a page is likely to be a search box. And an “article” landmark is possibly the only thing a user wants to bother with on a particular page, or something the user is not at all interested in. The article Basic Structure goes into the organization of content in greater depth.

Mental Maps

While a user creates a mental map for their own convenience and ability to understand content based on the designations they can access, the designer can help the user access content that might become part of their mental map. It can seem more obvious to communicate visually, because humans tend to perceive a majority of the world visually. However, it is possible to and necessary to perceive the world in other ways. There are ways to include information that will give the frog a sense of what the dragonfly sees.

Providing alt text is useful, but it generally does not help a user sort and organize content in a way that leads to actually understanding the big picture. Identify tasks someone should be able to complete on a page and what happens to assist a user in completing them. Grouping related links helps a sighted user sort for the one they want. Enlarging font size and placing it high and to the left of the screen, in languages that read left to right, gets people to read that content first. Someone using a screen reader will not know about its placement on the page, but if it appears first in the DOM, the blind user will have a similar experience. Streamlining a process and helping the user move forward and backwards helps them complete the process accurately. Using tools that provide programmatic information with appropriate markup gives screen reader users access to the same cues that help sighted users navigate. It’s impossible to provide guidelines for every possible way users consume content, but having a strong basic structure is a good start. Just as mouse users have different experiences based on factors such as skill level and what attracts their attention, there is no single approach that guarantees accessibility for keyboard users. However, it is possible to provide tools that make content more accessible. The best test is to have multiple screen reader users try using your content.

Conclusion

The frog and the dragonfly can both use the same swamp effectively, even though they might experience it differently. Keep in mind what is necessary to ensure screen reader users have keyboard access so they have the ability to use every part of your digital content and organize content meaningfully so they can find their way around.