5 Quick Accessibility Fixes to Impress Your Customer
Hello Everyone! In this blog post, I would like to share the very basic accessibility (a11y) checks that are missed out on most of the web pages and give a quick glimpse of how to test and fix those issues quickly. The interesting fact is fixing these basic issues resolves more than 90% of the Accessibility issues and it improves your site’s accessibility score drastically.
A quick note from the legal side: All EU Member States must have by now (from June 28, 2022) transposed the European Accessibility Act into national law. The act ensures that everyone has access to a range of everyday products and services.
Let’s see how easy it is to impress your customer by doing a quick accessibility test and implementation!
The 5 basic accessibility errors in most web pages :
When I started with a11y testing, I repeatedly found these 5 accessibility issues in most of the web pages. I looked for the statistics and found that more than 95% of the home pages tested have at least one of these issues as per WCAG and more than 90% of accessibility errors fell into any of these errors.
- Missing alternative text for images (Guideline 1.1 & Guideline 1.2)
- Low contrast Text (Guideline 1.4)
- Empty links and buttons (Guideline 2.4)
- Missing form input labels (Guideline 2.5)
- Too many navigation links (Guideline 3.2)
Fixing these 5 basic guidelines makes your customer happy?
The answer is, YES and this makes your webpage accessibility score improves drastically!
How to test and fix these issues?
As I mentioned in my previous blog, the browser extensions: WAVE or axe DevTools can be used to find these basic accessibility issues quickly. Let’s see each issues in detail and see how to test and implement these quick wins.
1. Missing alternative text for images
Why we need alternative text for every image in the web page? Let’s imagine people having reduced / impaired vision uses screen reader to read the web page.
So, do we really need alternative text for every image? Yes, but not all images need to be explained to the screen reader users right? Because there are images that are just used for decorative purposes and some are used as informative images and some functional images, etc.
So how do we define alternative text for different images?
In general, every image on a web page needs an alt attribute, which is a text representing that image.
Informative images — These images should be described with proper text because this gives the screen reader user some information (Ex: Describing a product with specifications, etc)
Decorative images — These images don’t need to be described as they are used for decorative purpose. But “empty” and “missing” alt text are different. If you define the alt text with “_”, then screen reader takes it as decorative images and it doesn’t read this to the screen reader users. Empty alt attributes appear as alt=“”.
Functional images — There are lot other icons, images which are used as functionalities. They are used in buttons, links, and other interactive elements. The text alternative for the image/icons should convey the action that will be initiated (the purpose of the image), rather than a description of the image. (Ex: For a Printer icon, the text alternative should be “print this page” rather than “(image of a) printer”)
2. Low contrast Text
The next common a11y issue is Low contrast Text. Using similar colors for background and text lacks contrast. It impacts online shoppers with blurred vision, color blindness, old age visitors with age-induced vision loss, or even mobile users in bright sunlight. WCAG recommends the color contrast ratio for small text as 4.5:1 and for large text as 3:1.
But is this a quick fix? The answer is No and Yes :) Because this needs design changes and approvals if you want to change the existing look and feel of the pages (when it comes to the Brand’s color change).
How could this be a quick win? The WAVE browser extension helps you to test this, you can have the possibility to see better color contrast ratios for the background and text.
This makes easy to design/change the colors real quick. Also helps Product owner and Designers to choose the right contrast ratios which fits their brand color but at the same time makes it accessible for everyone. Another quick win could be, if there are options to author the background and text colors, the content authors can be trained in an efficient way to choose right contrast colors which pass the color contrast ratios.
The below example shows the difference between the Fail and Pass criteria.
Fail criteria :
Pass criteria :
By changing the foreground text grey color to #757575, the WCAG level of contrast is achieved and you could see the pass criteria for the text “Abholdatum”. This helps people with low vision to read the text without issues.
3. Empty links and buttons
Links and buttons are the main ways, that online shoppers and users get around the internet. We use links to enter the sites, and move through them and similarly, we see buttons on many of our shopping sites. If these are not clear, what a link is, where it’s taking you, or how to activate it, then moving around the internet is not a piece of cake. Let’s imagine a screen reader user is doing some shopping and if he/she is not given the right information about the links and buttons, making a purchase becomes difficult for them.
Missing link text means that there is no text used to represent a hyperlink. It might be just an image or a button, but someone who cannot visually see the site and uses a screen reader instead cannot interpret it as a link. This can be solved by either hyperlinking applicable text or including alt text for the link.
Isn’t it a quick fix to improve everyone’s life?
4. Missing form input labels
The next basic a11y issue is missing input labels for forms. Forms are the most common website function user interacts with and uses it. Empty form labels are one of the most frequently discovered accessibility issues with forms. It can be as simple as a new user registration form or a subscribe form, but when the input labels are missing, then screen readers users don’t know what information a form field requires.
Go through your forms and ensure the form labels and inputs are clear. If they are not provided during requirements gathering, please speak to your product owners and get the needed information.
5. Too many navigation links
Navigation links are one of the most challenging accessibility issues for screen readers and users using other assistive devices. When your webpage has a lot of navigation links before getting to the main site content (Ex: 30+ navigation links featured in Menu), it takes a lot of time for the user to reach the main site content.
A better way to do this might be using search bars at the top or having skip navigation links. This takes the user to the main site content without he/she going through all the navigation links.
Isn’t this a very simple feature? But makes a lot of difference for people who use it.
Do you agree, that these 5 basic accessibility issues are quick wins if we start taking small actions from our side? And as I said, fixing these quick wins will improve the site’s accessibility score to good extent! And you can impress your customer with great results:)
Let’s start having inclusion in our minds and make a difference, both for our beloved users and for our proud customers.
Thanks for reading!
Sources
https://www.w3.org/TR/2006/WD-WCAG20-20060427/Overview.html#contents
https://www.accessiblemetrics.com/blog/how-to-test-the-accessibility-of-your-website/
https://www.practicalecommerce.com/6-accessibility-basics-cause-97-of-errors
https://ec.europa.eu/social/main.jsp?langId=en&catId=89&furtherNews=yes&newsId=10316
