An accessible website is not only important for people with disabilities. If you use accessibility smartly, your website will become modern, user-friendly and reach more people. These 6 indispensable tools will help you discover and solve problems. Time to get to work!
1. Read up with these catchy use cases
It can be difficult to understand or explain the importance of accessibility. Catchy use cases come in handy in that case. Mismatch.design not only comes up with excellent examples, but also provides good arguments in favor of “inclusive design. Also, the website
We Are Colorblind
provides many useful examples of accessible (and inaccessible) design choices.
2. Use a checklist
There is a lot involved in designing an accessible website. Many of these things you may never have considered before. Wouldn’t it be helpful if there was a checklist for that? Good news: there is! Dutch Elsevier has all the Web Content Accessibility Guidelines listed. That’s quite a laundry list, but you can filter easily. Not only on CSS, HTML and Javascript, but also specific things like images, links and forms.
3. Check your contrast
People with visual impairment (
nearly 300 million people worldwide
) cannot navigate your website if the wrong color palette is used. Distinguishing foreground and background is especially challenging for this group. Contrast is therefore a key word in accessible design. There are several tools you can use to test your site’s contrast. On the website Accessible Colors simply enter your site’s color codes and get back whether you comply. You can also
this Chrome plugin
for inserts, or the useful Mac app
Contrast
.
4. Use a browser plugin
The
Chrome plugin Axe
has only one function: to test Web sites for accessibility. The plugin analyzes a site of your choice and immediately returns where it is lacking. On top of that, the plugin offers solutions to fix these problems. Are you using a different browser? Axe is there also for Firefox. For Safari, the plugin is not available, but for that the bookmarklet in the next section offers a solution.
5. Or use a bookmarklet
A bookmarklet is a small piece of JavaScript code that can be stored in Web browsers as a URL in a bookmark (bookmark). You can deploy this bookmarklet on any website you visit. Therefore, it is a lighter option than a plugin. With the Bookmarklet HTML_Codesniffer_ Test your website for all accessibility requirements. The tool runs a report, which you can then use to improve your Web site.
6. Prevent problems as early as the design phase
Prevention is better than cure. Rather than fix problems later, it’s cheaper and less time-consuming to do so at the design stage of your Web site. Here comes the app Stark around the corner. Stark extends your favorite design program (Sketch or Adobe XD) with useful tools for accessible design. Among other things, the plugin offers a contrast checker, simulator for color blindness and suggests contrast-friendly colors.
Have you found out that your website has accessibility issues, but find it difficult to solve these problems? No worries! Brthrs has extensive experience in developing accessible websites and is happy to help. For more information or free advice: contact us!
