-1

Trying to make my app WCAG complaint. There are a few places where text is displayed on the screen but not meant to be read by users. One is when an offer is not eligible, we show the offer but lower the contrast to denote the offer can not be made. The other is we show case numbers at the bottom of the app. These are captured by users in screen shots when they report bugs, and used by support to track the issue, but not meant to be read by users.

Is there any way to denote that these fields are not meant to be read by the user and therefore do not need to meet WCAG contrast ratios?

Lumpy
  • 3,632
  • 4
  • 34
  • 58
  • I understand that my app meets this criteria even if the text is not tagged as such, just wondering if there is a way to denote this so the automated checkers don't complain. Trying to build this into an automated testing solution. – Lumpy Nov 06 '15 at 16:13
  • Your assertion that this text does not need to be read is false. – unobf Nov 06 '15 at 21:05

1 Answers1

1

Let me rephrase your question...

How to markup a purely decorative text in order to make it compliant with WCAG?

WCAG does not have the notion of purely decorative text, as it might be subject to abuse.

At less, you have to consider using aria-hidden in order for the text not to be read by screen readers.

The difficult part of that is : how might a visitor understand that a text is not intended to be read? Is the assumption that a non readable text, with poor contrast, is something you have to ignore is really helping readability? No.

That being said, if you just want to fool automated tools, you have many possibilities like playing with transparency, replacing HTML portion with img canvas after load, etc. But this won't help accessibility, nor readability.

You're trying to convey one information ("do not read that") using only color difference, which is clearly targeted by the G182 technique : Ensuring that additional visual cues are available when text color differences are used to convey information.

It is a better solution to find a matching color to preserve the minimum contrast ratio for a given color (easy way : try black or white).

Adam
  • 17,838
  • 32
  • 54
  • Thanks for the detailed answer, I added an accessibility button to allow users to show the text in higher contrast. – Lumpy Nov 10 '15 at 19:43