Website accessibility is an issue of increasing importance. While the vast majority of websites today are not compliant, developers and designers are working with their clients to ensure better access for everyone, including those with disabilities. Here are 7 things to look out for when designing and building accessible websites:
1. Pay attention to color contrast
Color blindness affects 1 in 12 men and 1 in 200 women in the world. As people age, it gets more and more difficult to see and distinguish certain colors, which makes some content on websites illegible for the user. Thankfully there are some easy web-based tools to help when you are selecting your colors. Here are a few examples:
- WCAG Contrast Checker
- Google Chrome extension for color contrast
- Color Contrast Checker
- Accessible Colors
2. Provide alternatives to non-text content
This is an easy win for creating an accessible website. Make sure to label all images in a in a simple but descriptive way to provide helpful information for users with screenreaders. If the alt text doesn't add anything new or useful, or if the image is for design appeal only, make it easy for screenreaders to skip the image, and add an empty tag (alt="").In addition, provide text alternatives for video and audio media. The big players such as YouTube have some native tools to help with this, so you should take full advantage of them.
3. Enable "skip" for repeat content
This is important mostly for navigation and other content that repeats on each page. Imagine how annoying and time consuming it would be to have to tab through each navigation item on every single page of a website, before getting to the actual body content. If skip is enabled, it allows the user to bypass this repeat content and go right to the body.
4. Check resizing to 200%
Accessible websites need to be easily resized. This means, if you zoom in and set your browser up to 200%, your website should still be fully visible, navigable and readable. Just as you would make your site responsive for smaller screens such as the phone or tablet, you want to it to react accurately to zooming in as well.
5. Label forms correctly
Make sure your field labels are descriptive and exist outside of each actual form field. Labels inside the field will disappear once the user starts typing. This often leaves people (disabled or not) unsure of the formatting of the content for the field. How often have you received an error because you added a date as m/d/yy instead of mm/dd/yyyy, because the label describing the format disappeared once you started typing? This is an easy habit to follow and increases not only website accessibility, but also the overall user experience.
6. Structure your content
A large body of text is difficult and tedious to read and scan. Use different headings (H2, H3, etc), bullets and other page layout tools, to structure and break up your content in meaningful ways. This increases overall usability of your site, for a good user experience, and can even improve marketing effectiveness. Be sure to provide a clear next step action for your user on each page as well.
7. Test your site using accessibility tools
Evaluate Website Accessibility:
- Go through your site using voiceover (ideally on mobile)
- Use a screenreader
- Use your keyboard to tab through your site
You will immediately find missing content or functionality that is not accessible. Also pay attention to superfluous alt text. Using "image" as alt text for an image leads to a poor user experience.It may seem daunting, and this list is certainly not all-encompassing, but using these tips will get you well on your way to creating and maintaining an accessible website.Give us a call to help you make your website accessible.
