Components and patterns that need a guidance change to meet WCAG 2.1

[CharlotteDowns]

What

We need to change our examples or add improved content to our guidance pages in order to resolve issues from the DAC Audit May 2023.

WCAG criteria

• Step-by-step navigation, Step-by-step navigation 'or' headings must be nested under their parent step headings alphagov/govuk-frontend#2794 and usability criteria Step-by-step navigation does not convey all of the information for screen reader users when viewing them as forms alphagov/govuk-design-system#3021
• Password (show/hide), Pages with 2+ password fields must use different programmatic labels for 'show' and 'hide' buttons on those password fields alphagov/govuk-frontend#2795
• Tabs, Tab components should show visible headings for all sections on mobile screen sizes alphagov/govuk-frontend#2797
• Links, Links to Welsh versions of content should be understandable even when out of context alphagov/govuk-frontend-docs#207

Usability criteria

• Error message, Error summary, Error messages should use the same label text as the input when referring to an input alphagov/govuk-frontend#2801
• Pagination, Pagination for smaller numbers of pages does not show current page number alphagov/govuk-frontend#3682
• Character count, Character count is hidden until you approach a character threshold alphagov/govuk-frontend#3689

Further documentation

DAC audit 2023 results spreadsheet.

This work is a continuation from the previous DAC audit cards, #3814, #3592 and #3329.

Why

This work supports our efforts towards the Epic: Update styles, components and patterns to WCAG 2.2 AA alphagov/govuk-frontend#3040.

As we approach the publishing date for WCAG 2.2, we want to ensure our existing govuk-frontend elements are meeting all WCAG 2.1 AA criteria. The only way to pass WCAG 2.2 AA is to also meet all criteria in WCAG 2.1 AA (with one exception, where a criterion is being removed).

We're doing other work to assess where updates are needed to align elements with the 9 new WCAG 2.2 criteria, but we likely don't have capacity to run an internal audit across all of the existing 78 WCAG criteria.

Tasks

Beta Give feedback

1. Step-by-step navigation 'or' headings must be nested under their parent step headings govuk-design-system#2794
   accessibility audit may 2023 +2
2. Step-by-step navigation does not convey all of the information for screen reader users when viewing them as forms govuk-design-system#3021
   accessibility audit may 2023 step by step navigation +3
3. Pages with 2+ password fields must use different programmatic labels for 'show' and 'hide' buttons on those password fields govuk-design-system#2795
   accessibility audit may 2023 +2
4. Tab components should show visible headings for all sections on mobile screen sizes govuk-design-system#2797
   accessibility accessibility-concern audit may 2023 +3
5. Links to Welsh versions of content should be understandable even when out of context govuk-design-system#2796
   accessibility audit may 2023 +2
6. Error messages should use the same label text as the input when referring to an input govuk-design-system#2801
   accessibility audit may 2023 +2
   
7. Pagination for smaller numbers of pages does not show current page number #3682
   accessibility audit may 2023 pagination +3
   

   
8. Character count is hidden until you approach a character threshold #3689
   accessibility audit may 2023 character count +3
   
9. Text inputs with prefixes or suffixes should follow our error message guidance govuk-design-system#2799
   accessibility audit may 2023 +2
10. Error messages: add new guidance on matching error message text to input label govuk-design-system#3097
    accessibility error message guidance +3
    
11. Update to addresses pattern to include more error examples govuk-design-system#3105
    accessibility error message guidance +3
    

[CharlotteDowns]

I think unless anyone can suggest otherwise that this has now been completed 🎉. I'll close the issue and move to Done 🏁