0

Our Design System team is looking into making our apps WCAG compliant. Today for required fields, we have an orange asterisk within the input that shows when the field hasn't been completed, and goes away once an entry has been entered in the field. It has worked very well for a long time for our user base.

The orange color we use currently doesn't have enough contrast, and has to be changed. During the investigation on how we could go about that, the team has insisted WCAG mandates the required indicator be at the label level rather than the input, and it has to be red.

Is this accurate?

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Scott H.
  • 129
  • 1
  • 1
  • 6
  • 1
    Sounds like that is from a shallow reading of the examples in [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships). – steveax Apr 29 '20 at 00:55

1 Answers1

2

A few points to address here. (I have assumed this is a web app as you didn't specify, if not you may need to find the equivalents to the techniques I suggest here).

  1. yes the colour contrast on orange is never going to be good enough on a white background so you will need to change that to red. Be careful as red is also not a very high contrast colour so the lowest value for AA is #EB0000 and for AAA is #B30000.

  2. It doesn't have to be red, however this would be expected behaviour and a lot of accessibility is about what the user expects to see to indicate an error. If it was black and had an icon / some way to distinguish that it is an error this would be fine also.

  3. You do need to have an indication that a field is required within the label. This is for screen reader users primarily as the screen reader will not 'see' your icon within your input.

  4. An asterisk is not the best option, that doesn't get read out nicely by a screen reader. You should add some visually hidden text that says 'required' to the label for maximum accessibility without changing your design too much (you could then still use asterisks on the labels if it suits your aesthetic, however if you can make 'required' work that is optimal as it helps people with cognitive disabilities).

  5. With the above being said there is no reason to remove your asterisk in the box, it provides a nice visual clue as to what to fill in. Just make sure that the asterisk cannot be accessed via a screen reader (i.e. alt="" for an image or aria-hidden if it is styled text / inline SVG. You may also want to add role="presentation" for completeness. If it is an SVG you may also want to add tabindex="-1" and focusable="false" as Internet explorer will make some SVGs focusable.)

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64