UKHPI - 1.4.11: Non-text Contrast

bogdanadrianmarc commented 1 month ago

See https://docs.google.com/spreadsheets/d/1YS3N5ps9pJGFOxBDi9C2DwA37WQPIVax/edit?gid=1215429860#gid=1215429860&range=12:12

tomguilbert commented 4 weeks ago

@bogdanadrianmarc I'm going to need some screenshots/guidance on what you have done here so I can tell if you have met the requirement.

bogdanadrianmarc commented 4 weeks ago

@bogdanadrianmarc I'm going to need some screenshots/guidance on what you have done here so I can tell if you have met the requirement.

Sure, no worries, here's a screenshot from before:

and after:

I've increased the contrast for the search input border, map selection on the right and modal text and buttons.

tomguilbert commented 4 weeks ago

@bogdanadrianmarc - that all looks really great except the 'confirm' button, which still has insufficient contrast I think (it is only 1.59:1)

bogdanadrianmarc commented 4 weeks ago

@bogdanadrianmarc - that all looks really great except the 'confirm' button, which still has insufficient contrast I think (it is only 1.59:1)

The button is normally disabled, unless a correct location is entered:

I've tried increasing the contrast but in my opinion it looks too much like it's not actually disabled and can be clicked:

@jonrandahl What do you think about this one?

jonrandahl commented 4 weeks ago

@tomguilbert I've done a little research this morning and will action this today.[^1]

https://advancedbytez.com/make-disabled-buttons-accessible/

According to the Web Content Accessibility Guidelines (WCAG), disabled buttons don't need to meet contrast requirements. However, it's recommended to make disabled buttons have a different style from enabled buttons, even for color-blind users. Here are some tips for making disabled buttons more accessible:

Use of visual indicators

Use of the CSS property cursor: not-allowed for visual users with cognitive impairments. Using this cursor property on a disabled button will provide an additional visual indicator that the button is inactive.

Use color

Use saturated colors for primary buttons to create contrast with disabled buttons. You can also try displaying disabled buttons at about 40% opacity of their enabled state.

Use text

Make sure the text within the button is always visible, even when disabled. You can also use helpful text to indicate that the button is disabled, such as "disabled" or "not a user error".

Use other techniques

You can also try using the aria-disabled attribute to signal to assistive technology that a button is disabled. You can also add error messages and feedback to help users understand what's going on.

[^1]: This would be a good piece of information for other projects as well. TBD

tomguilbert commented 4 weeks ago

@jonrandahl thanks for clarifying that diabled buttons don't need to meet contrast WCAG guidelines (I didn't know that based on Gemma's s/s or Bogdan's response above). In that case, given that we don't have huge budget for this I think we should leave as is unless there is something super easy and simple you can add Jon from your researches?

jonrandahl commented 4 weeks ago

On inspection @tomguilbert we've already implemented the visual indication via cursor, adding the opacity and aria-disabled will be relatively simple, outside of finding where to apply the adjustments, and I will package those up in my latest changes coming!

Edit: It will end up looking like this visually: CleanShot 2024-08-22 at 10 34 56

tomguilbert commented 4 weeks ago

thanks @jonrandahl

tomguilbert commented 3 weeks ago

@jonrandahl as @DanielCouzens is going to pick up some UKHPI tickets whilst @bogdanadrianmarc is on leave I've assigned this to you, as I think you are dealing with it - please correct if wrong!

jonrandahl commented 3 weeks ago

@tomguilbert for reference, and will update when on dev instance:

CleanShot 2024-08-28 at 08 50 38