How to get level AAA website accessibility? Report from working on the customer's website.
PixelEmu and Joomla-Monster brands manager, Izabela Kowalska knows how to make websites accessible for people with disabilities. I’ve just read the interview, where she describes her work on the adaptation of wuhcag.com (the website of the WCAG 2.0 standards book's author) website to WCAG 2.0 standards.
The team she's working with is significantly experienced in web development services and providing Joomla templates along with Joomla extensions and WordPress themes and plugins. Both brands (Joomla-Monster and PixelEmu) are pioneers in creating WCAG compliant websites.
Previous experiences with the Web Content Accessibility Guidelines WCAG 2.0
The team dealt with WCAG 2.0 guidelines for creating an accessible website for the first time in 2015. It was a fresh topic that required analysis and implementation of a new product. It was the first contact, learning technical solutions and the possibilities of using it. More specifically, it was a project for the polish organization. Their team arranged the environment to test the first WCAG-ready website template by people with different disabilities. The result was the first template for Joomla created according to WCAG requirements. Because it ended successfully and this was met with a positive feedback from users, the solution was also introduced for working on WCAG WordPress themes.
Since then, there have been a lot of new WCAG ready to use website templates (Joomla and WordPress), which are willingly used by web developers to build websites for public institutions and different businesses. This is also because the law in many countries requires the owners of the parties to make people with different disabilities. As a success, one can cite an example of a site that was awarded at the WCAG conference in Poland, and its author used the PixelEmu WordPress template.
How the adapting the wuhcag.com site to the WCAG requirements looked like?
This process is always similar. The first step is to test all available website pages (one by one) using the knowledge about Web Content Accessibility Guidelines and WCAG validators. For this purpose, the team chooses only the most recommended tools like wave.webaim.org or achecker.ca. The goal is to find all potential issues and check where they come from (for example bugs in the code).
Izabela describes WCAG checkers as a very useful in automating the process of catching potential issues because they give many suggestions and solutions. Unfortunately, there is a risk that some problems will be not reported or false information will be provided. So it's not a perfect choice. The alternative way is to test the website by people with disabilities. The conclusion is that without the human influence it can’t be a 100% effective analyze. However, the wide knowledge of WCAG 2.0 standards plays a great role while working on the website accessibility.
The original wuhcag.com score against WCAG 2.0 was not so bad, and issues were not complicated. The whole overview was at the high-level mainly because of the correctly implemented content. Unfortunately, it didn't meet the lowest WCAG A level of such problems like contrast errors (low contrast for several website elements, usually links) or lack of ALT images attributes.
Contrast errors or lack of ALT for images are not serious problems, but for people with visual disabilities, it can confuse because of unreadable elements on the website.
Fixing the wuhcag.com site process
Simple WordPress WCAG 2.0 theme was used on the wuhcag.com website to start with the good quality & strong base. The WCAG WordPress theme comes with a set of facilities for people with disabilities (high contrast modes, font size switcher, layout modes). It's optimized for the keyboard shortcuts to let site visitors navigate easily. After implementing the theme, it was time to verify posts and pages and improve the content (using the specific code in the theme) for screen readers.
The website is not complicated in itself, however, there is a lot of content, blog posts, and together more than 100 elements requiring verification for WCAG and then fixing found problems step by step. The author emphasizes, however, that it was teamwork, two specialists who tested the site took part in it as well.
As the work was finished, the website meets WCAG 2.0 AAA criteria (including web design contrast and web page content).
The issue of support for screen readers and the availability of the website for people with visual disabilities has significantly improved. Significant facilitation for visitors to the site relates to the issue of browsing and navigating the website using shortcuts. Active elements like links or inputs in a form are marked with a red border.
It is worth mentioning that it was a state at this given moment because it is easy to go below the reached level AAA of WCAG. The author explains how important it is to take care of publishing the content according to WCAG 2.0 guidelines.
At the end of the interview, there are words of thanks for the opportunity to work on wuhcag.com website. For the whole team that made their contribution to this project, it was a tremendous satisfaction.
- Meet business WordPress theme with WCAG 2.0 / ADA compliance.
- Best lawyer WordPress theme with WCAG 2.0 and ADA compliance. The quick review.
- Municipality & city portal WordPress theme with WCAG compliance.
- Looking for medical WordPress theme? Check it out!
- Must-see WordPress theme for a school site.