Homepage checklist: is your homepage digitally accessible?
The homepage of your website is where you welcome your customers, users or visitors. Compare it to the entrance of your shop or the meeting area in your office. Homepage checklist: is it also digitally accessible?
Chances are, in your shop or office, you do everything you can to give everyone a good first impression. So what about the homepage of your website? Does it also provide a pleasant experience for all visitors? In other words, is your homepage digitally accessible? The homepage checklist from this article will help you with this.
How accessible are homepages?
The first important question of the homepage checklist is: how are you doing? Can everyone use your homepage or are you already excluding some of your visitors right at the entrance? By this I mean people with visual, hearing, motor or cognitive impairments. Did you know that all together this is about 25% of the total population? That's 1 in 4 people.
The US organisation WebAIM has been conducting a survey on the accessibility of 1 million homepages worldwide every year since 2019, so that is a good measure to find out how accessible homepages are. The result is just not very hopeful. In fact, the February 2022 survey shows that 96.8% of all these homepages have accessibility problems and there are an average of 50.8 errors on homepages. Read the previous sentence again, just to let it sink in for a moment....
96.8% of homepages contain accessibility problems. On average, a page contains 50.8 errors.
Some striking results from the survey I would like to share with you:
Websites from government, social media, science and engineering contain the fewest accessibility problems.
Websites about sports, fashion, news, real estate and web shops contain the most accessibility problems.
English-language websites have the fewest errors, but websites in the Chinese and Farsi languages have the most errors.
Websites that use the CMSs Drupal and Typo3 generally contain fewer accessibility problems than websites built with WordPress.
A whopping 68,826 accessibility problems were found on one specific homepage.
In the websites surveyed, WAI-ARIA is being used more and more frequently. Despite being intended to improve accessibility, it often actually leads to a deterioration in accessibility.
Despite some improvement in these figures compared to previous years, this is still shocking. At least, I think so. These figures may not say anything directly about your homepage, but in practice we regularly see that the homepage - where you welcome your visitors - creates barriers for people with disabilities. This is a shame, of course, because it means you immediately drive them away. All the marketing and SEO work is thus largely undone.
Most common problems
From WebAIM's survey, the following problems are the most common:
On 83.9% of homepages, texts have too low contrast compared to the background colour. People who are partially sighted or colour-blind can therefore miss information.
On 55.4% of homepages, informative images lack a text alternative. People who are blind can therefore not figure out what the image says or what an icon does.
On 50.1% of homepages, links are empty or have an unclear purpose. Consequently, users of help software do not know where these links go.
On 46.1% of homepages, form input fields lack a label. As a result, it is not clear to everyone what can or should be entered in these fields.
On 27.2% of homepages, there are buttons that are empty or unclear. Again, people using help software do not know what these buttons do.
On 22.3% of homepages, a language is missing. As a result, a screen reader, for example, may use the wrong reading voice, making it very difficult to follow.
The good news is: all these problems are pretty easy and quick to fix with a homepage checklist.
Homepage accessibility checklist
Want to prevent your homepage from having the accessibility problems mentioned above? Then go through the following homepage digital accessibility checklist. This involves citing various requirements from the Web Content Accessibility Guidelines (WCAG). This is a set of measurable success criteria that can be used to determine how accessible a website is.
Download dé ultieme WCAG 2.2 checklist!
#1 Check and adjust the colour contrast
Texts on your homepage (and of course on other pages) should have a good colour contrast to the background. We've written an article about this before: Good colour contrast: make sure you see everything clearly.
If the contrast is insufficient, choose a colour that does have sufficient contrast with the background. If this is really not possible - due to house style colours, for example - consider offering a contrast switch. This way, you offer all visitors the opportunity to read texts with too low contrast.
#2 Give informative images a good text alternative
Informative images, icons and other non-text content need a text alternative, see WCAG success criterion 1.1.1. Therefore, determine for each image whether it is informative for the visitor. If it is, give it a text alternative that indicates what can be seen in the image. You can usually add this in the editor of your CMS in the properties of the image.
If there are important icons - such as a cross to close a menu or a magnifying glass to show a search field - the text alternative should indicate what this icon does. This could be something as simple as "Close menu" or "Open search box". Often, this is something the web builder can do for you.
In practice, I often hear that it is quite difficult to determine whether an image needs a text alternative and what this should be. The following English-language page has a roadmap that can help you with this: An alt decision tree.
A tip here is that you don't need to write "Image of". Indeed, auxiliary software - such as a screen reader - already indicates that it is an image.
#3 Give links and buttons a clear description
According to several WCAG success criteria, interactive elements - such as links and buttons - must have a name. That name should then properly describe what the link or button does. See, among others, success criteria 2.4.4, 2.4.6, 2.5.3 and 4.1.2.
Please note: the name of the link or button should at least contain the visible text (if it is present). Unfortunately, this does not always go well, for example if the link is an image with text or if an aria tag is used.
#4 Provide input fields with a label
Do you offer a form on the homepage, for example to log in to a personal page or to subscribe to a newsletter? Then make sure your visitors know what to fill in here. Accessibility requirements have been established for this too, see for example success criteria 1.3.1, 3.3.2 and 4.1.2 of the WCAG.
Unfortunately, we see in practice that this does not always go well. For example, if no space is made in the design for a text label or if only one label is used for several input fields. Realise that not everyone then understands what needs to be entered here. For example, people who do not see the website visually, but use auxiliary software to perceive it. This is often something you can solve together with the web builder.
#5 Ensure the correct language of the page
The last point is something you usually only set up once or have set up and then don't have to look back at. This is because every page needs a language and this must also be the right language. The requirements for this are set out in WCAG success criterion 3.1.1. So, for example, a Dutch-language website must have the Dutch language.
Be careful if you have parts of the page in a different language. This is because, according to success criterion 3.1.2, you need to specify a language switch so that help software can also switch to another language.
Make your homepage accessible(er)
With the above adjustments from the homepage checklist, you will ensure that your homepage at least does not contain the most common problems. These tweaks are generally quite easy and quick to do. If you can't figure it out and would like some support on this? Then know that our consultants are here for you.