Accessible Web Design: Making the Web Usable for Everyone

1. What does barrier-free mean?
2. What does barrier-free mean on websites?
3. Reasons for barrier-free websites
4. What does an accessible website look like?
5. What guidelines for digital accessibility are there?
6. Checklist for an accessible website
7. CMS for barrier-free web design
8. Tools for an accessible website
9. Conclusion

There is nothing on the internet that does not exist. With just one search query, users receive tons of information. Theoretically. Because for people with disabilities and impairments, information is often withheld. Most websites are not barrier-free or at least low-barrier. What exactly this means, how you can remove barriers on your website and also benefit from it yourself, you can find out in this article.

What does barrier-free mean?

Accessibility refers to the design of our environment. People with physical or mental limitations must be able to perceive and use their living space without the help of others. This applies to buildings, means of transport, everyday objects and services. The modern view of accessibility does not focus on individual groups of people. It's about taking into account the needs of all people: physical and mental limitations of all kinds, regardless of whether they are disabilities in the classic sense, effects of age or level of education. Here we often speak of "universal design".

What does barrier-free mean on websites?

In connection with websites, we talk about digital accessibility. Although the Internet can theoretically be used by everyone at any time, people with disabilities often encounter barriers:

• Barriers to perception
• Barriers to operation
• Barriers to understanding

Specifically, digital accessibility means: Websites are designed in such a way that almost everyone can use them on their own. For example, blind people need a descriptive audio track for your content. For visually impaired people, it is important that your website has a high contrast so that they can recognize content well.

The World Wide Web Consortium (W3C), which develops standards for the Internet, is a big help in implementing this. The Web Accessibility Initiative (WAI) with guidelines for barrier-free web design has existed since 1999. The Web Content Accessibility Guidelines contain practical instructions. This allows the 4 principles for accessible websites defined by the EU to be implemented:

1. Perceptibility:Information must be able to be perceived through at least one sense.
2. Operability:Control elements must be able to be used by everyone.
3. Understandability:Information and operation are designed to be understandable.
4. Robustness:Contents can, for example, be made accessible with assistive technologies.

These 4 principles contain certain success criteria. The degree of accessibility depends on how many success criteria your website fulfills.

Reasons for barrier-free websites

Greater range

Barrier-free websites are rewarded by search engines. User friendliness is an important ranking factor for Google and other search engines. With a barrier-free website, you make access to information easier and are therefore more user-friendly.

More Potential Customers

In addition to the higher range, you are also expanding your target group. Impairments are diverse and often develop over time. People who are now still using your offers may not be able to do so in a few years.

Better Usability for All

An intuitive and easy operation of your website should always be your goal. Texts with high contrasts are easier to read, even on a smartphone. With simple texts, your messages are clearer - for everyone.

Social Responsibility

Do not exclude people with limitations and be a model for others. Contribute to making the Internet usable for everyone with your work.

Legal requirements

Authorities are already obliged to design their web offers to be barrier-free. As are companies with certain goods and services. You can read up on whether you will be obliged to design in an accessible way in the near future from the Federal Agency for Accessibility.

What does an accessible website look like?

To make your website accessible, you need to tackle three areas:

Technology, Design and Content.

1. Technology
   ⁠There are numerous technical aids for people with impairments. Your website technology must enable the function of these aids. For people with visual impairments, for example, there are screen readers. These must be able to capture your entire website including documents and forms.
2. Design
   ⁠The website must be designed in such a way, for example, that a larger font is easily possible. Many older people, especially on smartphones, set a larger font size. You should also take color blindness into account; red-green color blindness is one of the best known here.
3. Content
   ⁠Prepare the content in an easily understandable way so that people with cognitive impairments can understand your texts. For graphics with important information, a descriptive alternative text is a must. Your video and audio files must also be usable for users with sensory perception restrictions.

Your website is considered barrier-free if it covers all three areas. Let's take a look at a few examples of accessibility on the net.

iBoB

iBoB is a platform for vocational training for blind and visually impaired people. The font is larger than usual, the color contrast is strong, the page is kept simple.

