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 - an overview with practical tips by Johannes Mairhofer.
Accessibility in the digital space is actually an integral part of the internet and already stated in its standardised guidelines. And of course it also plays an important role in the WordPress Codex. All users 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. Especially in view of demographic developments and the desire for inclusion, digital accessibility must be taken into account in WordPress projects, says Johannes Mairhofer. After all, accessibility is also becoming 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.
- Using markup and stylesheets
- Device independent design
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 site that is just being created and designed. But existing websites can also be optimised retrospectively. A few simple basic rules must be observed.
1) Use page title, navigation and tags correctly
The title of the site is actually in the title and headings are logically structured and also formatted as headings, not just bold. Bulleted lists are realised with bullet points 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 site can be made easier to experience and navigate for blind people with a screen reader or keyboard.
3) Separate content and design
The content (text) and the design (layout) should be considered completely separate from each other. Using different CSS variants, for example, the contrast of site can be adjusted or the colours changed by a simple click of the user. This can help people with visual impairments or colour blindness. Large companies like Pfizer also do this.
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)
WordPress Accessibility: How to create an accessible website (+ plugins for it)
Accessibility in WordPress is an important component when creating websites. Why is accessibility so important? And how can you make your website accessible for everyone? We tell you all this and more in our article on WordPress accessibility.
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 treated theoretically here can also be tried out yourself without much effort. So you can get a feeling of how your site 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 with which a website can be accessed 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.
"*" indicates required fields
Conclusion: The web is for everyone!
The net and permanent availability is no longer new territory, but from the point of view of one generation it is still new. The generation of today's 30-year-olds, but at the latest the following generations, are accustomed to knowing that the net is always and everywhere available. We do not want to do without the possibilities of information and communication that the net brings with it, 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 barrier-free without much effort.
The fact that this is becoming increasingly important can also be seen in the fact that more and more large companies are attaching more and more importance to digital participation. In addition to the above-mentioned example of Pfizer, Twitter, for example, has for some time now 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. A detailed overview of positive accessible websites can be found here, for example.
An accessible website is also better for Google
Unfortunately, I see 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 site .
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 sitefor a company is always well advised to have it tested by blind people once in a while to get professional feedback and tips.