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 from Johannes Mairhofer.
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. All users 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 does not yet receive the attention it deserves. Particularly with view of the demographic development and the will for inclusion digital barrier liberty must be considered with WordPress -WordPress - projects however, means Johannes Mairhofer. Because: Accessibility is also important from an entrepreneurial and SEO perspective.
The idea of an accessible website is 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 structure 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
- 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 barrier-free content.
Especially for new WordPress projects: A barrier-free website can be implemented with very little effort.
How should a website be implemented barrier-free? Many points are not as complicated as you might think and can be implemented without much effort.
Of course, this is easiest with a site that is just newly created and designed. But also already existing websites can be optimized afterwards. There are a few simple basic rules to follow.
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. Enumerations are realized with bullets or dots, not with a simple minus stroke. At 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 using a screen reader or keyboard.
- Excerpts from the text editor for this article: Above you can see that the lists were defined as such. The subheadings are also defined as H3.
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 site can be adjusted or the colors changed by a simple click of the user. This can help people with visual impairments or color blindness. This is also done by big companies like Pfizer.
In principle, this is already done automatically at WordPress . For example, a template can also 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)
My tip for a better understanding of an accessible website: gain experience yourself
In theory, the subject is not always so easy to understand. 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 net with a screen reader. Heiko shares his experiences with websites and social networks and tells us how he navigates 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.
- A braille line - Source: Wikimedia Commons. License: https://creativecommons.org/licenses/by-sa/3.0/
Screen reader and Braille display are the two most common browsing aids
A screen reader is software that recognizes text and reads it aloud. To navigate through web pages and documents, it is therefore important that tags are used for headings and images. This allows users to navigate through the webpage with a screen reader and keyboard or Braille display.
One variant of a screen reader is e.g. NVDA. This variant is free software and free of charge. I recommend to try it out and to call up your own website with the monitor turned off and to try 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 is the be-all and end-all for an accessible website
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 access to the website at least on computer and smartphone. Depending on the template, e.g. menus are adapted, sidebars are shown and hidden, but also designs are completely adapted. This is called responsive web design. Accessing your own website on a different device is easy and revealing.
The net is great. And the net 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 possibilities 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 corporations are placing more and more value on digital participation. In addition to the above-mentioned example of Pfizer, Twitter, for example, has for some time offered the possibility to add a picture description to images, Microsoft is dealing extensively with the topic and many others are gradually following suit. A detailed overview of positive accessible websites can be found here, for example.
Ultimately, an accessible website is also better for Google
Unfortunately, I experience it far too often that SEO is more important than good content, so I'm not a big fan of SEO arguments. But if web pages can be better read and interpreted by screen readers, it is also easier for the Google bot to correctly classify the visited site .
Just WordPress allows it already very fast and easy to create an approx. 80% barrier-free website.
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.
Through the use of tags for headlines and images and especially the description of images, a lot is already achieved with little benefit. Once the own website with a text browser to surf gives a sense of what screws should and can still be turned.
Whoever runs site for a company is always well advised to have it tested by blind people to get professional feedback and tips.