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 already stated 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 are subject to. Nevertheless, the topic usually does not yet receive the attention it deserves. Especially in view of the demographic development and the will for inclusion, digital accessibility must be considered in WordPress projects, says Johannes Mairhofer. Because: Accessibility is also important from a business and SEO perspective.

Accessible websites are not new

In order to standardize the techniques on the World Wide Web, the World Wide Web Consortium, or W3C, was founded in 1994. Particularly important standards here are:

• HTML (still the basic framework of almost every website)
• CSS (Cascading Style Sheets, e.g. used in 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 here.

WCAG 1.0

• Using markup and stylesheets
• Device independent design

WCAG 2.0

An accessible website should meet 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 a barrier-free website is therefore not new and has even been anchored 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

How should a website be made accessible? Many points are not as complicated as you might think and can be implemented without much effort. Especially for new WordPress projects, the following applies: An accessible website can be implemented with very little effort.

The easiest way to do this is, of course, with a website that is just being created and designed. But existing websites can also be optimized retrospectively. Here, it is important to observe a few simple basic rules.

1) Use page title, navigation and tags correctly

The title of site is actually in the title and headings are logically structured and also formatted as headings, not just bold. Bullets are realized with bullets or dots, not with a simple minus stroke. With WordPress, this can be specified directly in the editor. Depending on the template and the editor used, several classes of headings are available here. By using tags (e.g. H1 and H2 for headings), the website can be made more experienceable and navigable for blind people using a screen reader or the keyboard.

2) Do without JavaScript and Flash in the design

For the design, it is best to use HTML and CSS. 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 every browser can process the code. Since 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 separate from each other. Through different CSS variants, for example, the contrast of the website can be adjusted or the colors can be changed by a simple click. This can help people with visual impairments or color blindness. This is also done by big companies like Pfizer.

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

4) Observe the two senses 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 much effort. This can be achieved, for example, through the following measures:

• Add image description to images (can be done directly via the WordPress editor)
• Add subtitles to videos (e.g. Youtube does this automatically).
• Structure text with headings (can be done in the editor)

Accessible website: Gathering experience

In theory, the subject is not always so easy to comprehend. I spoke with 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 shares his experiences with websites and social networks and tells us how he gets around the web with his smartphone and a Braille display.

Many things that are covered here theoretically can also be tried out yourself without much effort. This way you can get a feeling of how your website is actually perceived.

How screen readers and Braille displays help

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

One variant of a screen reader is, for example, NVDA. This variant is free software and free of charge. I recommend trying it out 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, smartwatches, 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, for example, menus are adapted, sidebars are shown and hidden, but designs are also completely adapted. This is called Responsive Web Design. Accessing one's own website on a different device is simple and revealing.

Conclusion: The web is for everyone!

The network and permanent availability are no longer new territory, but they are still new from the perspective of one generation. The generation of today's 30-year-olds, but at the latest the following generations, are accustomed to knowing that the network is always and everywhere available. We don't want to do without the opportunities for information and communication that the Internet brings, even in our 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 barrier-free without much effort.

The fact that this is becoming increasingly important is also evident from the fact that more and more large corporations are attaching more and more importance to digital participation. In addition to the example of Pfizer mentioned above, Twitter, for example, has for some time been offering the option of adding a picture description to images, Microsoft is dealing with the topic in detail, and many others are gradually following suit.

An accessible website is also better for Google

Unfortunately, I experience it 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 better read and interpreted by screen readers, it is also easier for the Google Bot to correctly classify the visited website.

Create an accessible website with WordPress

It is still a long way to 100% accessibility. And that is probably not feasible for many small companies and private blogs. But with the possibilities offered by WordPress it is easy to achieve about 80 percent accessibility.

By using tags for headlines and images, and especially for the description of images, a lot can be achieved with little benefit. Once you have visited your own website with a text browser, you will get a feeling for which screws should and can be tightened.

Anyone who runs the website for a company is always well advised to have it tested once by blind people to get professional feedback and tips.