Accessibility, Technology, User Experience

More than Mouse Clicks: A Non-Disabled User’s Guide to Accessible Web Navigation

Written by  J. Hogue

The world of digital accessibility can be daunting. There are many regulations and ways in which a website can be accessible or inaccessible. Many of us don’t understand what a good or bad experience looks like, and we think we can’t possibly understand people who rely solely on assistive technology to use the web. 

It doesn’t have to be daunting, though. And with anything, the key is to start small. To those who create websites or own/manage one, the first step to understanding accessibility is empathy. If more people used assistive technology, more people would understand the difference between a terrible experience and a great one. Don’t be scared of learning about accessibility tools, because you might already be more familiar with them than you realize.

Have you ever broken your dominant hand and been forced to use a keyboard instead of a mouse or trackpad? Have you tried to complete a payment form really quickly to snag concert tickets, and figured out that using the keyboard can be much faster? 

Have you been in loud surroundings and tried to watch a video? How great are captions? Have you realized that captions are assistive technology? There are alternate modes of consuming content and using a digital product that are beneficial to a much wider audience than the audience it was created for. 

With some instruction, we hope more people feel comfortable using a keyboard to navigate a website. We also hope that more of you are brave enough to try a screen reader as well, or at least watch our video to experience what that experience can be like. 

Video Tutorial

Our video is 37 minutes and we provide a break-down of the different minute-marks below if you’d like to jump to a certain area. (All cookies must be accepted for the video to play. You may also view on YouTube directly.)

Table of Contents

  1. 00:00 — Using a Keyboard
    1. 02:00 — The tab key
    2. 02:20 — A “Skip to Content” link and why that is so useful
    3. 03:40 — “Focus ring” style
    4. 04:20 — An example of an inaccessible drop-down menu
    5. 05:40 — An example of an inaccessible link (no focus ring)
    6. 07:40 — Common article card patterns and how they work with a keyboard
  2. 10:45 — The Screen Reader Experience
    1. 11:10 — Invoking VoiceOver with Command F5
    2. 12:35 — Tabbing through interactive elements
    3. 12:54 — Skip to Content link
    4. 13:07 — Company logo
    5. 13:55 — Projects link
    6. 14:31 — Topics
    7. 15:55 — About Us link, inaccessible to keyboard users
    8. 16:16 — Reading of non-interactive elements with Control Option arrows
    9. 16:50 — Reading content, Headings, links
    10. 18:50 — Visually hidden heading but screen reader accessible
    11. 19:55 — Alt text image examples
    12. 20:06 — Kittens, no alt tag present
    13. 21:06 — Doggos, empty alt tag
    14. 23:00 — Squirrels, descriptive alt text
    15. 23:48 — Article content examples
    16. 23:53 — Article 1 example, too many links
    17. 25:37 — Article 2 example, too much content
    18. 26:32 — Article 3 example, hidden content
    19. 27:44 — Article 4 example, alternate pattern
    20. 30:02 — Voiceover’s Rotor Feature, control option U
    21. 30:15 — Headings menu
    22. 30:55 — Empty heading element
    23. 31:50 — Other Rotor menus
    24. 32:18 — Non-visited Links menu
    25. 33:01 — All Links menu
    26. 33:40 — “Click here” and “Read more” link text
    27. 35:09 — Landmarks menu
    28. 35:25 — Form Controls menu
  3. 36:06 VoiceOver off and wrap up

For those who want to learn a little more, below we collect a few keyboard command cheatsheets for navigating a webpage or using VoiceOver on a Mac. Links to additional resources for setting up and getting started with VoiceOver are also included.

More Resources

