Accessible websites are no longer a supposed niche topic for people with disabilities. It concerns us all and even helps the SEO fans among you.

Accessibility in the digital space is actually an integral part of the internet and is already laid down in its standardized guidelines. And of course, it also plays an important role in the WordPress Codex. Everyone should be able to use WordPress, no matter what language they speak, what economic status they have or what physical limitations they have. Nevertheless, the topic does not usually receive the attention it deserves. Johannes Mairhofer believes that digital accessibility must be taken into account in WordPress projects, particularly in view of demographic developments and the desire for inclusion. After all, accessibility is also important from a business and SEO perspective.

Accessible websites are not new

The World Wide Web Consortium, W3C for short, was founded in 1994 to standardize the technologies in the World Wide Web. Particularly important standards here are:

• HTML (still the basic structure of almost every website)
• CSS (Cascading Style Sheets, e.g. used with WordPress templates)
• WCAG (Web Content Accessibility Guidelines)

The WCAG guidelines are developed by the Web Accessibility Initiative (WAI), which in turn is a group of the W3C. There are now two versions.

WCAG 1.0

• Using markup and stylesheets
• Device-independent design

WCAG 2.0

An accessible website should fulfill the following criteria:

• Perceptible (e.g. text alternatives for images)
• Operable (e.g. controllable via keyboard)
• Comprehensible (e.g. through easy language)
• Robust (compatible)

The idea of barrier-free websites is therefore not new and has even been enshrined in the Barrier-free Information Technology Ordinance (BITV) since 2002. This means that at least the websites of public authorities are obliged to offer accessible content.

Create an accessible website

So how should a website be made accessible? Many points are not as complicated as you might think and can be implemented without much effort. The following applies to new WordPress projects in particular: an accessible website can be implemented with very little effort.

The easiest way to do this is of course with a website that has just been newly created and designed. But existing websites can also be optimized retrospectively. There are a few simple basic rules to follow.

1) Use page titles, navigation and tags correctly

The title of the page is actually in the title and headings are logically structured and also formatted as headings, not just bold. Bulleted lists are realized with bullet points or bullets, not with a simple minus bar. In WordPress, this can be specified directly in the editor. Depending on the template and editor used, several classes of headings are available here. By using tags (e.g. H1 and H2 for headings), the website can be made easier to experience and navigate for blind people with a screen reader or keyboard.

2) Do without JavaScript and Flash in the design

It is best to use HTML and CSS for the design. Javascript and Flash should not be used. Javascript is, as the name suggests, a scripting language. Regardless of the fact that it is insecure, not every device and browser can process the code. As the website should be available on as many devices as possible, Javascript is not recommended.

3) Separate content and design

The content (text) and the design (layout) should be considered completely separately. Using different CSS variants, the contrast of the website can be adjusted or the colors changed with a simple click, for example. This can help people with visual impairments or color blindness. Large companies such as Pfizer also do this.

In principle, WordPress does this automatically. For example, a template can be changed without having to change the content. If the website is accessed using a smartphone or tablet, the layout is also adjusted automatically.

4) Observe the two senses principle

As a matter of principle, content should be prepared in such a way that it can be perceived by two different senses. In this way, the website can be experienced by as many people as possible without great effort. This can be achieved with the following measures, for example:

• Add image descriptions to images (can be done directly via the WordPress editor)
• Add subtitles to videos (e.g. YouTube does this automatically in some cases)
• Organize text with structure and headings (works in the editor)

Accessible website: Gathering experience

In theory, the topic is not always so easy to understand. I spoke to Heiko Kunert, Managing Director of the Association for the Blind and Visually Impaired, about barrier-free websites. Heiko is blind himself and surfs the web with a screen reader. Heiko talks about his experiences with websites and social networks and explains how he uses his smartphone and a Braille display to surf the web.

Many of the things covered here in theory can also be tried out yourself without much effort. This way you can get a feel for how your website is actually perceived.

How screen readers and Braille displays help

A screen reader is software that recognizes text and reads it aloud. To navigate through websites and documents, it is therefore important that tags are used for headings and images. This allows users to navigate through the website using a screen reader and keyboard or Braille display.

One variant of a screen reader is NVDA, for example. This variant is free software and free of charge. I recommend trying it out once and calling up your own website with the monitor switched off and trying to navigate through the menus.

A Braille display translates the current line on the screen into Braille. This line is real hardware that is connected to the computer. The Braille display works in combination with a screen reader.

Responsiveness for accessible websites

Computers, laptops, smartphones, tablets, smart watches and text browsers. The number of devices that can be used to access a website is huge. One of the important points of WCAG 2.0 is the availability of the website on as many devices as possible.

Most WordPress templates are now more or less responsive and allow the website to be accessed at least on computers and smartphones. Depending on the template, menus can be adapted, sidebars can be shown or hidden and designs can be completely customized. This is called responsive web design. Accessing your own website on a different device is simple and informative.

Conclusion: The web is for everyone!

Although the internet and permanent availability are no longer new territory, they are still new from the perspective of one generation. The generation of today's 30-year-olds, and at the latest the following generations, are used to having the Internet available everywhere and at all times. We don't want to do without the opportunities for information and communication that the Internet brings, even in old age.

The need for accessible websites is therefore increasing and is growing from year to year. With the help of the available options and tools integrated in WordPress (e.g. image description, headings, CSS), it is possible to make websites at least accessible without much effort.

The fact that this is becoming increasingly important can also be seen in the fact that more and more large corporations are placing more and more value on digital participation. In addition to the Pfizer example mentioned above, Twitter, for example, has been offering the option of adding a picture description to images for some time now, Microsoft is working extensively on the topic and many others are gradually following suit.

An accessible website is also better for Google

Unfortunately, I see far too often that more value is placed on SEO than on good content, so I'm not a big fan of SEO arguments. But if websites can be read and interpreted better by screen readers, it is also easier for the Google bot to categorize the visited website correctly.

Create an accessible website with WordPress

There is still a long way to go to achieve 100% accessibility. And this is probably not feasible for many small companies and private blogs. However, the options offered by WordPress make it easy to achieve around 80 percent accessibility.

The use of tags for headlines and images and, above all, the description of images can achieve a great deal with little benefit. A quick look at your own website with a text browser will give you a feel for what can and should be tweaked.

If you run a website for a company, it is always a good idea to have it tested by blind people to get professional feedback and tips.