_What is WCAG and how to meet compliance?

The Modern society is very computerized. We want to have access to our music, books or movies wherever we are, regardless whether we’re in dentist’s waiting room or on a bus. To satisfy this demand,  private companies and  public institutions offer their service on the Internet. Despite that, there are a lot of barriers in using the web for disabled or elderly people, preventing them from enjoying the benefits of Internet.

In Poland, according to the data available on the website niepelnosprawni.gov.pl in 2011 the disabled people constituted 12,2% of the entire population. According to the data released by GUS in 2018 the elderly people constituted 24,8% of the population. These are large social groups and precisely those individuals require easier access to the virtual world. This is especially important with regard to public administration offices, to which every citizen should have unlimited access. That is why it is necessary to implement uniform standards for websites and mobile applications to make them accessible for disabled users.  These guidelines have been compiled into a document called WCAG – Web Content Accessibility Guidelines.

The problem of accessibility was also noticed by legislators. Countries from around the world are introducing laws for easing of the access to applications and websites  for the disabled people. In Canada, Canadian Human Rights Act was enacted in 1985. One of the objectives of this legislation was to prevent  discrimination of the disabled people. Furthermore, Americans with Disabilities Act was introduced in 1990 in the USA and helping disabled people was the main focus of this law. However, back then computers and the Internet weren’t as developed as they are today, so additional regulations were needed to provide equal opportunity for the disabled people also in the digital world. Building on this noble idea of making the web more accessible, the European Union introduced in 2016 a directive on the accessibility of the websites and mobile applications for the public sector. In Poland this directive was implemented in 2019. For now, these regulations concern only the public administration, however the European Commission has been working on the European Accessibility Act, which will also impact the private sector. As we can see, there is a trend in legislation. Regulations that are put in place will require software manufacturers to deliver more accessible products.

To better understand the needs of the disabled people, firstly we should take a closer look at different kinds of disability. Various impairments, permanent or temporary (like a broken limb), can be divided into following groups:

• mobility – users may find it difficult to use a mouse. Instead, they only use keyboard, or special devices to operate their computer,
• visual – users with different levels of impaired sight, color blindness or complete blindness. They require software like screen readers to announce the contents of the screen in either synthetic voice or Braille reader,
• hearing – users with different levels of impaired hearing. If the application uses sound to convey the information, then also visual signals should be provided or subtitles,
• cognitive – users may have problems with understanding content, recalling information, understanding language, retaining focus or with perception. Websites should be built in such a way, that all the information can be easily comprehended and is readily available.These are, of course, only some types of disabilities, that we can encounter in the real world. Besides those mentioned previously, we can find many more.

  There are many organizations and initiatives developing assistive technology for the disabled people. One of them is   W3C Web Accessability Initiative.  This organization works on standardization of the websites and applications accessibility. Four main areas for the recommendations created by WAI are:

• WCAG – Web Content Accessibility Guidelines, recommendations regarding criteria that should be satisfied by websites for them to be accessible. Its 2.0 version was adapted as ISO/IEC 40500 standard,
• ATAG – Authoring Tools Accessibility Guidelines, recommendations regarding tools used by content authors,
• UAAG – User Agent Accessibility Guidelines, recommendations regarding tools like browsers, plugins, media players, screen readers and other software that renders content,
• WAI-ARIA – Accessible Rich Internet Applications, framework that can be used to improve web applications and content accessibility, it can be useful when there are dynamic elements.

From the above mentioned WAI recommendations, in 1999 WCAG standard was published  as the first one. It contained 14 guidelines for the development of accessible websites. In 2008 version 2.0 was released, which introduced 12 non-testable guidelines that were split into 4 categories (perceivable, operable, understandable, robust). Each guideline is assigned with testable success criteria (61 in total). The latest version of the standard, which is WCAG 2.1, was published in 2018. It adds additional 17 success criteria to the previous version. The goal for that was to improve guidelines for three groups of users:

• with cognitive and learning disabilities,
• people with impaired sight,
• disabled people using mobile devices.

Additionally, each of the success criteria has level of compliance. From the lowest to the highest they are: A, AA and AAA. Accessible websites must satisfy all  the level A success criteria, should satisfy all the level AA  success criteria and may satisfy all level the AAA success criteria. For the website to be compliant with WCAG 2.1 AA standard, all success criteria of levels A and AA have to be satisfied.

