Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SortSite flags WCAG 2.0 F24 failure #1772

Open
Tracked by #5185
36degrees opened this issue Mar 27, 2020 · 7 comments
Open
Tracked by #5185

SortSite flags WCAG 2.0 F24 failure #1772

36degrees opened this issue Mar 27, 2020 · 7 comments
Labels
accessibility

Comments

@36degrees
Copy link
Contributor

36degrees commented Mar 27, 2020 •
edited
Loading

As reported on Slack:

Hello, we’re using an automated tool to check our design system built pages for accessibility problems and we get an error on a text-area:

If you set any of the colors on the body or a elements you must set all of them.
WCAG 2.0 AA F24Section 508 (2017) AA F24

Which is F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa

The automated tool that flagged this is SortSite.
@36degrees
Copy link
Contributor Author

As far as I can see neither the background colour nor the foreground colour are set on textareas, so I’m not sure why it’s complaining…

We should be careful if we decide to change the background / foreground colours of inputs as it's caused problems in the past – see https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites and alphagov/govuk_elements#397.

@36degrees
Copy link
Contributor Author

36degrees commented Mar 27, 2020 •
edited
Loading

The procedure for testing F24 only talks about foreground and background colours, neither of which are set on the textarea component.

The only colour that we do set is the border colour, and technique C25 suggests that this is a totally fine thing to do.

I think this might be a bug in SortSite's implementation of the F24 test?

@36degrees
Copy link
Contributor Author

36degrees commented Mar 27, 2020 •
edited
Loading

I've not yet been able to reproduce this using SortSite's online demo against http://govuk-frontend-review.herokuapp.com/components/textarea/preview.

(I had to run it locally and remove the robots.txt restriction to get it to run)

I've asked the person that originally raised this if they have any additional styles that might be setting the background or foreground colour on the textarea.

It could be that the desktop version behaves differently, or they're using an older version?

@36degrees 36degrees changed the title Powermapper flags WCAG 2.0 F24 failure for the textarea component SortSite flags WCAG 2.0 F24 failure for the textarea component Mar 30, 2020
@36degrees
Copy link
Contributor Author

@antimega has been able to reproduce this in SortSite:

Screenshot 2020-03-30 at 14 39 39

If you set any of the colors on the body or a elements you must set all of them. WCAG 2.1 AA F24 1 pages

In HTML the color attributes are text, bgcolor, link, alink and vlink. In CSS the attributes are color and background-color. Some users have browser defaults set to white text on a black background, so setting one color without setting the others can result in black text on a black background.

The colors used are:
color: rgb(0,0,0); uses browser default background-color: rgb(255,255,255);

http://govuk-frontend-review.herokuapp.com/components/textarea/preview Line 29

Line 29 is the <body> tag, which does set the background colour but not the foreground colour (which is the exact opposite of what the SiteSort error says).

We're also seeing this error flagged on http://govuk-frontend-review.herokuapp.com/components/back-link/preview, so it looks like this might not be related to the textarea component at all.

@36degrees 36degrees changed the title SortSite flags WCAG 2.0 F24 failure for the textarea component SortSite flags WCAG 2.0 F24 failure Apr 6, 2020
@kellylee-gds kellylee-gds removed the awaiting triage Needs triaging by team label Apr 15, 2020
@36degrees 36degrees mentioned this issue Nov 25, 2020
Closed
@nikola-naydenov-hmcts
Copy link

nikola-naydenov-hmcts commented Mar 7, 2024 •
edited
Loading

Hi, we are getting the same type of issues from our accessibility tests. We use pa11y.
Screenshot of a pa11y report showing govuk-link failing to reach a 7:1 contrast ratio with the background colour of white

It's actually complaining that the foreground colour needs to have a contrast of 7:1 with the white background colour.
What would you suggest?

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 7, 2024

Uh oh! @nikola-naydenov-hmcts, the image you shared is missing helpful alt text. Check #1772 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

@querkmachine
Copy link
Member

Hi @nikola-naydenov-hmcts,

The tool there appears to be testing against WCAG Level AAA, and is reporting that blue links don't have sufficient contrast with the white background.

Public services in the UK are expected to comply with Level AA which only requires a contrast ratio of 4.5:1, and GOV.UK frontend is built to match that.

If you are intending to meet Level AAA, you'll need to customise Frontend to match those requirements. Otherwise, you may have to change the settings on the auditing tool to ignore Level AAA failures.

Hopefully that helps!

@romaricpascal romaricpascal mentioned this issue Jul 29, 2024
Open
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility
Projects
GOV.UK Frontend - Known issues flagged by validators or automated testing tools
Status: To Do
Milestone
No milestone
Development

No branches or pull requests
4 participants
@36degrees @querkmachine @kellylee-gds @nikola-naydenov-hmcts