Keyboard User Cheatsheet

  • Tab key — Navigate from link to link
    • For sighted users who can still use a mouse: Getting started on a page might mean clicking into the top left corner to get the keyboard focus to be within the browser window and not on the desktop or in the browser (URL bar)
    • In a Checkbox list in a form, the tab key will move from one element to another
  • Return key (Enter) — “Presses” a link to open the destination or perform the one page action (for buttons)
  • Spacebar
    • When over an interactive element in a navigation, spacebar opens the element. Arrow keys may move up and down through the open list, or the tab key can be used. Spacebar again should toggle the element closed.
    • In a Checkbox list in a form, the spacebar chooses the element currently in focus
  • Escape key — Close most items that have been opened, like pop-up modal windows
  • Arrows Up/Down — Generally, scrolls the page
    • In a Radio Button group in a form, Tab will select the group of options while arrow keys will traverse the list
    • With a Select list in a form, Tab makes the list active. Arrow keys traverses the list. Enter key selects the option in focus.
  • Any letter key — With a Select list in a form, Tab makes the list active. When active and open, a letter key will jump to that letter in the list. Useful for long lists, like States or Countries.

VoiceOver Cheatsheet

These key commands reflect the default set-up for Mac OSX — I have not made any modifications. Of course, power users will modify these commands to fit their needs. 

The default VoiceOver key command combination is ^Control ⌥Option. This combination is used to ensure key combinations do not conflict with other quick key commands through the OS and Apps.

Many key commands for navigating a webpage are the same as a Keyboard user. Return, Spacebar, and Arrow keys all work the same.

  • ⌘Command F5 — Open and start Voiceover
  • ^Control ⌥Option Arrow Right — Read next string of text
  • ^Control ⌥Option Arrow Left — Read previous string of text
  • ^Control ⌥Option Space — “Presses” a link or button
    • For some elements, VoiceOver will announce that there are “Actions available.” Access the Actions menu with ^Control ⌥Option Space, and navigate the menu with the up and down arrow keys; press VO-Space to select a custom action.
  • ^Control ⌥Option M — Access the Apple Menu (File, Edit, View, etc.). Escape Key returns to the web page content.
  • ^Control ⌥Option H twice quickly — Commands Help menu
    • While inside, arrow keys move up and down in lists. Left and Right arrows move from one list to another. Return key chooses an element from a list
  • ^Control ⌥Option K — Keyboard Help. Similar to Command Help, but here, keys can be pressed without having any effect on the system (like a practice session). Escape key exits the Keyboard Help session
  • ^Control ⌥Option U — Open the Rotor
    • While inside, arrow keys move up and down in Rotor lists. Left and Right arrows move from one list to another. Return key chooses an element from a list, closes the Rotor, and moves focus to the selected element. Escape key exits the Rotor
  • Traversing the page by Element Type:
    • ^Control ⌥Option H — Find next heading
    • ^Control ⌥Option L — Find next link (different from the Tab key as it will look for Links only, not buttons that perform on-page actions)
    • ^Control ⌥Option J — Find next form control
    • ^Control ⌥Option T — Find next table
    • ^Control ⌥Option X — Find next list
    • ^Control ⌥Option F — Find next frame

Additional Resources to Start Using VoiceOver

Conclusion

With some practice, we hope you might find that using a keyboard to navigate can be your superpower. When filling out forms, for example, I use the keyboard almost exclusively to quickly move from one field to another and to find my state in a long drop-down list. Unless, of course, I run into another poorly coded form that is not accessible. Lucky for me, I can go back to using a mouse. But some do not have that option, and for them, our empathy should turn into empowerment and we shall demand better from our design and development practices.

For questions or to discuss how to make your next project more accessible, please contact us anytime.

More in Our Accessibility Series

Notable articles from the Accessibility category:

Related Insights

ARTICLE AUTHOR

More about this author

J. Hogue

Director, Design & User Experience

I have over 20 years of experience in design and user experience. As Director of Design & UX, I lead a team of digital platform experts with strategic thinking, cutting-edge UX practices, and visual design. I am passionate about solving complex business problems by asking smart questions, probing assumptions, and envisioning an entire ecosystem to map ideal future states and the next steps to get there. I love to use psychology, authentic content, and fantastically unique visuals to deliver impact, authority, and trust. I have been a business owner and real-estate developer, so I know what is like to run a business and communicate a value proposition to customers. I find that honest and open communication, a willingness to ask questions, and an empathy towards individual points of view are the keys to successful creative solutions.

I live and work in Providence, RI, and love this post-industrial city so much that I maintain ArtInRuins.com, a documentation project about the history and evolution of the local built environment. I help to raise two amazing girls alongside my equally strong and creative wife and partner.