Create an Accessible Website With This Simple Checklist

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.

Text

To make your text easily digestible for all users, high contrast is important. Black text on a white background is popular because it’s the most comfortable to read for everyone.

You, as a web designer, might want to get really creative and work with a variety of bright colors. But, if you do so, please be aware that it is at the expense of a limited minority.

The size and style of your website’s font are also important. People with visual impairment will find it difficult to read your text if the font is too small or too squiggly.

Our recommendation: Choose a font size of at least 16px on your website. Also, sans-serif fonts (e.g. Arial or Verdana) are recommended for digital products.

Various web design trends show that serif fonts are becoming more and more popular on the web. Please only use those kinds of fonts for headlines with bigger font sizes.

Comprehensive language is another major factor for accessibility. It’s probably safe to say that most of your website visitors aren’t linguists that have an enormous vocabulary.

Statistically, quite the opposite is the case.

Considering that about every 6th German adult reads like a ten-year-old, it is more than advisable to write your texts in a way that is easy to understand.

Keeping your words and sentences precise is a good start.

The so-called Flesch reading ease score lets you calculate the readability of your text. This analyzes the length of the sentences and the number of syllables. A high Flesch reading ease score indicates that your text is readable and accessible.

It’s best to always assume that you’re writing for children who can’t read very well yet. Then you’re 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…

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:

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 undefinedblank” rel=”noopener”>Lighthouse Report 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 an accessible website, they use a screen reader.

An example of this would be Nonvisual Desktop Access (NVDA). This software 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.

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).

For each link over which you move the mouse cursor, 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.

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.

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!

test now for free

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.