Is Your Website Accessible to People Who Are Blind?
Last month, we sent (another) one of our interpid digital reporters, Senior Project Coordinator Valerie Hinze, to SXSW Interactive to bring back the lastest trends and best practices. Here's what she learned...
When I joined the session titled "Designing for Accessibility," delivered by Jordan Dunn, a product designer at WillowTree, he stunned me by opening with this statistic:
Eight million Americans have a visual disability.
When surfing the Web, people with a visual disability often use "screen readers"—i.e., software that "reads" a webpage aloud via computer-generated voice. Screen readers, while helpful, depend largely on how the website is designed.
It's easy to launch an inaccessible website without realizing it. You may have one right now, in fact.
Let's fix that.
The Golden Path
Your website's "golden path" is any specific goal you want your users to achieve online:
- a product you want them to buy
- a story you want them to read
- a form you need them to fill out
- a donation you're soliciting
And so on. And then, ensure that your website allows users with visual impairments or blindness to access this golden path just as effectively as any other user would. Make certain that all the pages and content types along your golden path are fully accessible.
How to Make Your Website Usable by People With Visual Impairments
1. Use Aria-Labels on Pop-Up Windows
Modal windows (aka, pop-up windows) are popular for adverising, forms, and video. If your site uses any sort of pop-up, ensure that the window buttons—especially the "X" close-window button—is accessible by using aria-labels.
Jordan demonstrated someone trying to use an unlabeled modal window, which ended up locking the user within the modal because they could not X out. The user was forced to leave the site altogether.
2. Use Opacity
Utilize opacities—i.e., non-transparent backgrounds—where possible so that the color adjusts to the users accessibility settings within the device they are using.
Note: Most smartphones allow the user to customize colors to adjust to their visual preference. Some preferences include filtering based on color, adjusting color, intensity, or applying grayscale.
3. Use Stock Fonts
Stock fonts allow for better resizing for custom size settings. Users can also select a text magnification on most devices. Custom fonts generally do not adjust to these settings as well as stock fonts do.
4. Use Something Other Than Color
... to highlight key messages and hyperlinks.
Color can vary widely for visually impaired audiences—ranging from those using a screen reader to screen inversion (dark background with light text) or color adjustments. Using design elements (e.g., underlining) or context cues rather than color alone make your site much more accessible.
Want to Become an Accessibility All-Star?
Consider developing your website with a "night mode" option:
Night mode inverts your light and dark colors (e.g., light text on a dark background) but also keeps pictures as they would normally appear so that the user can still get the full photography experience, if they choose. Many inversion settings will also invert photography, which can keep the user from feeling as though they’re receiving the full experience of the site.
Other Tools for Users With Visual Disabilities
- Visually impaired users like to enjoy a good movie, too! So Disney provides audible cues for movies on their Disney Movies Anywhere app. Audible cues help describe what's happening onscreen without interrupting the dialogue and sound. There are other apps that will provide visual cues for photos, movies, and even everyday life.
- Through bone conduction headphones, a visually impaired person can listen to the cues (in a movie or TV shows) via the headphones while also listening to the words as they normally would. The headphones are worn on the facial bone rather than in the ear.