Open Input Accessibility Issues

General Help
, ,
1

Hi All

We’re trying to create a AA accessible course but we’re having two issues with the Open Input Component.

  1. In safari on Mac the placeholder text colour seems to be set to #A9A9A9 which is failing contrast checking. Strangely in Chrome we’re getting #757575 when we screenshot it but #454545 in the inspector panel using dev tools.

  2. The Open input text doesn’t seem to use the device size settings in: Theme > Course > Body Text Appearance > Font Family & Font Size. It appears to always use the desktop setting no matter what device size?

Not sure if I’m doing anything to affect this or if it’s a bug.

Any help would be much appreciated.

1 Like
2

With regards to point 1, it’s actually the browser defining the colour of the placeholder text - which is why it’s different in Safari.

In Chrome the #454545 is the input text colour i.e. the colour of the text you actually type into it. #757575 is the placeholder text colour.

I have a feeling that when the open input component was added to Evolve, browsers didn’t actually support styling placeholder text - and it looks like it was just an oversight that it never got added to Evolve once support for it made it into most major browsers.

I will get this changed for you.

3 Likes
3

Thanks for your reply! Makes a lot of sense.

Also thanks looking into getting it changed. :slight_smile:

4

@nath no problem at all, thanks for raising it!

It looks like the placeholder style used by Firefox would fail the contrast check too.

FYI rather than set it to #454545 I’ve decided to use the colour that Chrome uses, since that:

  • passes the Level AA contrast check and
  • means there’s a difference between the ‘placeholder’ text colour and the ‘user input’ text colour, which I think is worth having
1 Like