[Resolved] Footer widget accessibility issue

[Guz]

Hi, I’m running axe DevTools, among other tests, to check a site for accessibility issues. The current issue I’m having is that it sees the footer widget asides as too generically named. Here’s the message:

Landmarks should have a unique role or role/label/title (i.e. accessible name) combination
Fix the following:
The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable

Technically, the IDs are unique, eg:
<aside id=”custom_html-7″ class=”widget_text widget inner-padding widget_custom_html”>
but I probably need to add a title, or aria label.

I’m using a child theme, so I’m happy to override things manually if need be. Before I resort to that, is there a better option like a filter?

[David]

Hi there,

there is the dynamic_sidebar_params filter:

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

Tricky one to use in this instance, although if you’re using Classic Editor for widgets then in the above codex comments it provides an example function to hook in custom fields. So you could re-purpose that.

If you’re using Block Editor then it would be possible to build it with GenerateBlocks Pro as that provides an option to add attributes to the HTML.

[Guz]

I am using Classic Editor on this site. That does look tricky though.
Maybe I’d be better off hard coding what I need, the contents don’t update often. If I do that, would it be best to copy /inc/structure/footer.php to the child theme and alter the code? It looks like I’d want to replace this chunk from about line 169:

<?php
						if ( $widgets >= 1 ) {
							generate_do_footer_widget( $widget_width, 1 );
						}

						if ( $widgets >= 2 ) {
							generate_do_footer_widget( $widget_width, 2 );
						}

						if ( $widgets >= 3 ) {
							generate_do_footer_widget( $widget_width, 3 );
						}

						if ( $widgets >= 4 ) {
							generate_do_footer_widget( $widget_width, 4 );
						}

						if ( $widgets >= 5 ) {
							generate_do_footer_widget( $widget_width, 5 );
						}
						?>

[David]

No, those are simply the div columns that GP outputs. The aside HTML is output by WP.
You need to use the dynamic_sidebar_params filter to change them.

Heres an example function i knocked up that will insert the widget name and ID as a title attribute for each widget on the page

function db_add_widget_title_attr($params) {
    // get the widget ID
    $id  = $params[0]['id'];
    // get the widget name
    $name = isset($params[0]['widget_name']) ? $params[0]['widget_name'] : "";
    // create a new aside html string with concatenated name + id title attribute
    $title = '<aside title="' . $name . ' ' . $id . '"';
    // string replace the before widget opening tag
    $params[0]['before_widget'] = str_replace( '<aside' , $title , $params[0]['before_widget'] );
    
    return $params;
}
add_filter('dynamic_sidebar_params', 'db_add_widget_title_attr');

[Guz]

That worked great. One less AXE issue!

[David]

Awesome – glad to hear that!!

[Author]

Posts