Techniques may fail both 1.4.1 Use of Color and 1.3.1 Info and Relationships to convey HTML element names and attributes

[charleshalldesign]

All WCAG 2.2 Techniques documents that refer to HTML elements and their attributes use a convention of rendering the text in a <code> element with applied CSS to style the text differently than non code text.

However, the semantic role of <code> is not conveyed in most scenarios, leaving only the break in text elements to convey the text is different than the surrounding text – but not how.

Further, the style applied to this code text includes:

• A change from the body text color of # 1d1d1d to a blue color of # 003366.
• This difference has a luminance contrast of only 1.3:1 which is too subtle for most to perceive and differentiate.
• A change of font from Noto Sans to Noto Sans Mono.
• This difference is too subtle for most to perceive and differentiate.

This leaves some people the possibility to perceive a visible difference and that information and relationships are being conveyed. While there is no perceivable difference when the presentation is audible.

Example:
The word ‘select’ within the first sentence of the second paragraph of the ‘Description’ section of the H85 Technique.

May fail 1.4.1
Because the change in font only affect some pixels of some characters (in the example, only the bottom left edge of the ‘l’ character has any perceivable change), only color is a perceivable change for the entire word.

May fail 1.3.1
Because there is an attempt to convey semantics in the audible presentation by use of <code> element, but not all instances are preceded or followed by text that conveys this by stating “element” or “attribute”.

Suggestions:

1. to better attempt to audibly convey the code element role, try using the roledescription attribute
2. to better attempt to visibly convey the difference in text, try using a different monospace font and a different color hue that has a sufficient luminance contrast difference with both the background and the body text.