[Support request] Need to remove link title and image title from site logo.

[Alicia]

I’ve removed the image title and edited alt description in media library, however, title is still showing up and my edits are not showing up. And I have no idea how to remove the link title.

We really need to have them removed because right now it will read the website name three times for screen readers. Is there a filter to remove?

BTW, we are competing in the AIR Rally. It’s a competition whereby we create the most accessible website as possible for a non profit or creative. We compete against 40+ teams. We are using GeneratePress for its speed and default accessibility. We are hell bent on winning.

It could be a big boon for you guys if we win with your theme.

You can check it out here: https://www.air-rallies.org/

We are the Accessipuu Squad!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Alicia]

Hi Leo!

I managed to remove title attribute from link with this funtion:

/********** Remove titles and link titles from logo **********/
add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="" rel="home">
				<img %3$s />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

I just removed what was in the title attribute.

[Leo]

Glad to hear 🙂

[Alicia]

I still need to remove the image title and get the media library alt description to show up. There, I’m stuck.

[Leo]

Can you try this first to remove the title attribute first?

add_filter( 'generate_logo_attributes', function( $atts ) {
    unset( $atts['title'] );

    return $atts;
} );

[Leo]

As for the alt tag, this should help:
https://docs.generatepress.com/article/generate_logo_title/

[Alicia]

Leo!!! This absolutely worked. All three code snippets. Do exactly what I need.

Here’s what I got:

/********** Edit Logo Alt Description **********/
add_filter( 'generate_logo_title', 'tu_change_logo_alt' );
function tu_change_logo_alt() {
    return 'InnerScapes Art: Home';
}

/********** Remove image titles from logo **********/
add_filter( 'generate_logo_attributes', function( $atts ) {
    unset( $atts['title'] );

    return $atts;
} );

/********** Remove link titles from logo **********/
add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="" rel="home">
				<img %3$s />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

If there is a more elegant way to remove link title, I’d like to do that instead of just pasting code I found and removing Link title variable…

If it’s possible to incorporate this into the theme out of the box or at least add an accessibility section to the documentation and add it? There really shouldn’t be any scenario where all those title tags are needed. And the logo alt needs to have “home” or “home page” appended to it.

We are doing some amazing Accessibility stuff with your theme as a base. Let me know if you’d like to know what we’ve done and how you can add it to your next theme upgrade. I love this theme and it’s the only one I refer. I’d love to be able to say it’s one of the most accessible themes hands down!

[Leo]

If there is a more elegant way to remove link title, I’d like to do that instead of just pasting code I found and removing Link title variable…

The snippets you are using is actually the best way possible 🙂

If it’s possible to incorporate this into the theme out of the box or at least add an accessibility section to the documentation and add it?

I will get these snippets added to our doc page 🙂

I’m not an expert on the Accessibility stuff but will definitely mention your suggestions to our team.

Thanks very much for sharing!

[Tom]

We’re always happy to listen to anything we can do to make the theme more accessible – please feel free to share as much as you’d like 🙂

Just to be clear, what you’ve done here is:

– Change the alt of the logo
– Remove any and all title attributes

Is that correct?

Thanks!

[Alicia]

Yes!! And we included your willingness to help in our Submission report. You guys ROCK!!!

Here is the reason:

When a screen reader arrives on the page, the Logo/Site title is the first thing read. If there is a link title, an image title and Alt, all three get read. Yikes!!

In situations like this: The alt description wins out! And if you need default it should say: “[site title]: home”

Another challenge was the aria-label=”Main Menu”. In your next update, it would be nice to have that added to Primary menu <nav>. In order to do that currently, I’d have to create the menu from scratch.

Thank you so much for being so conscientious about this. It’s so important to make the web accessible to all, especially in these times!

[Tom]

Awesome – thank you! Will improve all of this in 3.1.0.

You can add the aria-label to the navigation right now:

add_filter( 'generate_after_element_class_attribute', function( $attributes, $context ) {
    if ( 'navigation' === $context ) {
        $attributes .= ' aria-label="Main Menu"';
    }

    return $attributes;
}, 20, 2 );

Really appreciate the feedback!

[Alicia]

Thank you for this!

I’ll talk with the team and see if we can gather together any more info. I love this theme and I’d love to help you get as accessible as possible!

[Author]

Posts