Meet WCAG AA level accessibility requirements

[jffng]

Description

2022 should be WCAG AA level compliant. What is needed to achieve this? Let's use this issue to discuss and track.

[TeBenachi]

Providing multiple ways to locate a page within a website. #83

[TeBenachi]

Below is a list of criteria for meeting WCAG 2.1 AA. There isn't many! It is trimmed down to suit the FSE themes. I did not include most of the criteria because the majority of the criteria are handled by Gutenberg or consideration for content creators.

Please note this checklist is based on WebAIM's WCAG Checklist. I’m still learning web accessibility and FSE so please feel free to add, remove or edit.

Guideline 1.3

• 1.3.6 Identify purpose: <header> <main> <footer> are being used.

Guideline 1.4

• 1.4.3 Color contrast: Text and background color have a contrast of 4.5:1 or higher.
• 1.4.11 Non-text contrast: Interface components (buttons, form controls, focus indicators) have a contrast ratio of 3:1 or higher.

Guideline 2.4

• 2.4.1 Skip link: <main> satisfy this criteria #30336
• 2.4.5 Multiple ways: #83
• 2.4.7 Focus visible: Current keyboard focus is visually apparent

[joedolson]

Will the theme also target meeting the existing guidelines for accessibility-ready themes? https://make.wordpress.org/themes/handbook/review/accessibility/required/

[kjellr]

@joedolson Yes. Though at a glance, I think a major chunk of that those requirements will be Gutenberg's responsibility this time around.

[TeBenachi]

I checked briefly and everything looks great, except the focus hover styles on the buttons.
Waiting on this ticket 🤞

The following theme requirements also look good on the default template and the block patterns.

Headings:

• No H1 element present on the page.
• Multiple H1 headings on a single page.
• Headings do not skip levels when descending.

ARIA Landmark Roles:

• <header> <main> <footer> are present.
• Verify that all content is contained inside at least one aria landmark.
• Verify that aria landmarks are appropriately chosen

Content Links:

• links within the content are underlined.

Repetitive Link Text:

• Does not apply - No ‘read more’ link is used.

Contrasts:

• Automated test. (Tested using WAVE, axe, and ANDI)
• Manually review.

Media

• Video does not start automatically

This theme is so beautiful ✨ Great job!!

[kjellr]

I'm going to mark this one as complete for now — as far as we're aware the theme conforms at this point. If any further a11y issues arise, we can address them as individual issues. Thank you!