Create an Accessible Website With This Simple Checklist

Web accessibility makes sure that people with disabilities have the same access to information as everyone else. Learn more about this here.

Someone working with a screen reader

Patrick Mitter /

21.07.2021


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.

Blind man sits on sofa with sunglasses and blind man cane.

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.

Working space

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.

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.


By Patrick Mitter

Patrick loves good texts. Preferably about topics concerning online marketing and WordPress. Having built websites by using well-known page builders on his own and being very experienced in the SEO industry, he is very familiar with any kind of problems regarding those plugins. This is the reason why he adopted Greyd’s mission to simplify work for web designers as well as agencies.

Recent in Learn

A hand with one finger pointing at a glass wall which depicts a network of folders.

Demystifying WordPress Multisite

Read more

an AI using wordpress

How to use AI sensibly for WordPress websites

Read more

wordpress better cms alternative blog banner

Navigating the Headless CMS Landscape: Why WordPress is a Prime Choice

Read more

accessible website content blog image

How to create accessible web content

Read more

Several screens and devices connected with a WordPress server in the middle

Using WordPress for franchise websites

Read more