Hop on the accessibility WAVE

Accessibility is becoming more and more of a buzzword in the IT world. Why? We want to make our products more accessible not only to gain more users but also because it just feels good to invite everyone to use what we create – despite their disabilities.

As a QA specialist, my role is to make sure that the provided solution matches customer needs. But not only that – we should go beyond this, to propose and support solutions that are accessible to all, including those impaired in some way,

Fortunately enough, there are tools to help us test our products for the accessibility, to see what we already did right and what could we possibly improve.

The WAVE comes in

Today, I would like to share with you one of my personal favorite tools for quick accessibility testing of web pages and web applications – WAVE. This browser extension will not do all the work for you, but it will give you solid ground for accessibility assessment. It is fairly easy to use, but it requires some knowledge of web page architecture and accessibility requirements. As the creators themselves say:

“The WAVE Chrome and Firefox extensions allow you to evaluate web content for accessibility issues directly within Chrome and Firefox browsers. Because the extension runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The extension can check intranet, password-protected, dynamically generated, or sensitive web pages. Also, because the WAVE extension evaluates the rendered version of your page, locally displayed styles and dynamically-generated content from scripts or AJAX can be evaluated.”

With that out of the way, if you want to try for yourself:

The Chrome extension can be downloaded here.

The Firefox extension can be downloaded here.

After installation, the WAVE extension plugin will be shown on the browser bar. It will be grey when turned off (default state).

1

Now that we have the WAVE in our toolbox, it’s time to get to work! For our demonstration, I chose one of the most popular news sites in Poland – onet.pl. According to the Gemius / PBI survey in April this year (2019), Onet’s main page was visited by 11.12 million Internet users and each spent an average of 61 minutes and 9 seconds.  This seems like a web page we would expect to have a high level of accessibility from.

It’s also worth mentioning that we’ve also worked with Onet in the past – particularly in the area of Machine Learning and image recognition – so we know the website and the company behind it take great care to ensure a high-quality release.

Setup

All we need to do is to open a new tab in our browser – I chose Firefox Quantum, version 67.0.4. I also disabled all other plug-ins I have, because I do not want them to potentially influence the result. Then I went to the onet.pl page and clicked the WAVE icon on the browser menu bar to switch it on. WAVE quickly worked through the page and showed its results in the panel on the left side of the browser, while element markers were also shown on the page itself.

2

 

Reading and interpreting the information

 

WAVE panel

The first thing WAVE shows us is the Summary tab. It contains a list of all the issues found on the page: errors, alerts features, structural elements, HTML5, ARIA and contrast errors – it also shows the number of issues in each category.

To go through the detailed list and see exactly what problems WAVE found, we go to the second tab – Details – as marked by the flag. This is where the fun starts!

3

Firstly, we can filter issues related to either of the given standards. Just to give you some quick information: “WCAG stands for Web Content Accessibility Guidelines and helps to keep the internet accessible to everyone no matter what their needs are or what modifications they may require[1].” Article 508 is the US law for assuring the accessibility of software and web-based Internet information and applications.

  1. WCAG 2.0 AA – For Level AA conformance, the web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.
  2. WCAG 2.0 A – For Level A conformance (the minimum level of conformance), the web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.
  3. Article 508
  4. Full – All of the above (default)

When choosing the filter in WAVE, we take into consideration if the web page (application) is to be used in the US (if so, we would turn to article 508) or, rather, it has to conform to the international standards of WCAG. In our example, I choose the full filter to see all issues for the purpose of this demonstration.

When we have our filter chosen, we can browse the list of issues. These are categorized the same way as the summary tab, which we already say. Here, we can check and uncheck boxes to see or hide issue markers on the page – this is very useful when you want to quickly see only one issue category or all occurrences of a specific issue type.

Next to each issue type, a blue information icon is shown. This is one of the reasons I love using WAVE – easy information access. When you click the icon details, information about the type of the issue will be shown in the Documentation tab, containing explanations as to:

  • What it means
  • Why it matters
  • How to fix it
  • The algorithm… in English
  • Which exact part of which standard this violates (linked to the standard text, so you can easily find it and read more)

In short, it’s all the info you could need – no matter if you are an experienced or not-so-technical person. WAVE will help you understand exactly what is going on and why is it worth fixing. This isn’t even mentioning that it is a quick way to learn about standards and web pages. Killing several birds with one stone always feels good 😉

The documentation tab can also be used as a source of information for the accessibility testing report.

3

If we’d like to see where the issue occurs, we should click on the square icon in the Details tab and the page will be scrolled to the relative element, which itself will be marked with a red dotted line. It, of course, also works the other way around – clicking the square icon marked on the page will show a pop-up with the issue name and link that will open in the Documentation tab. Easy-peasy, right?

WAVE offers three modes for browsing the page with elements marked:

  1. Styles – the default view
  2. No styles
  3. Contrast

The style mode is mostly used to track the issues on the page, see where they occur if there are any clusters of issues etc.

Alternatively, the no styles mode will show us how the page will look stripped of styles, as this is how some sight-impaired users may use the page.

Finally, the contrast mode focuses on places where, because of the low contrast between text and background, the text itself might be harder to read. Again, we can get more information on the issue type in the Documentation tab after clicking the blue information icon.  We can also see how the page will look in black and white (for people who have trouble seeing colors), using the “desaturate page” option.

For each of the contrast errors, we can try to change the foreground and background colors to find a possible solution to increase the visibility of the respective elements.

5

 

Closing time

Deciding which issues are the most important and should be recommended as the first to fix is the most complicated part of the process. It depends on the type of the web page or application, which standards it has to apply to and why. Government pages are obligated by law to be accessible, while a page selling clothes may want to only hold up to some parts of WCAG.

In our chosen example, I’d recommend focusing on the missing document language, broken or empty links, and non-script elements. These fixes are quite easy to implement and will improve the accessibility of the site, ensuring that more people can enjoy getting the latest news.

Let me stress once again how important this is – making sure that the solution we deliver (application, web-page, desktop, mobile etc.) can be accessed and used by the variety of users is not only a question of a good business decision. This is also an ethical choice. In the modern world, limiting impaired people’s possibility to have the same access to what technology provides, as not impaired is discrimination.

The societies od developed countries are growing older. With that higher percentage of users will be dealing with some impairment that comes with age as Isabel Evens warned us on Test:Fest 2019. Keep that in mind my QA friends 🙂

[1] https://userway.org/blog/what-are-wcag-20-a-aa-and-aaa

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s