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.

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

Accessibility improvements #13

Closed
carolinan opened this issue Oct 13, 2023 · 2 comments
Closed

Accessibility improvements #13

carolinan opened this issue Oct 13, 2023 · 2 comments

Comments

@carolinan
Copy link

Hi team! @francgrasso

@afercia @aristath, @SergeyBiryukov and I wanted to learn more about the theme; Both because I am curious about a block theme that has 30k+ installs :), but also to see if we could contribute in any way. We tested the theme during a Yoast hackaton on Thursday.

Overall we liked the theme and its quality, nice work.

We would like to propose some accessibility improvements for issues that we noticed.
We did not do a full accessibility test and recommend you to continue testing all parts of the theme like the color variations
and advanced patterns.

Colors

  • The primary color passes the WCAG contrast checks. But the secondary color has too low contrast against the white background color. It is 2.79:1 and needs to be at least 3 (large text over 18pt/px) or 4.5 (normal text).

We understand that changing the colors at this time, after release, may be unexpected to users. But it would benefit all users and their website visitors to have accessible colors; at least for the default variation.

HTML markup

  • We found duplicate H1 heading on the home page and 404. Our recommendation would be to not use H1 for the site title in this case.
  • In the footers the headings over the navigation blocks needs to be H2, otherwise, they are listed as subheadings to the post/page title, which can be confusing.

The WooCommerce templates in the theme are missing <header> <main> and <footer>.

  • The missing <main> means that there is also no skip link (Skip to content). The skip link is added automatically for block themes, but only if there is a <main> element.
  • In these templates, the template part blocks for the header and footer are missing the "tagName" attribute.

Icons are announced by screen readers

  • The arrow in the 'READ MORE →' text in blog-page.php is a unicode character which will be announced by screen readers, and it needs to be hidden with for example aria-hidden. Now it is being read as "Read more right arrow".

Block pattern descriptions

  • All patterns are missing descriptions for screen reader users.
    You can use the Description parameter when registering the patterns to add a visually hidden text describing briefly what the pattern does, which blocks are inside it, its colors, etc.
@francgrasso
Copy link
Member

All suggestions are right and very interesting. I start working on it. Thank you

@francgrasso
Copy link
Member

I managed all the issues in this topic. The only regret is that the secondary color (default color style) has a score of 3.01.
Sorry I cannot achieve nothing better with this color palette... I will take this issue as a big lesson for the future, to pay more attention to accessibility. Thanks a lot for your valuable test and help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants