Make sure that GOV.UK Frontend meets WCAG 2.1

[timpaul]

What

Make sure that the Design System, and everything in it meets at least level AA of the WCAG 2.1 guidelines.

Why

All services that went live after 23 September 2018 must meet WCAG2.1 AA by 23 September 2019. Older services must meet the same standard by 23 September 2020. We need to support service teams by ensuring that everything in the GOV.UK Design System meets this standard.

1. Address known accessibility issues

Must

• Run aXe on the GOV.UK Design System
• Investigate colour contrast issues with the focus state
• Investigate colour contrast issues with hint text
• Investigate colour contrast issues within the footer component
• Investigate colour contrast issues with the header component
• Investigate colour contrast issues within the panel component
• Link hover state does not meet contrast requirements on font sizes below 18px
• Tab contrast
• Publish guidance on meeting colour contrast
• Make it easy to set autocomplete attributes on form inputs
• Check that the Design System works with adaptable text
• Update the Design System page templates

Should

Better align custom tab logic with tab component
Publish accessibility principles, criteria and guidance
Investigate potential issues with conditional reveals (#979, #935, #989)

Could

Content below buttons on start pages
Investigate whether we should specify 'aria-invalid' on form inputs that have errors
Investigate adding iOS dynamic type support

2. Modify the components and test

• Change review app to include code from legacy repos
• Update links (and things that look like links) to use the new focus style #1302
• Update radios and checkboxes to use the new focus state #1304
• Update form inputs to use the new focus state #1303
• Update buttons to use the new styles and the new focus state #1305
• Update tabs to use the new styles and the new focus state #1306
• Update accordion to use the new styles and the new focus state #1307
• Update footer to use the new focus states #1320
• Test with assistive technologies
• Decide on how the mixins should change for new focus styles

3. External audit of the Design System

• Update DAC brief before audit
• Send brief to potential audit suppliers
• Develop the test pages for the accessibility audit
• Arrange a call with DAC to check requirements
• Build an example page of smaller checkboxes and radio buttons for the accessibility audit
• Build an example page of secondary and destructive buttons for the accessibility audit
• Run the accessibility audit
• Analyse results of the accessibility audit
• Prioritise any remedial work for Q1

4. Prepare for publishing

See this epic - Release Frontend 3.0

Notes

See 30th April team catch up notes

[alex-page]

Oh yeah!!! We should collaborate ASAP. The whole reason our Design System exists is to meet WCAG 2.1. There is no benefit working seperately on these problems.

[alex-page]

Hey friends I noticed you have a lot of problems with meeting colour contrast and you are using sass.

Feel free to use our open source package sass a11ycolor to find the closest accessible color.

We use it to generate our custom colour schemes, you can see it working by going to our customise page here and entering in the same colour value. It makes some of the reds darker to make sure the contrast passes.

We use it in other ways like generating muted colours, we mix the background and foreground colours together then get the closest accessible colour of the mixed colour on the background. Have a look here:
https://github.com/govau/design-system-components/blob/da652cbab7ee3417812676314d1e1e5418f89059/packages/core/src/sass/_globals.scss#L807-L819

[NickColley]

I have raised all the issues for the Design System website which brings us to 34 total GitHub issues which matches the DAC issue numbers that go to 33 (plus Ollie's in person issue).

https://github.com/issues?q=label%3A%22audit%3A+may-2019%22+user%3Aalphagov