Some of us must have wished for an automated tool that could completely test a webpage for these requirements. That would make this task so much easier. But sadly, there is no such tool. While it is possible to automatically compute contrast ratio of some non-text elements, but it would need that colour (hex codes) is identified from CSS. Without colour identification, tools will struggle to find the right ratio. We will have to wait till such a tool with strong AI is developed. Anyway, understanding the success criterion is much more fun and manual testing is much more reliable.

In a nutshell, testing of contrast for non-text elements cannot be relied on automated tools. It requires manual testing to ensure that all required web page elements are thoroughly tested. It needs human judgement to ensure that only the elements in scope are examined.

As opposed to the title of this blog so far, we have only made it seem even more daunting. So, now let’s try and simplify it by logically dissecting and grouping its requirements. We shall also address the dilemma while testing contrast requirements of the infamous focus indicator.

As the success criterion is quite extensive, we will decode it in a series of blogs.

Overview of Success Criterion 1.4.11 Non-text Contrast

This success criterion was newly introduced in WCAG 2.1 in June 2018. It has been placed under the guideline 1.4 “Distinguishable” which is a part of the principle “Perceivable”. It has WCAG conformance Level of (AA), the minimum conformance level that products should try to achieve. Conforming with this success criterion ensures people with visual impairment, especially low vision users can identify important non-text information.

The success criterion 1.4.11 Non-text Contrast states: “The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components

Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Graphical Objects

Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.”

As the name itself suggests, it requires that non-text elements have sufficient contrast. Note that any form of text is separately tested for contrast under WCAG Success Criterion 1.4.3 Contrast (Minimum).

Basic Understanding for Testing

In general terms we can say, all informational non-text elements MUST have a minimum contrast ratio of 3:1 with its adjacent colours. Non-text is considered informational when it is relied upon to identify or understand the purpose of a component. From the normative definition, statements and examples on the understanding page, here is a derived methodology for finding contrast ratio of non-text elements.

Non-text contrast testing methodology key requirements checklist:

• Informational or Not – Find out if the non-text element is informational or not. If yes, proceed further. If no, not required to test further.
• Non-text Identification – Find out the key parts of non-text element that help in its identification or determining its purpose or both.
• Non-text element Colour – Find out the colour (hex code) of the identified non-text element.
• Adjacent Colour – Identify the adjacent colours (hex code) of non-text element which will impact its identification.
• Contrast Check – Check if the minimum contrast ratio requirement is met i.e., 3:1 or above between the non-text element and its adjacent colour. Contrast ratio can be found using any contrast checker tool.

* Key point to identify the adjacent colour
Adjacent colour is the colour next to the component. To identify the adjacent colour appropriately, it is critical to first identify the component itself. Adjacent colour may be identified differently based on the non-text element that needs to be tested.

For example, in case of a bordered input field with white internal and external background, the border becomes the key for identifying the input field. Hence, the border encompassing the white internal background helps to identify the component and white colour external background outside this border becomes the adjacent colour of the component.

In another example, a bordered input field has a dark external background and light internal background. The input is majorly identified based on the light internal background as the border gets visually absorbed within the dark external background. Hence, the light internal background becomes the component and dark coloured external background outside the input becomes the adjacent colour.

Basically, when a component is identified its surroundings with best possible contrast become its background. This contrast ensures its identification. Thus, the background provides us with the adjacent colour to find the contrast ratio.

CSS Hex Code vs Picker Hex Code

For accuracy, it is always recommended to take the hex codes of colours from the CSS whenever available. If the colour is not defined through CSS, then we should use the colour picker to find out the colours hex code.

Sometimes authors use the CSS property of ‘opacity’ to lighten the elements. In such cases a contrast tool that also considers the opacity (alpha value) should be used for computing the contrast ratio. Another way but not an ideal way would be to use a colour picker to directly find out the hex code of the colour with reduced opacity.

Conclusion

So far, we have covered the initial understanding and requirements of the success criterion. Other aspects and key areas of this success criterion will follow the same understanding. The same logic will be applied based on the component type. We shall apply the testing methodology on few examples in the upcoming blogs. Also, we shall discuss in more detail about testing graphical objects and user interface components along with their states in these blogs. So, watch out for the next blogs in the series!

For more information on how our accessibility experts test your website and make it accessible, get in touch with our team at sales@barrierbreak.com .

This article by Salim Khan is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.

The post Decoding WCAG 1.4.11 Non-text Contrast appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

In this blog we are trying to answer this question, so let us first start with understanding what VPAT is all about.

What is a VPAT? 

A VPAT (Voluntary Product Accessibility Template) is a document about the accessibility of a product conforming to the Section 508 Standards. It can be considered as an accessibility conformance report for different Information and Communication technology (ICT) products such as applications, software, websites, electronic  products and documentation.

