[Support request] Excessive screen reader previous post navigation info

[Marc]

Hey there, this is going to sound like a weird question but I hope what I’m trying to explain makes sense.

As mentioned in a previous post, I am completely blind. This means that I rely on Apple’s screen reading software Voiceover to navigate through apps, the internet and pretty much everything on my computer. Before continuing, I want to commend Tom and everyone involved with this theme for ensuring it is fully accessible. Even when elements haven’t been (the banner image at the top for example,) support here has been great and provided code to ensure an alt description could be added. It really goes a long way to helping those of us who navigate the internet or build using WordPress so thank you.

My issue today is almost the opposite thing though. Looking through my blog entries, I found that an attempt for accessibility almost gives too much information. Reaching the post navigation before the comments section, I find there is a lot more info than needed. This won’t impact sighted users but it reads the following when scrolling through the entire section with arrow keys:

“Entry meta group
Single post navigation
post navigation
previous group
(title of/link to previous entry)
end of previous group
end of single post navigation
end of entry meta”

I get that this is labelled for accessibility purposes but it seems like overkill just to get to one link. I can navigate to links specifically with my screen reading software, but all of the extra information in this case seems unnecessary and confusing to a casual blind user navigating through all elements with the arrow keys. I’ll fully admit however that I don’t know if it’s a verbosity issue with Apple. It just seems like the labelling of other theme elements is a lot less wordy and intrusive.

So extremely long story short, I was wondering if there’s a simple way I could reduce this amount of info on my site. If not, would there be any way you could review this for the next theme update? I realize that something can’t be changed for one person, but I think it’s at least worth evaluating perhaps.

An example of this behaviour can be found at https://www.marcwithamouth.com/storyteller-sunday-history/

Thanks in advance for reading my long message and ditto for any reply.

[Tom]

Hi Marc,

First off, I really appreciate any and all feedback here. Making sure things are accessible for everyone is very important to me, so your feedback is greatly appreciated.

I’m seeing the issue in the HTML. It’s happening because:

1. There’s a footer HTML element that requires an aria-label: Entry meta group
2. There’s a nav HTML element that requires an aria-label: Single post group
3. A screen reader text element: Post navigation
4. Previous group could be the title attribute on the link
5. Then the link itself

Way too much. What would be ideal for you? I feel like we can definitely remove the screen reader text and the title attribute, but would that be enough?

Thanks again!

[Marc]

Honestly, I find the aria labels to be the most confusing things because they don’t really give any relevant feedback for site navigation if that makes sense. The screen reader post navigation element doesn’t bother me as much because it contains info relevant to that section at least. I agree with you that the “Previous group” title attribute could definitely go though. (I am assuming that would apply to an older post that has a link for the next post too.

I hope this all makes sense the way I’m explaining it. I also don’t know what you can actually do about the aria labels, I’m just talking from my own experience and think that confusion would translate to other blind people who casually use the internet.

Thank you very much for being so receptive and open to this. A lot of people don’t care anywhere near as much about accessibility. All of your work is very much appreciated (and I know I’m not the only person who has recommended GeneratePress to blind WordPress users.)

[Tom]

The aria-label attributes are required on HTML5 elements like nav and footer.

I’ll play with this to see if I can remove most of them while making the aria-label attributes more clear.

For now you can do the following to prevent it from becoming too annoying:

add_filter( 'generate_parse_attr', function( $attributes, $context ) {
    if ( 'post-navigation' === $context || 'footer-entry-meta' === $context ) {
       unset( $attributes['aria-label'] );
    }

    return $attributes;
}, 15, 2 );

You should be able to remove it in 3.2.0 as we’ll figure out how to improve it while keeping the aria-label attributes.

Thanks again for your help here – will do our best to make it better 🙂

[Author]

Posts