Goal

• Give users whose browser, platform, technical aid or disability (like color-blindness) prevents them from viewing or differentiating between colors
• Make the information accessible by web crawlers.
• Improve the accessibility of content for people with disabilities.

Implementation

In addition to colour, provide an additional mechanism to convey the information provided by the colour. This mechanism, independent of the CSS formatting layer, can be of several types:

• provide semantic markup (strong, em, etc.);
• add text indications (asterisk indicating a mandatory field);
• add hatching, patterns, borders, etc. in maps and

charts.

Control

Checking requires visually comparing two versions of the page: the normal version and a version where the colours are disabled. It is therefore easier to work with two screens. For each page checked:

• Disable colour support via your test toolbar then switch the images to grayscale.
• Check by comparing the two versions whether the version without colours shows any loss of information. This will be the case, for example, in a navigation menu where the current heading is only differentiated by its colour, or even in a map whose areas are simple solid areas of colour without borders or patterns.

Attention: Information may sometimes be independent of the colour in a title attribute, causing a tooltip to appear when hovering over the content. Because access to the tooltip from the keyboard is not currently possible by default in all browsers, this solution must be ruled out.

By Opquast - Read the license

Business application and benefits

The rules should be applied to your projects from the design phase through to post-implementation , and they should be understood by all professionals with web and customer experience (CX) responsibilities: from strategy to operations, marketers to project managers, and editorial to technical staff. The benefits of using this ruleset are numerous, including improving customer satisfaction, web performance, and e-commerce, and expanding your client base, while also decreasing your errors and costs.

The objective of these rules and the Opquast community mission is ‘making the web better’ for your customers and for everyone! Opquast rules cover the key major areas of risk that can negatively affect website users such as privacy, ecodesign, accessibility and security.

Opquast training has already allowed over 11,000 web professionals to have their skills certified. Train your teams or your students, contact us