This document states, how a particular product meets or conforms to the Revised 508 Standards for IT accessibility. This document is published by the product vendor itself and it contains the details about each aspect of the Section 508 requirements and where does the product stand with regards to accessibility on each criterion. 

The Information Technology Industry Council (ITI) officially hosts the VPAT template document. ITI offers VPAT in four different editions enabling ICT vendors to create accessibility conformance report on the standards appropriate for their markets. 

• VPAT 2.4Rev EU (February 2020): It is created by keeping in mind the European Union’s “Accessibility requirements suitable for public procurement of ICT products and services in Europe”. 
• VPAT 2.4Rev 508 (February 2020): It is created by keeping in mind the U.S. Federal accessibility standard. 
• VPAT 2.4Rev WCAG (February 2020): It is created by keeping in mind Web Content Accessibility Guidelines (WCAG) 2.1. 
• VPAT 2.4Rev INT (February 2020): This edition incorporates all the above 3 standards/guidelines.

The latest VPAT version is VPAT 2.4 . Check out our blog on What is new in VPAT 2.4?

A VPAT document can consist reports based on different accessibility standards and guidelines as follows: 

• Section 508 (Refresh) 
• WCAG 2.0  
• WCAG 2.1  
• European Accessibility standards EN 301549 

So, make sure you always use the latest version VPAT 2.4 for creation of report. 

Now, back to the actual question about creating a VPAT for your technology product, should you or should you not? 

US Section 508 of the Rehabilitation Act requires government agencies to make ICT accessible to people with disabilities. When you are a ICT company dealing with federal agencies it is mandatory to provide a VPAT. 

Even though it is a vendor’s own free will to provide a VPAT, the simple and wise answer would be, Yes! Yes, you should create a VPAT for your technology product. Since the government agencies opt for a product with VPAT, it might be fruitful for your product to have a VPAT as it places your product into the arena where the Federal procurements are made. Without a VPAT it is quite possible that you are losing money as your product might be as good as other products available in the market. 

As a VPAT vendor, BarrierBreak works with our customers to create an effective and complete VPAT and ACR of the product. Discuss your VPAT Strategy with an Accessibility Expert today. 

Let us now understand what VPAT is not all about.

What VPAT is not all about? 

• Companies might be hesitant in creating a VPAT report for a product as they might think their product will be shown in a bad light. Such is not the case. It is important to know that a VPAT is not a black and white statement about the conformance of a product. In fact, it is a report on the overall level of conformance of the product.  
• VPAT is not about listing all the issues, but it is about giving the overview of the successes and challenges found in the product. 

What are the benefits of creating a VPAT? 

VPAT indicates a product’s compliance with Section 508 standards. It is a crucial document for both companies as well as buyers. 

• Helps to boost the sales and thereby increase the revenue. 
• Helps the company recognize the accessibility gaps and challenges of the product and work towards it. VPAT acts as a measure to make the product accessible for which the employees of the company can work towards a common goal i.e. developing accessible product. Using the VPAT report the company can look into the areas where the product needs improvement in accessibility and work towards the quality of the product constantly. 
• Helps buyers in making an informed decision before procuring an ICT product. VPAT helps the buyers to understand a product’s level of accessibility conformance. Makes the procuring process hassle free as the buyer can get all the accessibility details through the VPAT instead of reading from the product brochure.  
• Helps buyers to compare conformance of similar products and choose a product that best meets accessibility standards and the organization’s functional and legal requirements. In case of a conundrum, buyers can choose for an equally accessible product when a required accessible product is not available. 
• Allows companies to provide documentation and an explanation on the level of conformance of their product. A drafted VPAT becomes a product conformance report which is an example of a company’s accessibility standard. Another benefit of VPAT is that it tells the buyers that the company is aware about the accessibility challenges of the product and is working towards making it equally accessible for all users.  

All in all, VPAT for a product benefits the organization in terms of monetary gains and builds trust and reputation. 

Where do I get my VPAT done? 

A VPAT can be created by an organization’s internal accessibility team. However, it is recommended to hire external party audit teams for the creation of VPAT. Outsourcing the VPAT ensures that the VPAT document is accurate and unbiased. Hiring a VPAT vendor or external accessibility agencies would ensure an accurate and good quality VPAT document. Since VPAT is a legal document for a product, you should aim for accuracy. 

Make sure the VPAT document you create is available in accessible formats such as PDF, Word, HTML, etc. 

In conclusion it is incredibly beneficial to create a VPAT document for your technology products. 

If you are looking out for a VPAT vendor to author VPAT for your product, reach out to us at sales@barrierbreak.com. 

The post What is a VPAT? Should I create a VPAT for my product? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.