Permission: Campaign entities
The Web Content Accessibility Guidelines (WCAG) are standardized recommendations aimed to make web content more accessible. There are three levels to WCAG 2.1 compliancy:
- Minimal compliance (A)
- Acceptable compliance (AA)
- Optimal compliance (AAA)
In this article, we will cover specific features of the Legacy OTT message builder (for GDPR TCF and U.S. Privacy) designed to help your organization achieve compliancy with the WCAG standard.
iframe title (Legacy OTT only)
When an iframe (such as the one used to serve your Legacy OTT message) is given a meaningful title, screen reader users can easily identify the content or purpose of the iframe based on its title.
From the privacy manager builder, click Home in the breadcrumbs and expand the Privacy Manager OTT Settings accordion on the right-hand side.
Use the provided field to input the iframe title.
Dynamic language support for the Legacy OTT message iframe title is available. Click here for more information on how to dynamically surface translations of the iframe title based on your end-user's browser preferences.
Headings
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
From the Legacy OTT builder, select a text component and expand the Settings accordion on the right-hand panel.
Use the provided Heading dropdown menu to select one of the following headings for the text component:
- div
- h1
- h2
- h3
- p
There is no styling associated with any of the headings from the list. The styling for each text component is handled by the Styles accordion for the text element.
Contrast accessibility
When designing your organization's privacy manager it is important to keep in mind that some end-users with visual impairment cannot distinguish color & contrast easily. To an end-user experiencing low contrast everything appears about the same brightness and this makes outlines, borders, edges hard to distinguish. Text can be hard to read if their brightness is close to the background.
The essence of accessible color contrast is given a foreground color and a background color, the contrast between those two must be distinguishable in a wide variety of environments, by individuals with different color perception abilities.
With WCAG, contrast is a measure of the difference in perceived brightness between two colours. The brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g. black on white). For example:
| Text | Ratio |
| Blue text, white background | 8.6:1 |
| White text, blue background | 8.6:1 |
| Green text, white background | 1.4:1 |
| White text, green background | 1.4:1 |
More in-depth information can be found from WebAIM here and from the W3C Web Content Accessibility Guidelines here.
Note: There are tools that can help you measure the contrast ratio between two colours for example WebAIM or Contrast Ratio.
The contrast ratio remains the same even when the text & background colors are swapped.
The WCAG has three criteria that address contrast:
1. Contrast (Minimum)
This requirement reads that presentation of text & images of text has a contrast ratio of at least 4.5:1. There are three exceptions:
- Large text or images of large text have a ratio of at least 3:1
- Incidental test or images that are part of an inactive user interface component, pure decoration, not visible to anyone, or part of a picture that contains significant other visual component have no contrast requirement
- Logo types, text that is part of a logo or brand name has no contrast requirement
2. Contrast (Enhanced)
This is a more stringent requirement that sets a 7:1 contrast for normal text and 4.5:1 for large text. Although higher contrasts are often recommended, following Contrast (minimum) also meets the requirements of common laws & standards.
3. Non-text contrast
The WCAG 2.1 requirements published in June 2018 applies contrast requirements to elements such as user interface components & graphical objects.
The recommendation is that user interface components & graphical objects have a contrast of 3:1. The definition of both is as follows:
| Component | Description |
| 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 |
Note: Contrast requirements are usually between text & background but for non-text objects the minimum contrast ratio of 3:1 is measured against adjacent colors. A non-text element may have different contrast on one side that the other or possess different coloured components that need 3:1 contrast with each other.
This means you may need to measure contrast in more than one place.
Color accessibility
WCAG requirements does not prohibit any specific color or color combination. However WCAG does prohibit using colour alone to present meaningful content or instructions.
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
In the example below a dialog message informs an end-user of their status for consent & subscription. This dialog message would fail the WCAG requirements because the colour is the only indicator of status. An end-user who is colour blind would be unable to easily discern their status:
| For end-user |
| Consent given |
| Subscription |
The next example meets WCAG requirements. An additional column provides an end-user an additional means of confirming their status even if an individual's eyesight is visually colour impaired:
| For end-user | Status |
| Consent given | Yes |
| Subscription | No |
Comments
0 comments