0

I am looking for a way to mark some text as WCAG compliant or somehow otherwise exclude it from automated accessibility tests.

Quite often WCAG requirements state that certain criterion has to be met unless there's a good enough reason otherwise. In my case it is a placeholder text in a search input field. The field has an accessible label below it. The placeholder text is not functional and is added purely for decorative purposes as it is currently the standard in the web design industry to have it. As the text bears no functional purpose - the contrast WCAG requirement doesn't need to be met. Indeed, having the placeholder text with quite low contrast is required - if it is too dark it would appear as if there is already some input in the input field.

However, whenever I run an automatic check it (reasonably so) picks up the placeholder text as a colour contrast problem. That creates a business issue - as getting no warnings at the automatic tests is one of the client's accessibility requirements.

Android apps seem to have a flag like "IMPORTANT_FOR_ACCESSIBILITY_NO ", which would have been sufficient for this issue. Is there some equivalent for JavaScript Web Apps?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Anastasia Pevtsova
  • 55
  • 9

1 Answers1

3

Short answer - no, there is no way to hide placeholder text from accessibility checkers without hiding the whole field (aria-hidden="true") which is not an acceptable route as you can imagine.

The one question you should be asking is why have placeholder text at all if it offers no purpose other than decoration? (can you not make the form more presentable another way)

Either make it high enough contrast (#767676 on white is 4.5:1) and italic (the only time italics are suitable from an accessibility perspective) or get rid of it entirely.

If you have correct associated labels with each input field then placeholder text should only be used to convey extra information such as formatting (e.g. enter date in format DD/MM/YYYY).

Side Note - if you do add extra information to a field via the placeholder, such as how to format a date, then make sure you also add the information to the label and use a 'visually hidden' class to hide the content of that text as screen readers often ignore placeholder text and the information is useful to none sighted users.

Think of it this way:-

John has low contrast perception problems (the point of contrast of 4.5:1).

John encounters your form on a website and can see some really feint text.

John strains his eyes only to realise the text offers no useful information.

You have now added 1 minor annoyance to your site that could reduce sales conversions for clients like John. (I know it is only minor but our goal is to remove barriers to a sale / enquiry at every stage.)

Worse yet, if John cannot make out the text at all he may think it conveys important information and be uncertain as to what he needs to enter, causing him to abandon your form entirely.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • 1
    Thank you! I actually would disagree on using placeholders for such information as the format of the input. As the placeholder text disappears, it limits the experience of users, who decided to check the format after beginning to type, for example, after copy-pasting. – Anastasia Pevtsova Oct 11 '19 at 16:44
  • If you can make it work, definitely add the format information to a label...that's great (best practice is to add it in brackets and give an example of formatting expected). It will also help people with Anxiety Disorders / Cognitive Disorders. I was making the assumption that you were working on an existing form design, which normally means there isn't space for formatting examples. Thanks for pointing out that my answer may be misleading! :-) – GrahamTheDev Oct 12 '19 at 21:34