“So, we don’t have a budget for accessibility. But it’s not a big deal. Our users don’t have disabilities anyway.”
Have you heard something like this from a team lead or business owner? The sentiment that “our users don’t have disabilities” is unfortunately incredibly common and incredibly untrue. Over one billion people (about 15% of the population) have a disability of some kind, and even more have temporary or situational impairments. You miss out on serving a huge portion of users by ignoring this demographic—and you risk a lawsuit in the process.
The truth is, there are many low-cost and no-cost steps designers can take with just a little know-how to keep accessibility top of mind. First and foremost, it doesn’t cost anything to become an accessibility champion.
Any kind of designer, at any level, can educate their team on the prevalence of users with disabilities.
More concretely, you can build accessibility into the design. While the full support of accessibility is not usually easy nor free—it can be a serious investment depending on the content of the site or app—there are a lot of straightforward things designers can accomplish to improve accessibility on any budget
Here are 16 “low hanging fruit” accessibility wins you can accomplish during the design process that require no extra budget or training.
1. Check color contrast
Color contrast applies to text size and UI graphics. The Web Content Accessibility Guidelines (WCAG) 2.0 require that normal text have a contrast ratio of at least 4.5:1 and large text have at least a 3:1 ratio. Any text that’s 18 point (24px) or 14 point (18.66px) and bold is considered “large text.”
Designing text, icons and images with adequate color contrast is an incredibly easy thing to do. It costs $0 to choose colors that are accessible to users with visual impairments, and as a designer, that decision is completely yours to make.
Who benefits
Accessible color contrast benefits users who are color blind or have low vision, age-related changes in contrast sensitivity, or tired eyes (or other visual temporary impairments).
A temporary impairment or situational impairment is an impermanent condition that simulates a disability. Examples include commuting, working in a loud office, having a kid hanging off your arm, or yes, even being tired.
Tools to use
You can check color contrast using one of the many free contrast checkers out there. Some popular tools include:
- WebAIM Color Contrast Checker (Web)
- Paciello Group Contrast Analyzer (Windows/Mac)
- WebAIM WAVE (Chrome extension)
2. Write in plain language
If you’re a copywriter, write in simple language. If you’re not, emphasize to copywriters that they should use vocabulary that an eighth grader can easily understand.
Language on buttons can easily become unclear since space is at a premium. When you show users a message that says, “Are you sure you want to cancel this order?” and the options are “cancel” and “close,” it’s no wonder users get confused. User actions need to be absolutely obvious.
Who benefits
Plain language benefits users with cognitive and learning disabilities and also users who simply don’t have time to process flowery copy.
Tools to use
- Datalyze Difficult and Extraneous Word Finder (Web)
- WebFX URL Readability Checker (Web)
- Readability Formulas Readability Checker (Web)
3. Break up large chunks of text
No need to belabor this one. Splitting up long paragraphs is another way to make content more readable.
Who benefits
Everyone. Seriously, everyone. But users with cognitive and learning disabilities tend to particularly struggle with large chunks of text.
4. Use descriptive links and headings
Screen reader users use headers to understand how content on a page is organized. They also use them to navigate the page.
Use HTML tags in your headers (H1, H2, H3 and so on). Make sure you use only one H1 tag per page, or you’ll disorient screen readers—they see the H1 tag as the beginning of the content.
Who benefits
Anyone using a screen reader, including people who are blind or experience low vision.
5. Add Alt tags to images
Alt tags are “alternative text” embedded into source code that illustrate an image. To write an alt tag, all you need to do is describe the context of what the image is conveying in a few key words. Screen readers pick up on alt tags and read them aloud so users with visual impairments can more fully understand the page’s content.
Who benefits
Anyone using a screen reader, including people who are blind or experience low vision.
6. Make text readable
Another easy one. 16px regular weight is recommended as a base.
You also need to make text resizable. Users should be able to read the content on the page when it’s zoomed in to 200%. You can test responsive design by setting the browser window to 1280px wide and zooming to 400%.
Who benefits
People who experience low vision, older users or even users whose screen resolution makes the default text too small to read.
7. Put notifications in context
If a user enters a form incorrectly and gets an error message, put that error message near the incorrect field and move the focus to the error. Displaying them at the top of the form but keeping the focus at the bottom of the form leaves the user wondering where they went wrong.
Who benefits
Screen reader users, users with cognitive disabilities, and well, everyone.
8. Don’t use color alone to convey info
Color should never be the sole means of indicating action, prompting response or distinguishing a graphical element.
Color can reinforce information but there needs to be another mechanism that displays the status of an action. In other words, you can’t just have a required form field turn red when the user leaves it empty—you need to include some kind of error message as well.
Who benefits
Users who are blind, colorblind, have low vision or choose to override webpage colors for any reason (perhaps because the color scheme is too light or dark, barely highlights links or is otherwise difficult to read).
9. Make content keyboard accessible
You should be able to navigate a webpage using only a keyboard. Use tab and arrow keys to jump from link to link or between form elements. If you can’t, the page doesn’t meet WCAG guidelines.
Screen readers and keyboard navigators rely on interactive elements embedded in HTML and CSS to move through the page and even offer shortcuts for skipping through content. Of course, this only works if the content is organized logically. Arrange page elements sequentially so they make sense to users “tabbing” through the page.
Who benefits
Keyboard navigator and screen reader users, including people with visual impairments and mobility issues.
10. Keep screens simple
Keep your screen as simple as possible. Cluttered screens are simply harder to use.
As a designer, you’re under pressure from the marketing team, SEO team, and product owners who are all advocating for certain features to get the spotlight. You need to make some tough choices and lay down the law: every feature doesn’t need to be visible at all times—it just needs to be findable.
Who benefits
All of us!
11. Provide shortcuts
Your goal is to make using your product as easy to use as possible. Offer help whenever you can. Provide pre-fill fields, auto-suggests, and shortcuts.
Who benefits
People with mobility challenges and those in a rush.
Extra credit wins
These “extra credit wins” involve modest amounts of effort on the front-end dev side but give huge accessibility benefits.
12. Use standard HTML
Advocate for using standard HTML code for drop-downs, radio buttons and other elements instead of designing custom versions. Screen readers look for standard HTML and can translate it easily, plus standard code already has accessibility functionalities built in. If you insist on doing a custom version, you need to code in accessibility features.
Who benefits
Users with screen readers.
13. Skip navigation
You can add a pretty straight-forward code to your global nav that allows people who are blind to skip repetitive navigation. While it doesn’t cover all cases where skip nav is beneficial, it’s still a helpful shortcut.
14. Label form controls
Give all form controls a label that helps users complete the form. Every text field, checkbox and menu dropdown should have an associated <label> element. Screen readers dictate these elements to users as instructions, so the labels should describe the intended user action, such as input, select or use the format MM/YYYY.
15. Multimedia content access
Accommodate the different ways users might intake information. If you have a lot of text, provide audio or video alternatives. If you have video, provide captions. If you have audio, provide a transcript.
16. Test for accessibility
We test our products for edge cases. We can test them for accessibility, too.
There are a few automated tools that help dev teams identify and resolve common accessibility problems, such as Axe by Deque or WAVE from WebAIM. You can also test for accessibility compliance yourself by navigating your site using only a keyboard, checking that audio has transcripts, and that video is captioned.
The easy case for accessibility
The case for accessibility is a no-brainer. You’ll avoid lawsuits, serve more customers, and out-pace non-compliant competitors. Best off, you’ll make your digital experiences even more engaging for everyone who takes part in them.
While these are quick wins, we know accessibility can still be complicated — especially for legacy products and technology stacks. We’re here to give you an inexpensive evaluation of how you can make your experience accessible for everyone, just get in touch!
