Accessibility Best Practices for People With Visual Impairments
When surfing the Web, people with a visual disability often use “screen readers”—or assistive technology that “reads” a webpage aloud via computer-generated voice. Screen readers, while helpful, depend on web design and how the website is developed and coded. That’s why web accessibility is so important.
If you have a website, then you have a responsibility for website accessibility. 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. That could be:
- 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
Does your website allow 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 follow accessibility standards.
Accessibility Best Practices for People With Visual Impairments
Thoughts on accessibility delivered to your inbox
1. Use Aria-Label Attributes on Pop-Up Windows
Modal windows (aka, pop-up windows) are popular for advertising, forms, and video. If your site uses any sort of pop-up, ensure that the window buttons—especially the “X” close window button—are accessible by using aria-labels.
Think about accessibility in terms of user experience. A modal window without an aria-label attribute is an accessibility issue simply because it creates poor functionality. Without the aria-label attribute, a user with a visual impairment would be locked within the modal because they could not X out. They’d be forced to leave the site altogether! Accessible design makes the difference for entire groups of potential users who want to engage with you.
2. Use Opacity
Color alone plays a major role in creating accessible content. The Web Content Accessibility Guidelines (WCAG) have accessibility requirements that include the use of color contrast for colorblind users. Utilize opacities—i.e., non-transparent backgrounds—where possible so that the color adjusts to the users’ accessibility settings within the screen reader device they are using.
Note: Most smartphones have assistive technology that allows 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 are the fonts that are always available on your computer. They allow for better resizing for custom font 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 accessible design (e.g. underlining) or context cues rather than color alone increases the usability of your website.
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). It also keeps pictures as they would normally appear. This way, 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! Audible cues help describe what’s happening onscreen without interrupting the dialogue and sound. There are other apps that will provide auditory 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.
Every Website We Build is Built to WCAG Standards
At Mighty Citizen, we know accessible web design is crucial for an equitable internet. That’s why every website we build is built to WCAG standards. Let us know if we can help you build an accessible website—or if you simply want an Accessibility Audit.