Source:iBoB homepage

German Institute for Human Rights

The German Institute for Human Rights is committed to ensuring and promoting human rights in Germany and abroad. The website offers a variety of options to reduce barriers: simple language, enlarging text, increasing color contrast and sign language.

Source:Homepage of the German Institute for Human Rights

nachrichtenleicht

A very good example of simple language is the page nachrichtenleicht.de. Once a week, news from the radio station Deutschlandfunk is published in simple language. This makes news accessible to all people.

Source:nachrichtenleicht homepage

What guidelines for digital accessibility are there?

When it comes to digital accessibility, several laws and guidelines come together. Some of them only apply to public bodies so far, others also affect services and products in the IT sector.

UN Convention on the Rights of Persons with Disabilities (UN-CRPD): Rights that the state must ensure for people with disabilities.

European Accessibility Act (EAA): EU Directive 2019/882 with specific requirements for barrier-free design, with a focus on digital products and services for private companies.

EU website directive EU-2016/2102  for public bodies: Public bodies are obliged to offer barrier-free web services. This directive applies at federal, state and local level. It covers the entire web presence of authorities including apps and documents.

To comply with the laws, there are different requirements at state level. In Germany, for example, there is the Disability Equality Act with the Barrier-Free Information Technology Regulation (BITV) 2.0.

In Switzerland, the Disability Equality Act (BehiG) has been in force since 2004. This already takes into account age-related restrictions.

Checklist for an accessible website

With a checklist, not all criteria for an accessible website can be fully processed. But: The checklist is a good start to make first improvements as quickly as possible and to create a low-barrier web design.

1. Design

• high contrast between foreground and background color
• website structure easily discernible
• HTML and CSS strictly separated
• Design works even at 200 % enlargement
• Take into account color blindness
• Hyperlinks with meaningful titles

2. Navigation

• Links and buttons are easy to click - with mouse and finger
• Website navigation works without a mouse
• Forms and surveys can be operated with the keyboard

3. Text

• easily understandable language
• Information clearly structured
• Headings hierarchically structured
• Tables readable for screen readers
• use intended HTML elements

4. Media

• Videos with subtitles
• Transcripts for audio files
• Alternative texts for images
• Images in sufficient resolution
• Take into account color blindness
• PDF, Word and PowerPoint files accessible

CMS for barrier-free web design

The question now arises as to how you can best implement barrier-free web design. This question is not so easy to answer. There are content management systems that have been developed to be barrier-free in terms of frontend and backend. But they are not completely barrier-free out of the box.

So which CMS should you choose? Accessibility is largely achieved through the design and presentation of the content. Therefore, choose a CMS that is easy to customize and extend. Adjustment aids, such as the "enlarge font" or "increase contrast" function, must, for example, be programmed in.

On OMR Reviews you will find over 40 rated Content Management Systeme (CMS). Not all are equally suitable for barrier-free web design. But with these 7 CMS systems you can implement barrier-free websites particularly easily:

• Contao
• WordPress
• Scrivito CMS
• Magnolia
• Drupal
• TYPO3
• Joomla

Tools for an accessible website

As you already know, there is not the one CMS for barrier-free web design. In addition to design adjustments in the CMS itself, there are tools that support you in implementing digital accessibility. Here we present some.

1. ReadSpeaker

ReadSpeaker is an external service that reads your content aloud at the click of a button. The reader is available for web content, web documents, web forms and more.

2. leserlich.info

By entering your color values for foreground and background color, the Contrast Calculator calculates the contrast ratio. This is how you check whether your color combination is barrier-free.

3. Coblis

With Coblis you can simulate color blindness for your images. To check your website, you can check screenshots of it with the tool.

4. LanguageTool

Using the LanguageTool, you can check your texts for simplicity.

5. WAVE

With the free tool, you immediately get a very detailed check on your website's accessibility.

Conclusion

Everyone benefits from barrier-free websites - including you. Due to the diversity of restrictions, it is almost impossible to completely eliminate barriers on websites. But there are countless ways to make a big difference with small changes. Inclusion does not end at the door threshold. The time has come to take action.