How can you build a more accessible website?
The simple answer is to read through the Web Content Accessibility Guidelines (WCAG) and follow the requirements when creating your designs. But understanding the rules doesn’t necessarily lead to better practices; if you don’t build accessibility into your workflow, it’s easy to make basic mistakes.
In this article, we’ll discuss six simple rules that can guide web designers towards a more inclusive mindset. For additional guidance, download our free eBook: Developing the Accessibility Mindset.
1. Test for color contrast from day one
There’s a reason that low contrast is one of the most common accessibility issues: Designers think about aesthetics first and foremost. If you don’t have color vision deficiency (CVD, also incorrectly referred to as color blindness), you can easily miss low-contrast text.
Get into the habit of testing color-pairs before you incorporate them into your designs. Bookmark AudioEye’s free color contrast checker or a similar tool that can test colors against WCAG requirements.
Learn more: Designing for Color Contrast: Guidelines for Accessibility
2. Don't change the default CSS for hyperlinks (unless you have a good reason)
Internet users expect hyperlinks to be brightly colored and underlined. Too often, developers try to switch things up by removing the underline — which means that the hyperlinks use color alone to convey meaning. That’s an accessibility no-no.
Hyperlinks are incredibly important for navigation, so don’t make any changes that might prevent users from identifying them. Don’t change the defaults unless you have a very, very good reason.
Learn more: Quick Guide to Accessible Hyperlinks
3. Don't wait until the end of the project to think about alt text and labels
Writing alt text for an image is fairly easy. You should only have to spend a few seconds tagging the image — but if your website has thousands of images with missing alt text, you’re looking at a multi-day (or multi-week) project.
Add alt text when you’re adding the images. Likewise, pay close attention to other text alternatives and form labels; remediation will take much more time than simply doing it correctly during your build.
Related: 8 Common Image Alt Text Mistakes to Stop Making
4. Don't use color alone to convey meaning
We touched on this earlier, but some people cannot perceive color, so you shouldn’t use color alone to deliver important information. When you’re working with color, ask yourself a quick question: If the color is different, would all of the content make sense?
Here’s a few examples of web design decisions that would fail WCAG’s requirements for use of color:
- A form submission fails because the user didn’t enter information in an essential field. The page tells the user, “fill out the fields marked in red.”
- A promotional email tells customers to “click the green button to see this week’s deal.”
- An online banking platform uses green to show a positive account balance and red for a negative balance.
- A chart uses different colored lines to represent different data sets with no labels or distinct patterns.
This is an easy requirement to forget about! By training yourself to think about the functionality of color, you can ensure that users have multiple ways to get the info they need.
Learn more: Use of Color for Accessibility Explained
5. Use HTML to define structure, then use CSS for presentation
Most designers work visually, which can lead to issues with semantics. It’s important to deliver information about your website’s structure in a way that is programmatically determinable, so that screen readers and other assistive technologies (AT) can understand that structure.
Fortunately, HTML is widely supported and extremely effective. The key here is to avoid using HTML for style. For example:
- Don’t use heading tags (H2, H3, etc) because of how those tags look on the page.
- Don’t use <p> tags for visual spacing.
- Don’t use <ul> or <ol> for layout. HTML lists should be used for lists, not layout.
- Don’t use <table> tags to achieve a specific visual layout.
- Don’t use too many <div> or <span> elements instead of appropriate semantic HTML.
Learn more: Plain Old Semantic HTML: A Perfect Basis for Accessibility
6. Share the work of web accessibility
Web designers have an important role to play, but accessibility should be a consistent priority for every member of your team. Back-end developers, content creators, and customer service representatives should understand the basics of WCAG.
When everyone’s thinking about accessibility, it’s much easier to catch issues before they impact users — and when the principles of WCAG are part of your workflow, you’ll enjoy more of the benefits of inclusive design.
