What is website accessibility?
Website accessibility can be understood in a very broad sense as simply being available and user-friendly. In that sense, an accessible website is one that’s findable in search engines, loads fast, and offers a good user experience: it’s clear and easy to navigate so that users immediately know where they are on it and what they need to do in order to find what they came to the website for.
But there are significant groups of users that may be denied access to even the best of this user experience if the creators of the website forgot to make it accessible also for them. People with disabilities.
Disabilities in numbers
The World Health Organization estimates that 16% of the world’s population experience significant disability. That is 1 in 6 of us. In the European Union alone it’s 87 million – 1 in 4 of us. And this number is likely to increase because our societies get older and the older you get the more likely you are to have some kind of disability.
One obvious organ of our bodies that gets notably weaker with time is our eyes. Nearly everyone starts to have problems seeing clearly at close distances as they reach their mid-40s or 50s. Also, some types of disabilities are actually more frequent than you might think: One in 12 men (and 1 in 200 women) is color blind! No wonder then that visual impairment is the most frequent type of visibility.
These numbers alone should convince online shops to take the question of accessibility seriously, especially if you consider that people with disabilities are actually more likely to try and do their errands online. Despite all the obstacles, online shopping is still easier for many people with disabilities than going out to brick and mortar shops.
Types of disabilities according to the frequency of occurrence
Visual impairment (including blindness)
Hearing loss (including deafness)
Intellectual disability (IQ below 75)
Physical disability (physical impairment or reduced mobility)
Addressing the needs of lower vision users
Accessible color combinations and practices
It’s not about avoiding certain colors, it’s more about using or not using them in certain combinations. For example, you don’t have to avoid red altogether to make your palette color-blind-friendly, just combine it with blue rather than green. Also, it’s best to avoid conveying a message only through color. Combine using color with a text or an icon (with an appropriate alt text).
Color contrasts
Color contrast is the difference in brightness between foreground and background colors. It can be a decisive factor determining whether people with lower vision can see a piece of text against its background. To ensure this is possible, aim for a 4.5:1 contrast ratio between the foreground color and the background color.
Font types and sizes
It is generally accepted that sans serif fonts are more legible on screens. The default font size should be no smaller than 12 px. Ideally, it should be possible to zoom the text to 200%.
Solving just these 3 issues can already make your online shop much more accessible! Actually, experts claim that making a website accessible to the visually impaired automatically fixes around 80% of all the problems all people with disabilities may have using it. So let’s take a closer look at how websites are used by people affected by the most severe visual impairment – blindness.
Helping screen reader users scan with their ears
1. Use headings correctly
Screen reader users use heading structure to navigate content. The correct usage of H1, H2, H3, etc. ensures that they can do it effortlessly. This means, for example, always using H1 only for the primary title of the page, and never skipping heading levels (e.g. using H1 and then jumping straight to H3, without applying H2 at all).
2. Include alt texts for images
If images convey important information, these messages need to be included in alt texts. We can distinguish between 3 kinds of images:
- Decorative
- Static
- Active
Decorative images are not essential to understand the content of the page and describing them could only add to the so-called noise clutter. Provide a null (empty) alt text (alt=””) so that a screen reader knows to ignore it.
Static images provide additional information or tell stories. Depending on the type of these images you can either only summarize their content in an alt text or – if necessary – also repeat it underneath in a more accessible format (a paragraph or a table).
Active images support actions – links or buttons. Here, rather than describing the actual image, you need to focus on the associated action, i.e. instead of writing “a magnifying glass”, write “search”.
3. Name links in a clear way
Names of links need to be descriptive and meaningful. The classical descriptions like “Click here” or “Learn more” do not fulfill these requirements. Why is it so important? Because screen reader users often scan the pages for links and jump from one link to another, without the context provided by any surrounding content. If the link is not specifically named, they simply won’t know where it leads and if they might want to click on it.
4. Remember to label all form controls
Label all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the <label> element.
5. Start with keywords
Putting the main point of your website or article (keyword) at the beginning of a title or a paragraph is really important. Screen reader users scan the content with their ears just like other users scan it with their eyes, looking for hints allowing them to decide if they might be interested in this particular section.
6. Enable easy keyboard or voice interaction
Most screen reader users don’t use a mouse, they depend on keyboard or voice commands. This kind of navigation requires a clear and obvious site structure.
A logical page and site structure is beneficial not only to screen reader users but also to all users - with or without disabilities. Implementing it, as well as adding alt text to images, may also bring you increased visibility. This is because it helps search engines to index your content and your website - to rank higher. Think about it for a while: a search engine bot is basically a blind user that depends on text to know what you’re offering.
Legal requirements regarding accessibility
In the European Union (EU), requirements regarding accessibility are specified by the European Accessibility Act, which by now should have been transposed into the national laws of all member states. The goal of the Act is to ensure that everyone has access to everyday products and services, including online shopping.
Companies have time until 28 June 2025 to make their services and products comply with the requirements. Failure to comply may result in legal challenges, reputational damage, and loss of customers. Making your online shop more accessible can not only save you from all these potential problems but also help you win more customers and their loyalty, and boost your branding.
A few words on accessibility from Björn Darko, Head of Product & SEO at Ladenzeile
Why should online shops care about accessibility?
First of all – because it’s fair. The internet, in general, should be accessible for everyone. I once took care of a man who was paraplegic and he used voice commands for everything. For people like him being able to use a voice assistant means being able to access the world.
But there are also very practical reasons. If you take into account the number of people with disabilities, you will quickly realize that we’re talking here about a very big audience that is simply worth reaching. There are shoppers out there with visual impairments and they might be looking for your products. If they can’t see the photos, your product descriptions are even more crucial for their purchasing decisions and the alt tag descriptions of your images – indispensable. Also, all your buttons need to be labeled correctly to make sure that your customer will actually be able to complete their purchase!
Then comes the SEO argument. The Google crawler is a bit like a user with a disability – it can’t see any of your content until you make it descriptive. So, making your website more screen reader user friendly automatically improves it from the SEO perspective.
Also good UX improves your SEO rankings and more accessible products usually provide a better user experience to all users. The best example is adding subtitles to a video – it may be necessary only for people with hearing losses but can be used by anyone in any place where they can’t watch the video with the sound on. Not to mention that people often get temporarily disabled and need assistive technology they wouldn’t normally use. For example when you break your arm, you may need to navigate websites with a keyboard instead of a mouse.
What are the most common accessibility problems?
The most common accessibility problems stem from using design primarily to drive attention. This leads to overloaded websites with too much of everything – from colors to functionalities. A slim, lean design, with understandable navigation through clear menu, breadcrumbs, and categories is already a great step towards more accessibility.
How to quickly check your website's accessibility?
One of the easiest ways is to check if your content works with JavaScript disabled. Native HTML is better for accessibility because it works well with assistive technologies like screen readers. Complicated JavaScript can create problems. This doesn’t mean you need to avoid JavaScript entirely but it’s best to follow the Web Content Accessibility Guidelines (WCAG) – the standard for digital accessibility.
There are also many tools that allow you to check the accessibility of your website. A very comprehensive list of web accessibility evaluation tools is provided on the W3C website.
You can also run a Google Lighthouse audit. Google Lighthouse gives your page a score out of 100 and suggests improvements. For example, our current score for ladenzeile.de is 97%. Some issues that have been pointed out concern insufficient color contrast of some elements on our pages. We´re currently working to fix this and other issues. Obviously, we’re striving for 100%! We want our platforms to be accessible to everyone so that everyone can seamlessly use them to find their favorites!
Sources:
- “Accessibility: How to Design for All” – a course of the Interaction Design Foundation
- “Disability and Health Fact Sheet” by the WHO
- “Disabled People in the World: Facts and Figures” article on inclusivecitymaker.com
- “Disability in the EU: facts and figures” – the infographic of the European Council and the Council of the EU
- “European Accessibility Act: Q&A” on the official website of the European Commission
