Recently I had a client come to me asking about ADA compliance for their website. If you haven’t noticed, accessibility is a hot topic in the web design and development circles. It’s debated, it’s argued, and ultimately it’s not being done.
What is accessibility when it comes to websites?
Accessibility just means the ability for a person with disabilities to access and use your website. There are many ways in which a person may struggle. Most people assume it’s only visual impairment that’s an issue, and it’s a big one, but there are others too. If someone is visually disabled, they may struggle to read small or too light text. If they use a screenreader, the screenreader needs to be able to understand the page in order for them to understand it. Other issues people may encounter are videos without captions (for the hearing impaired) and navigation issues for those who have mobility or hand-eye coordination issues. If there is only one tiny place to click to get to where you want to go and you struggle with a mouse, that’s going to be hard.
It’s estimated that as much as 20% of your users could have a disability that makes accessibility important. Would you turn away 20% of your customers? Of course not, so this is something we should all consider.
Achieving 100% perfect accessibility is rare and almost impossible… but it doesn’t mean you shouldn’t try.
One thing we see a lot is people who think that if they can’t get everything perfect, then they shouldn’t even try at all. And this is a bad narrative that we need to correct. Perfection in any field is hard and rare. But that doesn’t mean we shouldn’t try to make things as accessible as possible.
What can you do today to make your site more accessible?
There are lots of companies out there offering accessible websites, but maybe your website is new or you don’t have the money to pay to get a new website done this way. What do you do? Here are some tips that you can implement yourself.
Make sure your heading structure is correct
Guess what? Those H1, H2, H3 tags aren’t there for you to resize your content! They are there to structure and organize the content. We can use other means of changing the size and appearance of our content. Headings should go in order from H1 to H6. The main page title should be your H1, then any subtopics within that H1 are H2s, and any subtopics within your H2s should be marked as H3s and so on.
Add alt text to all images
If you have a visually impaired user, they might not be able to see your images. Alt text stands for alternative text, and it is what describes the image for the person using a screenreader. If you don’t put in alt-text, then the user won’t know what that image is of.
Alt text is also used for SEO, so it’s important if you are putting in alt-text for SEO purposes, that it also add description text so that the user knows what the photos is of.
Underline your links
All text links should be underlined. Underlining a link makes it stand out for those that have visual disabilities, which is important. Underlining links makes it easier for the rest of us too, because most people know underlining makes something a link.
Don’t underline text that isn’t a link!
Some other simple tips
- Avoid putting text on patterned backgrounds and make sure that the text and the background colors are distinctly different.
- Make sure your font isn’t too small. I recommend no smaller than 18px.
- Avoid fanciful fonts. You can bring that in as a headline here and there, but your text should be a plain, readable font.
- Never use “click here” as your link text. That doesn’t indicate where the link takes them. Write a sentence about what the link is for and link that text. Everyone knows to click on links, we don’t need that instruction. What’s more important is that we know it’s a link through a contrasting color and underline.
- Don’t type in all caps. If you want your text to display in all caps, do it with CSS and not by typing all caps. If you type your text in all caps, then a screenreader will read it letter by letter. So instead of reading it as Dog they would read it as D-O-G.
- Don’t have your links open in a new window. I know you want your users not to leave your page, but it can be hard for persons not using a mouse to navigate back.
These items may not make your website 100% ADA compliant, but they go a long way toward helping a person with a disability navigate your site.
One more note, make sure anyone who manages your website is aware of these guidelines too. It’s easy for you to spend a lot of time working on your website’s accessibility and then have a well-intentioned website manager break it.
How do you test whether it’s working?
One thing I like to do to start is to open up the website in a new browser window and see if I can get to all the links without using a mouse. Remember, a visually disabled person won’t be able to see a mouse cursor and probably isn’t using a mouse, so they need to be able to navigate without it. Can you hit the tab key and get to all your links?
There are plenty of online testing tools as well. I like the WAVE web accessibility evaluation tool. This tool lets you put in a page and get an evaluation. It’ll show you where you have errors, show you the code that’s problematic, and give you resources for fixing it.
Other checkers include Axe and Web Accessibility. Some even have Chrome extensions to make it easy to check routinely.
WordPress specific tools
Obviously, not all websites are made with WordPress, but that’s all we use here, so I wanted to give you some options. There are a lot of plugins that you can add that help with accessibility. One that I find useful is WP Accessibility. Some of the features of this plugin are that it enables skip links (which helps users skip past long lists of links), adds a toolbar so users can adjust contrast and text size, and enforces alt-text for images. There are plenty more features as well, and it’s a nice little plugin that gives your website an accessibility boost.
A few others I haven’t tried:
Have no fear of perfection, you’ll never achieve it. But good-faith efforts go a long way.
Amy Masson
Amy is the co-owner, developer, and website strategist for Sumy Designs. She's been making websites with WordPress since 2006 and is passionate about making sure websites are as functional as they are beautiful.