Meet WCAG AA level accessibility requirements

[luminuu]

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

Some resources:

• Checklist by A11Y Project: https://www.a11yproject.com/checklist/
• WebAIM: https://webaim.org/standards/wcag/checklist
• Theme Handbook: https://make.wordpress.org/themes/handbook/review/accessibility/required/

For reference, here's the same discussion for Twenty Twenty-Two: WordPress/twentytwentytwo#82

[carolinan]

Result of the accessibility-ready review

Requirements

Keyboard Navigation -pass, (Besides known issues reported for the navigation block in the Gutenberg GitHub repository)
Controls -pass
Skip Links -pass except for the portfolio home template
Forms -pass.

Headings
H1 is missing on the default home template
H1 is missing on the writer home template
H1 is missing from the portfolio home template

The content of the portfolio page pattern is difficult to read because it has no headings. (This is the portfolio pattern that shows up when you create a new single page)

ARIA Landmark Roles
The sidebar should have its own landmark (aside)
Single with sidebar: the main is in the wrong place, it does not wrap the featured image, title or post meta.
Main is missing from the portfolio home template

Content Links
Some links in the sidebar does not change visually when you :hover over them
(Perhaps the underline could be removed on hover).

Repetitive Link Text -pass

Contrasts
Needs more careful testing
Milky: The default link color has too low contrast against the background

Not tested yet:
Images
Media
Screen Reader Text
Not Allowed

[kafleg]

Contrast

Onyx Style - Very low contrast between text and background colors found in the home page testimonial section.

[carolinan]

Continued:

Images -Pass. For the lightbox PR to be merged, the lightbox accessibility issues in core/Gutenberg must first be fixed.
Media -pass
Screen Reader Text -pass
Not Allowed -pass

[carolinan]

If the linked post date block is replaced with a "read more", the "repetitive link text" requirement needs to be considered and a new review should be done.

[kafleg]

Contrast error found in Milky style.

[kafleg]

H1 missing on the About page pattern.

[luminuu]

@kafleg Milky has been renamed to Fossil, are you checking on the latest version of trunk? The colors have been updated and are not causing contrast issues anymore.

[kafleg]

You are right. I was checking theme that is bundled in Beta 3.

Now, checking trunk version.

[kafleg]

Onyx Style - Found 1 1 Contrast Errors. 1 X Very low contrast

It is appearing here, It is blog home template.