Accessibility improvements

[carolinan]

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]

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

[francgrasso]

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.