Table of contents
To this day, accessibility seems to be unpopular among web designers and agencies because they’re often uncertain about what needs to be considered.
However, there are many valid reasons for making one’s online presence accessible to everyone.
We’ve created this article to help you meet all the requirements for website accessibility.
What is an Accessible Website Anyway?
Similar to an accessible apartment, a barrier-free website should make it easier for people with disabilities to access or use it. This is why it’s called web design accessibility.
In Germany alone, there are around 7.5 million severely disabled people and 2.7 million people with minor disabilities. It’s important to make websites accessible to everyone.
The clear advantage of creating an accessible website is that it can be used by everyone. Also, it can show that your business cares about social issues. Lastly, you’re expanding your market share because people with visual or hearing impairments can become customers.
Search engines are becoming more and more aware of the topic of accessibility. In other words: Better accessibility can lead to better Google rankings.
Is Web Accessibility mandatory by law?
Yes, if your website is the website or mobile app of a public body – then you must provide accessibility for all users.
According to the regulation of the European Directive 2016/2102, Germany implemented these requirements in the Disability Equality Act (BGG) and in the Barrier-Free Information Technology Ordinance (BITV 2.0).
This is why so many websites of municipalities or cities are already barrier-free (you can find an example of this further down in the article).
Of course, this doesn’t mean that you shouldn’t consider accessibility with your business website!
Principles for Accessible Web Content
There are several ways to make your website’s content more accessible. From text and images to contact forms, there is a lot to consider in terms of accessibility.
Accessible Text
High contrast is important so that your texts are easy to process for all users. Black text on a white background has become common practice because it is the most pleasant to read for everyone involved.
To ensure that your text is easy to read for all users, an appropriate contrast is crucial. It should be neither too low nor too high. Black text on a white background is a standard because it is comfortable for most people to read. This contrast is technically flawless, but some find that dark gray text on a white background or white text on a dark gray background is more pleasing to the eye.
As a professional web designer, you may want to express your creativity and work with a variety of bright colors. However, please be aware that this is at the expense of a limited minority. It’s important to keep in mind that functional parts should have the correct contrast.
The font size and typeface of the website texts should also not be ignored. People with a visual impairment will find it difficult to read your texts if the font is too small and written in a squiggly font.
Our recommendation: Choose a font size of at least 16px (1 rem) on your website. Sans-serif fonts (e.g. Arial or Verdana) are also preferable in the digital sector.
Although various web design trends show that serif fonts are becoming increasingly popular on the web, please only use them for headlines that are larger by default.
Another important point when writing texts for accessible websites is the comprehensibility of the language.
Not every visitor to your website is a studied Germanist with a vast vocabulary of the German language.
Quite the opposite.
If you consider that around one in six German adults reads like a ten-year-old, then it is more than advisable to write your texts in a way that is easy to understand.
Short precise sentences with short words are a good start.
You can use the so-called Fleschindex to calculate the readability of your texts. This analyzes the length of the sentences and whether they are words with few syllables. The higher your score on the Flesch index, the better the readability and the more accessible your texts.
It is best to always assume that you are writing your texts for children who are not yet able to read very well. Then you are on the safe side.
Images
Even the images on a website can be accessible by adding so-called alternative text – often abbreviated as “alt text”.
Alternative text may be a term you’re familiar with if you’ve ever dealt with search engine optimization. They come into play when relevant keywords are placed in the alternative text of the images.
However, in the context of an accessible website, alt text is intended to describe the particular image. This helps give blind people an understanding of what is displayed on a particular website.
The alternative text does not have to be extremely long. It is enough if you explain what is visible in the image in a short phrase.
Videos
A video’s sound can help people with visual impairments process the video. For deaf users or hearing impaired people, things are a little different.
Make sure that subtitles are available for all videos. If subtitles are generated automatically, like when you’re uploading videos to YouTube, you will probably have to correct them afterward.
Artificial intelligence is already quite good, but not yet perfect.
Structure
The structure of a website starts with accessible text. If your visitors are greeted by a huge wall of text, they will quickly leave your site.
To avoid this, please work with paragraphs that are not longer than 4 lines and break up the text into smaller units with other elements.
These could be…
- bullet points
- tables
- images
- videos
- Links styled as buttons
- forms
You can also add a little whitespace between these elements to give the content more room and further aid with accessibility.
Forms can be tricky. They can be a real hurdle for users with limitations, and your business will miss out on valuable leads. Take a detailed look at the contact forms on your website and make sure that they are easy to use for all users.
By the way:
Dark mode is becoming increasingly popular with many users because it is easy on the eyes. For people with a visual impairment, however, it is counterproductive. Therefore, do not force dark mode on your website. If you do want to use it, make sure people can activate it themselves if they want to.
Checklist for Creating Accessible Websites
Here’s our practical checklist for you so that you don’t forget anything when creating an accessible website:
- Choose a font size that is at least 16px (1 rem!) large
- Use sans-serif fonts and increase kerning if characters are very close to each other
- Choose a high contrast between text and background
- Keep your sentences short and easy to understand
- Make sure you maintain the correct heading structure
- Add concise alternative text to images
- Add closed captions to videos
- Write paragraphs with a maximum of 4 lines
- Use different elements to structure your text
If you are not quite sure to what extent your existing website already meets the accessibility requirements, there are ways to find out.
Providers such as Siteimprove help you to test the accessibility of your website. Lighthouse Report in Chrome also analyzes pages for accessibility and shows possible flaws.
How Does Accessible Reading Work on a Website?
To enable blind and visually impaired people to read a website, they use a screen reader. Something which will only go well when a website is truly accessible
An example of this would be Nonvisual Desktop Access (NVDA). This software for Windows) is available for download free of charge. and converts all contents of a website so that they are accessible for blind users.
This goes beyond just reading the website out aloud – which is a bit misleading when you use the term “screen reader” – because NVDA makes menus easy to use and aids in all interactions with a website for visually impaired people.
On a Mac you can use the built-in Voice Over screen reader, which works best with Safari.
The bottom line is that an accessible website must be operable exclusively with the keyboard.
Examples of accessible websites
To show you how this all works in practice, we have summarized a few examples of accessible websites for you.
nachrichtenleicht
Nachrichtenleicht.de is a perfect example of what easy-to-understand language looks like on a website. If you are used to more advanced writing, the sentences of nachrichtenleicht.de seem a bit childish.
However, for people whose native language is not German or who have problems with complicated formulations, the site is perfect.
If you want to make your text accessible as well, you can follow this best practice.
iBoB
iBoB is a platform for further education for blind and visually impaired people. In this sense, it is already somehow clear that, regarding the target group, the website MUST be barrier-free.
This quickly becomes apparent by looking at the very large font, good contrast, and colors that are suitable for people with dyschromatopsia (deficiency in the perception of colors) also known as color blindness.
For each link over which you move the mouse cursor or navigate to using your keyboard, it is immediately apparent that it is a clickable element. In general, the entire operation of the website is very simple and therefore accessible to all people
City of Bonn
The website of the city of Bonn is just one example of many municipalities that have already made their websites as accessible as possible. There is even a separate section on the website for people with disabilities who rely on barrier-free information.
Modern responsive web design (when the website automatically adapts to smaller screens) is a good example of how accessibility works online.
Modern responsive web design (when the website automatically adapts to smaller screens) is a good example of how accessibility works online.
The easy navigation also helps users move around the website smoothly.
Designing Accessible Websites with WordPress
Is web accessibility even possible with WordPress?
Of course!
An accessible website is mainly defined by the design and the presentation of the content. All these points are easy to implement with WordPress.
All that matters is that you’re working with a WordPress theme that allows you to easily implement the most important settings for accessibility.
- Are the color combinations easily recognizable?
- Is the font large enough, and is the typeface user-friendly?
- Can you incorporate different elements easily?
- Do all images have an alternative text?
- Is there a strong contrast between the text and the background?
- Can you navigate the pages and the menus by keyboard only?
These are all questions you should ask yourself when creating an accessible website with WordPress.
Especially with the technical aspects that have a great influence on the accessibility of a website, things can quickly become complex.
Choosing the right WordPress theme that meets all technical requirements (e.g. properly created menus, or how form fields are attributed) is essential.
To make creating your accessible website a breeze, we recommend GREYD.SUITE.
With the all-in-one WordPress tool, you can make any homepage accessible in no time and reach even more users.
You only have to click on the button to see it for yourself – testing is of course free of charge!
Bottom Line
Accessible websites are relevant for all businesses.
They make it possible for all people to have easy access to your offer. This article and the checklist will help you to make your website accessible.
If in doubt, hire an agency to create your accessible website. Professional web designers can help you make your website more accessible for everyone.
