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.
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
- 00:00 — Using a Keyboard
- 02:00 — The tab key
- 02:20 — A “Skip to Content” link and why that is so useful
- 03:40 — “Focus ring” style
- 04:20 — An example of an inaccessible drop-down menu
- 05:40 — An example of an inaccessible link (no focus ring)
- 07:40 — Common article card patterns and how they work with a keyboard
- 10:45 — The Screen Reader Experience
- 11:10 — Invoking VoiceOver with Command F5
- 12:35 — Tabbing through interactive elements
- 12:54 — Skip to Content link
- 13:07 — Company logo
- 13:55 — Projects link
- 14:31 — Topics
- 15:55 — About Us link, inaccessible to keyboard users
- 16:16 — Reading of non-interactive elements with Control Option arrows
- 16:50 — Reading content, Headings, links
- 18:50 — Visually hidden heading but screen reader accessible
- 19:55 — Alt text image examples
- 20:06 — Kittens, no alt tag present
- 21:06 — Doggos, empty alt tag
- 23:00 — Squirrels, descriptive alt text
- 23:48 — Article content examples
- 23:53 — Article 1 example, too many links
- 25:37 — Article 2 example, too much content
- 26:32 — Article 3 example, hidden content
- 27:44 — Article 4 example, alternate pattern
- 30:02 — Voiceover’s Rotor Feature, control option U
- 30:15 — Headings menu
- 30:55 — Empty heading element
- 31:50 — Other Rotor menus
- 32:18 — Non-visited Links menu
- 33:01 — All Links menu
- 33:40 — “Click here” and “Read more” link text
- 35:09 — Landmarks menu
- 35:25 — Form Controls menu
- 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.
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)
- 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.
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
- Welcome to VoiceOver, Apple website
- Deep dive into using VoiceOver and customizing the system to work the way you prefer
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:
- Supporting Personal Safety: Best Practices with a Quick Exit Button
- Equity by Design with a new Inclusive Language Tool
- Redesign & Relaunch: Oomph’s Color Accessibility Tool for Designers gets a Redesign
- There is no Magic Wand: Plugins won’t fix accessibility
- Evolve your Best Practices: More Accessible HTML Forms
- Accessibility: Images, “Alt” tags, and the “Out Loud” Experience
- Accessibility is not only for Disabilities