Accessible Wordpress Web Design - How Important Is Accessibility In Web Design?
By: Joseph de Souza
What Is Accessibility In Web Design?
According to W3C, "Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web."
This means that the website has to be accessible to everyone and that includes people with disabilities and screen readers.
Disadvantages of a Flashy Website with Lots of Interactivity
Do not have a very flashy website with lots of interactive elements like hover effects, slideshows, carousels, image sliders and animations. First of all, the page load time will increase and this will definitely decrease your conversions. If your website loads in more than 3 seconds, there is a tendency for the customer to leave the website. In fact, according to a March 2016 study by Google, 53% of visits are abandoned if a mobile site takes longer than 3 seconds to load.
In everyday usage, it will load even slower in mobile devices as the internet speeds are generally slower when using mobile data. The animations featured on the website will not get the desired results.
For example below is the screenshot of a WordPress website left is an interactive one with a slideshow, Flip box effects carousel and other interactive elements and the right is a simple website designed for accessibility.
The Problem With Sliders or Carousels
Most website owners place valuable information within the sliders or carousels. This is revealed only if the visitor clicks on it. It is highly unlikely that the website visitor will click on a large proportion of these, as a large proportion of the visitors are not computer savvy. The same with slides, the change, people will not stick around to read all the text written on it.
The slides will appear very small in mobile devices (as seen in the above screenshot). The search engines will ignore the text on the slide as it is an image. Search engines may also ignore the text that requires JavaScript to display.
Research shows that only 1% of people click on a slider, of which 98% is the first slide.
People with disabilities or those using screen readers may find it difficult to access the content presented primarily through slides, carousels, over effects and animations. If you test the content through the screen readers, you will notice that they will not read the text. They will read the text which is only in plain HTML. Even the text behind JavaScript is skipped. This will not be compliant with laws provided for equal online access for people with disabilities.
Internal Links And Sliders
Test the links on the sliders. Unless you added another menu with plain text HTML links, the search engines are likely to ignore them, as they are not accessible.Same goes for screen readers.
Having plain text links will also enable all your pages to get indexed with the search engines. Although everything here applies to all types of websites, it must be stressed that websites in the medical sector like doctor's clinic, dental clinic, dentist, doctor, (medical practitioner), hospitals etc. have even a greater necessity to be compliant.
Graphics Of Text
If a graphic is made of text (See the screenshot below), the text on it will not be readable by the search engines or by screen readers.
Interactivity and Web Accessibility
Do not use lots of interactivity as it will be difficult to be compliant for accessibility. There are already laws in this regard in US, Canada, UK, Europe, Australia and New Zealand. In case your website is below 90% compliance, there may be a threat of lawsuits. Especially if your website is in the healthcare sector like doctors, dentists, hospitals etc.
There are also popups which appears in the middle of the screen and even more irritating on a mobile device. Popups interrupt the experience and leave a bad impression. So unless it is super important and extremely necessary do not use that.
Next we have a live chat on Whatsapp as well as a book now for consultation buttons. Unless you can reply fast do not use the live chat button. The book now for consultation button should be used only if you have a linked to booking software or calendar. Such buttons cannot be read by screen readers and are not compliant with accessibility laws. Checkout the screenshot below - An example of popup on a mobile device is shown on the left, whereas a slideshow is shown on the right.
How To Design For Web Accessibility
Most higher ranking websites in this niche are just plain websites with very little interactivity. For example, they just list all their services in a big menu at the top of the page, or have a main menu and a side menu.
The main principles are:
1. All text in HTML format with high background and foreground contrast (a minimum of 4.5 to 1) - Black text on white foreground works best
2. Text Links preferably underlined and again high contrast between background and foreground (a minimum of 4.5 to 1)
3. ALT text for all images that are important and not merely used for decoration
4. Content organization must have a clear heading structure and follow a logical order (e.g., H1, H2, H3)
5. Navigation elements must be consistent throughout every webpage. 
Simple Accessible WordPress Website
An example of a simple website that is easily indexable by search engines and fully accessible is described. There are 2 menus a main menu and a side menu. The main menu can be below the header or on the side of the logo.
The header can be a logo followed by a menu, but you can have a full width header as well instead of the menu by the side of the logo. This test website using the free Astra theme and is fully responsive with responsive menus as well.
A custom font charter has also been used and is locally hosted. Google fonts can also be locally hosted. They just require to active the option in the Astra control panel.
You can have your choice of colour combinations and fonts
The accessible website has only a few plugins: Classic Editor, Max Mega Menu, UpdraftPlus - Backup/Restore, Wpdevart vertical menu and Yoast SEO . I would also add Wordfence Security to this. WP Super Cache can be added if there are a considerable amount of visitors to the website
Comparing Flashy Interactive WordPress Website With a Simple WordPress Website
And Finally here is a video to illustrate the effects of a flashy WordPress website with iteractivity and not compliant with accessibility guidelines compared to a simple WordPress website which is compliant.
Accessibility In Web Design:
- Page load time increases and accessibility compliance decreases when you use too many flashy and interactive elements like hover effects, slideshows, carousels, image sliders and animations.
- Research shows that only 1% of people click on a slider, of which 98% is the first slide.
- According to a study by Google, 53% of visits are abandoned if a mobile site takes longer than 3 seconds to load.
- All text in HTML format with high background and foreground contrast (a minimum of 4.5 to 1)
- Text Links preferably underlined and again high contrast between background and foreground (a minimum of 4.5 to 1)
- ALT text for all images that are important and not merely used for decoration
- Content organization must have a clear heading structure and follow a logical order (e.g., H1, H2, H3).
- Navigation elements must be consistent throughout every webpage
About The Author
Joseph de Souza is a leading Freelance SEO consultant and Web developer in Goa, India with more than 17 years of experience in internet marketing.
He has a proven track record and has has helped several companies increase their traffic many times over and thereby increase their revenue and profits.
Besides English, Joseph has also successfully optimized two German language websites and a Danish language website and obtained outstanding results.