The disabled people are often using various tools enabling them to surf the Internet. In case of the visually impaired people, those are the screen readers. They are allowing the users to be aware of what is happening on the screens of their devices. On the market, there are many applications of this type. WebAIM helps us to identify the most frequently used ones. WebAIM is a non-profit organization, that among other things, organizes screen reader surveys for people with disabilities. According to their eighth survey eighth survey WebAIM the three most popular screen readers used on desktops and laptops are:

• NVDA – open-source application, developed by non-profit organization NVAccess,
• JAWS – sold by Freedom Scientific, there are different kinds of licenses available,
• VoiceOver – reader built-in Apple operating systems.

As for mobile devices, most popular screen readers are:

•  VoiceOver – available on Apple devices,
• TalkBack – available on Android devices.

Having access to the information gathered in WebAIM surveys, we can decrease workload during the development. For example, we can reduce the amount of time dedicated to testing by only focusing on the most popular combinations of browser / screen reader.

Based on the recommendations from WCAG standard, we can make better decisions, while designing our product to avoid  patterns that are not accessible. Very often the design proposed by UX specialists may be visually appealing, but from the perspective of a disabled person, it can be unusable. Let’s consider color scheme. Fashionable colors, but with an insufficient level of contrast, may result in the user inability to access all the information published on our website. For some people this might be a serious obstacle, preventing them from using our product.

Next, let’s consider the dynamic content on a website, for example buttons appearing or disappearing after a checkbox is selected. The visually impaired users might not be aware that the additional elements are being rendered on the page and new actions are now possible. To provide the visually disabled people the same level of information about the system as other users, screen reader should announce that the additional element appeared on the screen. Unfortunately, this approach has also disadvantages. Using applications, where an excessive amount of information is being vocalized by the screen reader after each action, may be annoying and tiresome for the user. For example, when visually impaired user navigates to a web element and has to listen to few sentences describing its purpose. As a result we need to seek compromise between design and positive user experience also for the disabled users.

The dynamic web content may also pose a challenge to developers. Website or application has to be implemented in such a way, that allows screen readers to vocalize what is happening on the screen. To meet this requirement, we are often forced to use non-optimal solutions and workarounds, for the content to be correctly announced on the most popular combinations of browser and screen reader. The lack of standardization in the area of screen reader behavior may cause the  solution to fit only one reader. Of course, we do have WAI-ARIA to help with the dynamic content, but there are features that require additional implementation to meet the expected behavior. It is especially visible on mobile devices, where one solution works correctly only with Android’s TalkBack, or Apple’s VoiceOver and to make it work on both devices additional workarounds have to be implemented. Perhaps this situation will change with the popularization of the assistive technology and the development of UAAG standard.

Another important issue is the testing of accessible products and services. It may pose a challenge for a tester, since we’re not always aware of the needs of disabled people. Often, we don’t know how do they use the devices and how do they navigate on websites. This lack of knowledge raises the following questions: Do we convey enough information to the user? Is there too much information on the website? Will users know what actions are available to them? Will they be able to access all contents?

The important tools that we can use to support testing activities are tools for static analysis. On the market, there are various applications and browser plugins providing the ability to quickly analyze the color contrast of the web elements or analyze the html code. One of those tools is WAVE plugin developed by WebAIM. It provides a quick and easy way to analyze color contrast, headings structure and also web elements. The plugin is able to verify the correctness of html implementation, it can find missing attributes for web elements and also identify the incorrect usage of ARIA. Although static analysis allows us to eliminate few problems, manual tests are still a necessity. Especially, when there is a need for verifying website behavior with screen readers, like the order of the elements on the page while navigating with keyboard or what is announced to the user.

Admittedly, delivering accessible solutions requires more work, but the effort put in designing, implementation and testing will pay off in more mature and complete product. One, that could reach larger group of users.

Investing time in developing accessible products is important, because we should provide people equal opportunity  and prevent discrimination of the disabled people online. More transparent websites or easier to understand graphical user interfaces will benefit all users, not only those who are disabled. This in turn, translates to how likely it is that people will use our product. These days, there is a lot of competition for users attention in the web and accessibility may be the feature that makes our product to stand out.