[Resolved] Add aria-role to footer widgets

[Babi]

According to accessibility audits, the text in GeneratePress footer widgets is not included in an ARIA landmark. As I understand the ARIA guidelines, this would not be the case if the footer widget bar was inside the <footer> tag. But I could alternatively add an ARIA-role attribute to the footer widget bar, as explained here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role

But I don’t know how to do this–I am using a child theme, but I can’t find the file that generates the footer widget bar.

Currently the theme has <div id="footer-widgets" class="site footer-widgets">

What I’m after is something like <div id="footer-widgets" class="site footer-widgets" role="contentinfo">

What’s the best way to do this?

[Fernando]

Hi Babi,

The file is called footer.php. It’s in folder inc/structure. That specific line is in line 166.

See here: https://github.com/tomusborne/generatepress/blob/4895a2e7595bb809075b375201fd735112f41570/inc/structure/footer.php

You can edit the code there if that’s what you’re looking to do.

[Babi]

Well, first of all I can’t believe I missed that file–I didn’t scroll down far enough, I guess.

But now that I’ve copied the file into /child-theme/inc/structure and edited the ‘<div id=”footer-widgets”‘ line, my edits are not shown on the site. Do I misunderstand how the template override works? Is there a better way of accomplishing what I’m after?

Thanks.

[Fernando]

Unfortunately, there’s no filter that we can use for that so this may be the only way to do what you want.

What’s the exact audit report about this ARIA role issue?

Can you provide the link to the site in question? I’ll check if it’s just cached.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Babi]

I have added the URL and some temporary site credentials to the Private information field.

[David]

Hi there,

remove your child theme footer.php and instead use this function:

add_filter( 'generate_parse_attr', function( $attributes, $context ) {
    if ( 'footer-widgets-container' === $context ) {
	$attributes['role'] = "contentinfo";
    }
    return $attributes;
}, 10, 2 );

It will add the role to the container that wraps the widgets.

[Babi]

Brilliant. Thanks very much.

[David]

You’re welcome

[Author]

Posts