Author: John Cotter
Imagine doing your taxes online with your eyes closed. Impossible right? And not just because taxes are hard. You wouldn't know what you're clicking!
So how does someone who is blind interact with the web if they can't see the screen or the mouse pointer? Answer: They don't use a mouse. They use a screen reader along with a keyboard or touch screen gestures.
What about someone without hands? Do they use a mouse? Maybe. Or they might prefer to use voice control assistive technology, a keyboard, or other pointing devices.
Thinking that everyone on the web has 20/20 vision and the dexterity of a jazz pianist is an old way of thinking. Not all users use a mouse. When we design and build web content, we need to constantly ask, "How would this person use this thing?"
Touch Screens
On a touch screen, there is no mouse pointer. That means no hover effects: Touch screen users cannot "hover" to discover information. Important info must be visible by default or easily discoverable by touch. Hovering shouldn't be the only way to view tooltips or operate menus.
While you're designing for touch screen users, your touch targets should be about the size of a fingertip. The Web Content Accessibility Guidelines say that a good minimum target size is at least 24 x 24 pixels (WCAG SC 2.5.8). Imagine someone with hand tremors trying to tap on a tiny X button to dismiss an annoying ad!
Keyboard
Some people fill out forms all day for their job and they prefer to use a keyboard — it's way faster when you don't need to switch between mouse, keyboard, mouse, keyboard, etc. The secret to their success is the TAB key.
Try it yourself! Visit any webform and press the TAB key. Watch as the focus moves through the form. If you can't tell what has focus, that's an accessibility problem. If you need to navigate backwards, press SHIFT + TAB.
Note: Mac users may need to enable "Full Keyboard Access" for TAB key navigation.
For accessibility, any action you can do with a mouse needs to have a way of doing it with a keyboard.
Screen Readers
Users who are blind or have low vision use screen reader assistive technology to read text on the screen.
On a touch screen device, with a screen reader running, users perform swipe gestures to move focus through a web page. As focus moves, the screen reader announces information about each element. Users double-tap to activate links, buttons, and other controls.
On a traditional desktop or laptop, screen reader users use a keyboard to navigate. To browse a page quickly, a screen reader user can listen to a list of every heading on a page. This is why using headings effectively in web design is so important.
Voice Control Assistive Technology
Individuals with spinal cord injuries, muscular dystrophy, chronic nerve pain, and other mobility impairments may operate their devices hands-free using voice control assistive technology. These users can interact with form fields, links, buttons, and other controls by speaking to their device.
Accessibility happens because of you.
Accessibility starts with thinking about another person as you design and develop for the web. A person with a disability wants to interact with modern society too. And it's definitely possible when web designers and developers take responsibility for it.
Here are your next steps to creating accessible web content:
Try to navigate your site using only a keyboard.
Run automated accessibility testing tools and address any issues found.
Ask someone with a disability to test what you've made.
Contact the NC Digital Solutions team for expert help with accessibility.