7 Common Web Accessibility Issues That Are Simple To Fix
Table of Contents
- 1. Insufficient Color Contrast
- 2. Missing Image Alt Tags
- 3. Lack of Skip to Content Device
- 4. Inability to Change Font Sizes
- 5. Broken Tags
- 6. Videos Without Closed Caption or a Transcript
- 7. Form Fields Incorrectly Labeled
Insufficient Color Contrast
One of the most common website accessibility violations is the lack of sufficient contrast between the background and foreground colors. The minimum contrast amount is 4.5:1 for normal text or 3:1 for large text.
For example, a black banner with navy blue writing on it can be hard to read even to people with 20/20 eyesight. Some people with visual impairment will have an even harder time reading it – and others will not be able to read it at all. However, the same text would be much easier to read if the font were white, instead of navy blue. See below.
The lack of sufficient color contrast is a violation of WCAG 2.1 success criterion 1.4.3 (Contrast, level AA). This criterion applies to all text on the website. Even images that contain text need to have sufficient color contrast if this text is important to the message communicated by the website.
Check if your color combinations are accessible by using this free color contrast checker. If they are not, it is usually easier to change the color of the text than the color of the background. Change the colors and verify again that they are accessible using the above-mentioned checker.
2. Missing Image Alt Tags
This is probably the single most common accessibility violation. Luckily, it is probably the easiest violation to fix.
The Alt Tag provides a text alternative to images. Here’s an easy way to understand the importance of Alt Tags for web accessibility. Say you pull out your phone and take a photo of a dolphin smiling at you, and that is the first photo you took today. Today is 02/22/2019, by default, your phone will name the photo something like 02222019-0001 (today’s date without the forward slashes to separate day, month, and year, with a dash to indicate the photo number taken that day or taken since the cell phone was first used). After you take that photo you upload it to your website and write a nice story about dolphins.
People with some types of visual impairment, such as blindness, cannot see the picture. They rely on text-to-speech software to read the content of the website out loud. If the photo is uploaded with its default name, when the software reads the name of the photo it will say 0 2 2 2 2 0 1 9 – 0 0 0 1. People will not know that the photo shows a dolphin; rather, they will only know the numbers of the picture.
This can be easily fixed by adding an Alt Tag that describes the image, such as “dolphin smiling at you”.
The way that you create an Alt Tag will depend on the system used to create your website. If your website is powered by a Content Management System (CMS) like WordPress, all you need to do is select the image on your Media Gallery dashboard and write the Alt Tag on the appropriate field. See example below:
If your website does not have a way for you to select the photo and add an Alt tag, you can go old school and create the tag directly on the Hypertext Markup Language (HTML) code. Here’s all you need to do:
There are two other benefits to having Alt tags. One is that if there is a problem that prevents your photo form loading, people will be able to see the Alt tag and understand what the photo was about. The other benefit is that it can help your Search Engine Optimization (SEO) efforts. Google wants to serve its users with relevant search results. Since Google’s system cannot see an image, it also relies on Alt tags to determine what the image communicates and then properly index the page(s) that contain this image.
Lack of Skip to Content Device
Another common accessibility issue that affects users of text-to-speech software is having to listen through every menu button on websites that do not have a way to bypass the main menu. Think about websites that have several buttons on the main menu and when you hover over a button, several other buttons appear.
An example of this type of menu can be found on Macy’s website (see image below). Macy’s main menu has 18 different buttons and has several other buttons; in total, it probably has hundreds of buttons. Imagine if you had to listen to every button before you were able to get to the main content below the menu. It would be a nightmare.
Fortunately, the Macy’s development team was very clever in finding a solution that bypasses the buttons and gives users a great experience. To access all these buttons, users need to click on one button. When users do not want to listen through all the options, they simply skip this button.
Still, users need to go through a few other buttons (i.e. Stores, Deals, Lists, Gifts, etc.) before getting to the main content of the page. This means that every time users go to a new page they need to listen through all these buttons before listening to the main content.
A simple way to fix this is to create a button that enables users to skip the header and go straight to the main content. This type of button is a requirement of success criterion 2.4.1 (Bypass Blocks, level A). For an example of this button, just look at the first link on the top left corner of this website (Skip to Content) or the image below.
4. Inability to Change Font Sizes
Some people need larger fonts to be able to read the content of the website. Success criterion 1.4.4 (Resize text, level AA) requires that users be able to increase the size of the text by up to 200% of its original size while maintaining all functionalities and content. Exceptions include text in images and captions.
To ensure your website does this, simply add buttons that enable users to increase and decrease the font size. I like to add three buttons; one for users to increase the font size, one to decrease the size, and another to restore the default size. Some sites only provide a button to increase the size and another to decrease. I like button to restore the default size because it can simplify the user’s’ experience. Still, there is no requirement as to how many buttons should be added. The requirement is simply to enable users to increase text size by 200% without losing functionalities or content.
There is also no requirement as to where these buttons need to go. Again with the goal of improving the user’s experience, I prefer to have the buttons on the header. See example below. Some sites have these buttons on the side and they scroll down or up as the user scrolls through the site. I find this to interfere with the content; buttons might block an image, some text, etc.
5. Broken Tags
A tag might be broken due to a careless mistake (i.e. your developer was very tired when he was coding and forgot to check all tags) or due to a bug in your website. Whatever the reason is, it is important to properly open and close tags. An easy way to understand the effects of broken tags is if we do not close the H1 tag on a web page. All the content on the page will be considered a level one header, meaning, it will be much larger than you had intended it to be,
Users of speech-to-text software will not know that the tag is closed. In the example of the H1 tag, the software will read the entire web page as though it were one really large header.
If you use a CMS like WordPress, it will be easier to see if a tag is broken by clicking on the visual editor. If your website requires you to work directly on the code, use a free tag checker to verify that your code is good before you upload it. This will help you to meet success criterion
6. Videos Without Closed Caption or a Transcript
Video is a very popular and effective way to promote a business. Videos can also help the company to achieve higher SEO results. Yet, without closed captions, people with hearing impairment might not have access to the information.
Success criterion 1.2.2 determines that content that contains prerecorded audio have captions or a transcript. Most computers come with free video editing software that enables you to add captions to your video. If you do not want to mess with the captions, you can type up a transcript to do it for you – or hire a freelancer to do it.
The same is true for podcasts. If you have a podcast on your website, it is essential that you add a transcript. You can also provide in text format all the information you available on the podcast. When you do so, make sure that you are clearly labeling this text version of the podcast so users know that the text is an alternative to the podcast.
7. Form Fields Incorrectly Labeled
One of the most common features in a website is a form. It can be a contact form, a form to download ebooks, sign up to the newsletter, and so on. Most websites have forms. Yet, not all forms come with proper instructions. Form fields must have labels inside them instructing the user what information needs to be entered on that field. It is very common to see forms with the labels outside of the field. If a form is incorrectly labeled, people who rely on speech-to-text software will not know which field is for what.
Here is an example of a form with the labels outside the fields:
And here is an example of a form with the labels outside the fields:
When you create labels, check to see that the label text color and the background color have at least 4.5:1 contrast (remember the first item on this article? ). Very often, webmasters fix this issue and violate criterion 1.4.3. So also check the color contrast.
Now that you know these 7 simple fixes to common website accessibility problems. Go make your site accessible. To make your job easier, download our free e-book “Ultimate WCAG 2.0 and 2.1 Checklist”. With this checklist you can keep track of all violations on your website and make notes on how to fix them.
Important note. As you are fixing web accessibility issues on your website, avoid using plugins. Very often, plugins will fix one problem and create yet another accessibility violation