WCAG compliance between GP Pro with and without blocks

Hi there,

a11y requirements are something we continuously review for improvement, and we’re fortunate to have many users who are helpful in highlighting any issues, and for that reason i am fairly confident that all our products current and legacy achieve the same level of WCAG compliance.

So updating GP to Flexbox and SVG icons or replacing WP Show Posts to GenerateBlocks isn’t going to make a big difference regarding that.

For sure, if you can let us know what the issues are, then we can take a closer look and advise.

At a glance most issues are not theme related.
I have added some notes to what i can see
For reference #1 and #16 have GP related elements:

#1 Elements that behave as buttons….
One of those is the legacy Navigation Search.
The new Navigation Modal search fixes that.
Which can be activated by de-activating the nav search in the Customizer > Layout > Primary nav, and then you should see the new option ( might require a save and refresh )

The other elements are related to the Calendar plugin.

#2 Buttons should include text
Those the Calendar Left and Right icon buttons for the Month selector

#4 Open in new tab
Not sure what the element is but the Theme doesn’t add any links that open in new tabs.

#7 Elements visually appear as titles
Can’t see the elements, but the Calender has some 700 weight fonts, and that checker is propably being a bit overzealous in thinking they should be heading based on that

#15 Menus should be built using the HTML 5 Nav Element
Those are the Menu Widgets in the footer
The new Navigation block would add the <nav> tag for the landmark

#16 Menu Items that have a dropdown
That is a flag against the GP primany navigation.
For improved accessibility there i would recommend the Click option for the drop down menus ( in Customizer > Layout > Primary Navigation )

#28 ARIA issue
thats also the Calendar plugin

#1 – yes
GP and GPP need to be up to date, and the Customizer > General > Structure had to have been set to Flexbox. The Modal option should be available in Customizer > Layout > Primary Navigation. You would need to disable the legacy nav search first for it to appear as an option.

#2 Effectively determine… i can’t say for certain where they ran the report, i did take a quick view across various pages of the site to see the consistency of header, footer and theme parts. Then reviewed the reported against the home page by searching the sites source code for anything that cropped up in the report.

#4 Yeah the report itself had a lot of redacted content so i only commented on the areas where i could see at least some of the HTML.

#15 If its a classic Menu Widget then it has the widget_nav_menu_args filter hook:

https://developer.wordpress.org/reference/hooks/widget_nav_menu_args/

And you can change its element tag to a NAV using its container arg in a PHP snippet like so:

add_filter('widget_nav_menu_args', function($args){
    $args['container'] = 'nav';
    return $args;
});

#16 See my reply here:
https://generatepress.com/forums/topic/missing-atribut-aria-expand-at-primary-menu/#post-2618316
And further down the same topic:
https://generatepress.com/forums/topic/missing-atribut-aria-expand-at-primary-menu/#post-2619358

The PHP Snippet provides the code to add the necessary aria-expanded attribute
And Javascript will toggle the attribute value on hover.

Reply here 🙂

Hi Drew,

1. The skip link.
The redacted “Sucessful Element” in the screenshot, i assume is the Skip Link thats hooked in just after the Body open tag by default on all GP Templates.
I am not sure why they are listing the Modal Open button as a failed element ? that i do not understand.

For 2. and 3. could you share a link to the site again ?

Ok:

#12 That requirement is for the: Skip to Content link,
Which GP adds like so:

<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>

And I can confirm is on the site.

But it’s showing a Failed Element that is the Search Modal trigger. So I thinks thats a false positive of the report.

#16 Not sure if that is a new provision, but previously I provided the snippet to add, the aria-expanded attribute. You can update that to the below to include the aria-haspopup attribute.

function add_aria_expanded_attribute( $atts, $item, $args, $depth ) {
    // Check if the current menu item has children
    if ( in_array( 'menu-item-has-children', $item->classes ) ) {
        // Add the aria-expanded=false attr
        $atts['aria-expanded'] = 'false';
        $atts['aria-haspopup'] = 'true';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_aria_expanded_attribute', 10, 4 );

#17 the current snippet from above, is working as I can see the aria-expanded attribute in the sites HTML.

You’re welcome, and thanks for the info!