Modern accessibility is becoming a hot topic for web designers. As more countries develop infrastructure to get online it becomes easier for people with impairments to browse the web.
But it’s up to designers & developers to create websites that support these people. Accessibility is a huge topic and you can learn a lot by studying examples and applying them to your work.
In this post I’ll share some basic tips and handy tools for beginners learning accessibility. This topic is huge but it’s well worth the effort.
Design For Usability
The defining factor of accessibility is helping people with disabilities interact with computers, specifically websites. There is a difference between usability and accessibility, although both are closely related.
Everyone wants a website that’s usable. But a usable website looks different to someone who may have have auditory or visual impairment. The list of accessible features to support is pretty long and it’s not something you can pick up in a day.
But ultimately your job is to design for usability first. This means everyone should have some type of user experience, even if the experience differs from person to person. These are just a few examples of different interactions to consider:
- Screen readers may output audio on the page for blind/vision impairment
- Work to design interfaces that can work with different input devices
- Images and videos might be difficult to consume for users with auditory or visual impairments
A good way to start is by finding sites built for accessibility and testing them.
This post has some great examples and specifically recommends government websites. Most government sites have to be accessible so you can browse almost any org/gov site for inspiration.
There’s a lot you can work with but here are some ideas to keep in mind:
- Include alt tags for all images
- Lengthier images should use the longdesc attribute
- Offer a “skip navigation” jump link to go straight into the content
- Form inputs should all have label text explaining what they’re for
- Include roles for your site’s structure
But even though accessible sites are about structure more than design, I think design still plays a huge factor. That’s why usability and user experience are so important for accessibility.
Consider how each user consumes the interface and what you can do to increase/simplify the experience.
Along with accessible sites I also recommend browsing around for UI/UX inspiration. A resource like mobile inspiration gallery can help you find new ideas for all the interfaces you build.
As long as you place the user experience above the design you’ll be on the right track.
Consider All Input Devices
Accessibility is about making the Internet usable by everyone. But the web is not one specific thing. It’s a bunch of different websites and the goal is to make a large number of those sites fully accessible.
Mobile users already have differences between their desktop/laptop counterparts. In particular mobile devices typically have:
- Much smaller screens
- No input devices(all touch-based)
- Different browsers & operating systems
With such a different experience you can’t expect your site to perform exactly the same for everyone. All you can do is design features that support everyone.
Some users may have specialized trackballs or mice built with greater sensitivity.
Other users may only have a keyboard and no mouse. For this you could use a plugin like jQuery keynav with custom keys used for navigation.
In this case you also want strong hover/selected states so the user knows exactly where their selection is at all times.
Contrast and Readability
Design your pages with high contrast and make text large enough to read. You should also use em/rem units for sizing because they can be easily resized by the browser.
Take a look at some of the examples on CSS Zen Garden. This site is packed full of high-quality designs created by professional designers.
Gauge their contrast against your own to see how well your site looks. Readability is directly related to contrast and color choice, so you need strong colors that stand out but don’t draw too much attention.
I recommend this tool for building contrast and checking your font/background colors. It’s a free webapp where you can enter your foreground/background color and gauge the contrast ratio of your text.
You can even update the sliders to see a live readout of your contrast score. You want to reach AAA if possible but AA is also great.
And this whole app is on GitHub for free if you wanna browse through the code and see what you can find.
Best Accessibility Tools
Along with the previous contrast checker tool you can find a bunch of related accessibility tools online. These can help you build more accessible websites and find flaws in your code.
All of these tools are completely free and they’re powerful enough to bring your accessibility efforts into the big leagues.
Quite possibly the #1 most recommended tool for accessibility is the AChecker webapp. It’s completely free and it pulls an entire website into the app for scanning elements, code hiccups, and basic accessibility flaws.
It’ll tell you what you're doing right and what you’re doing wrong. Your site also gets a score based on WCAG conformance with ratings from A to AAA.
The interface is not very pretty and this site looks straight out of 1999. But the information is accurate and it’s incredibly valuable for checking any site’s accessibility level.
If you’re looking for another color checking tool take a look at this ratio checker developed by Lea Verou. It’s also a free open source project hosted on GitHub where you can check the contrast between two colors.
This tool supports all CSS3 color property values like plain words(white, red) or RGBa for chroma/opacity. However it doesn’t have the slider bars for adjusting colors like you get in the Colorable app.
Both are excellent choices and I recommend saving both to your bookmarks for later use.
Speaking of bookmarks I also have to recommend this a11y bookmarklet as a must-save resource for developers. You just run this bookmarklet over any page and you’ll immediately see results including errors, warnings, and general advice for accessibility.
It comes in 3 languages(English, French, and Chinese) and you can choose different levels of accessibility checking. Once you select your language & level just click “generate” and you’re good to go! Drag the bookmarklet to your browser bar and run in on any website you wanna check.
For a more visual interface try the WAVE accessibility tool. This free webapp runs over an entire site and catalogs the DOM organizing elements into grades of accessibility.
This is the easiest tool for newbies since it all works visually on one page. So you’ll get error/warning icons that you can click for more information about the element. This also includes “good” icons for things you’re doing right, or just general informational tips.
Overall WAVE is a great way to analyze your code and find which areas could be improved through an accessibility checklist.
These are just my top picks for tools that can help beginners getting into accessibility. If you’re looking for more check out this massive list on the W3 ARIA website.
Understanding accessibility is not easy. It mostly comes from practice where you try building accessible websites to understand the process.
But I hope the tips & tools in this guide can help you start down the lengthy path of building more accessible websites.
And if you’re hoping to dive deeper into the ocean of accessibility I recommend digging into these resources.