Website accessibility concerns (also often referred to as WCAG Errors or website ADA Compliance issues here in the U.S.) are becoming more important than ever to address, as more areas adopt laws that require sites to be accessible to visitors with disabilities.
Even if you’re not yet affected by the legal issues, by making your site ADA compliant, you’re simply doing the right thing for a significant percentage of your potential visitors. It’s estimated that compliant sites reach an extra 15% of the population! Search engines will also rank your accessible content higher than competing sites where content is not accessible. If you’re concerned about the cost of bringing your site’s compliance level up, don’t be. For many sites, a lot of the changes that will make the biggest difference are simple or low cost, and some you may even be able to address yourself.
Here are the top accessibility issues that you can probably fix yourself
Low Contrast Text
Often when we think about hard-to-see elements, we think of small font or images, but we overlook overlapping elements and their colors or shades. Folks who have a hard time seeing in low contrast situations make up quite a few visitors! When foreground elements or text are not sufficiently contrasting in light level from backgrounds, visitors with trouble seeing in low contrast situations will not be able to see your content and possibly not even navigate your site. To avoid these problems, you can’t necessarily trust your own eyes, but you can explore contrast or check the contrast of the colors used on your site by using the WebAim Contrast Checker.
Missing alternative text for images
Blind or low-vision visitors may visit your website using assistive technology that literally reads your website to them like a book. Most assistive tech, though, is not typically advanced enough to recognize what the content of an image is supposed to represent — it simply knows that there is some kind of image there. Images often convey important information or cues, and your screen-reader visitors may miss out on something important. To fix this issue, we have the ability to give an image an alternative text attribute. It is super common for content creators to forget to add this alternative text to their sites, though, so it is one of the most common issues that we come across. Review your site’s images for alternative text attributes and fill those in as descriptively as possible. Alternative text is also what will show up on the screen when an image fails to load — so this is a good test for you. If your image were to fail to load, would your alternative text be a good description of what was supposed to be there?
Missing form input labels
Again, this goes back to assistive technology that reads a web page to a visitor. If you have an input without a label defining what that input is for, how is a visitor supposed to know what information they should enter into that input? This is why every form element should have a textual label to accompany it. A lot of people think that adding “placeholder” text to an input is sufficient, but it is not. (You’ve probably seen that before… there is text already in the input field and it disappears when you click in it.) It may look neat, but placeholder text is not often read to the user in the same way a label would be, so don’t be tempted to do that.
For details on how to correctly label your inputs, visit w3 Org’s Labeling Controls article. If your site uses a content management system like WordPress, you may have to do some investigation to make sure that your site is outputting the form labels correctly — fortunately if you are using a modern plugin, it’s very likely that it has taken accessibility into consideration.
Empty links or links without self context
Visitors that utilize a screen reader will experience links and menus as a series of options, read to them in a list. If a link does not have text that briefly describes where the link is going, it can be very difficult to decipher where that link will actually take the visitor. Alternately, if a link has text, but it does not accurately describe where it will take the user, this is perhaps even more useless. A really common example of useless link text would be the very common “Read More” link that blogs tend to use. If you were to take this out of context of the paragraph text near it, it tells the visitor nothing about where it will take them.
Review the links on your site for presence of content and accuracy of content. A good test for each link is to read it by itself, without looking at the text surrounding with it. If it tells you where you will end up when you click the link, you’re good to go.
Missing document language
Each browser or screen reader is set to speak a specific default language — usually the visitor’s language. Each web page can (and should) also be set to a specific language — the one that the page is written in. If there is no declaration of which language the page is written in, this can cause interpretation problems when the screen reader tries to read the page to the user. This is a simple fix in most cases… if your page is in U.S. English, make sure your pages’ html tags look as follows: <html lang=”en-US”>
Empty or mislabeled buttons
Empty or mislabeled buttons cause many of the same issues as empty or inaccurately worded links. Buttons are often “empty” when you use an image to define the button, and the image has text embedded into the image data… that text is not machine readable so it really doesn’t count, and this makes your button “empty”. Check your buttons, and if they are created using a graphic, you may want to consider switching to a version that has text instead. For your text buttons, make sure that when pulled out of context of the form and other page content, it makes sense what is going to happen when you click that button or submit that form.
Need help with website accessibility issues? We have you covered.
The six issues above are some of the most common, but there are others that may be more impactful, depending on how your site is used, how it’s built, and who your audience is.
Do you need help finding out if you have issues on your site that might be affecting your search engine rank and ability to get the most visitors to your site? We are very happy to assist. Reach out to us today and ask about an Accessibility Review!