Read more link more accessible

[Travel_girl]

Dear Core Team,

I just noticed, that the default read more link for the excerpt of a post is not accessable for screen readers. By reading a site with a screen reader you can say - read all the links. At the moment the screen reader only say "...", "...", "...". The most themes has "read more" instead of "...", but the user still does not know, what is behind that link.

The twenty themes added a screen reader class, but the most themes don´t have it.
We could add this as required for themes, but this has only an effect for the themes in the directory, not other premium themes.

I hope there is a solution, to make every "Read More" link accessible directly in the core (maybe via aria???)

Thank you so much!

[flixos90]

Maybe we could change the default values for $more_link_text in get_the_content() and for the internal $excerpt_more variable in wp_trim_excerpt().

To make the change more backwards-compatible, we might only apply this new default if the filtered value is still the same like the value before applying filters.

Also, for excerpts, by default there isn't even a link, so I wonder whether we should add that as well.

[flixos90]

@swissspidy Sorry, I didn't want to undo your change :)

[Kau-Boy]

I wrote two possible patches for this enhancement. The main problem is not to break current theme. As the core string is "(more...)", we can't just add a string before or after that, as it would not make sense for a screen reader.

The Twentyfifteen theme uses "Continue reading [title of the post]", which makes perfectly sense. So I would suggest to keep the current string for themes without the $more_link_text defined. This default string is wrapped in a span using the aria-hidden attribute to prevent screen readers reading it.

As new themes must have the CSS class screen-reader-text we should be able to use this class. If a wider backward compatibility is desired, the second patch could be used, which adds the CSS properties inline to the span.

[Kau-Boy]

patch using the CSS class

[Kau-Boy]

patch using inline styles

[flixos90]

improve the excerpt more text as well

[flixos90]

36572.2.diff​ adjusts the code in wp_trim_excerpt() as well, based on the first patch, furthermore making the text a link. For backwards compatibility, it only changes in case the filter is not already used by a theme to address this issue.

[SergeyBiryukov]

36572.2.diff​ seems good, the only thing I'd like to add is a space before <span aria-hidden="true"> in case the .screen-reader-text class is not defined.

[flixos90]

added space before span

[flixos90]

Replying to SergeyBiryukov:

36572.2.diff​ seems good, the only thing I'd like to add is a space before <span aria-hidden="true"> in case the .screen-reader-text class is not defined.

36572.3.diff​ has the space before the span attribute.

[swissspidy]

Having had a quick look:

• I'd use sprintf for the whole link, not just the link text. Makes it a bit easier to read instead of doing sprintf() + string concat.
• Ideally, HTML tags shouldn't be part of a translatable string.

After that, and feedback from the a11y team, +1 from me.

[afercia]

As an alternate approach maybe worth considering aria-label. Differences between the two solutions:

• aria-label: is standard, cleaner, it completely overrides the element's text (i.e. the original text is not read out at all)
• screen-reader-text: is basically a hack, requires styling and should be used only when there's the need to add something to an existing text

Recently, aria-label usage in the admin has greatly increased, see for example the "row action" links in the Posts screen

<a href="(edit link here...)" aria-label="Edit “Hello world!”">Edit</a>

[Kau-Boy]

@afercia That sounds like a great idea and we wouldn't need to add inline CSS. I'll prepare a patch for that.

[Kau-Boy]

I've wrote some patches for the idea from @afercia. I am not quite sure about linking the "hellip" in the excerpt, as the excerpt might be used as plain text which would print the HTML tags. This would not be backward compatible.

I also don't see, how the excerpt would benefit from the aria-label when it's not a link. So I created three patches, for all three variants. I would suggest the "link-only" patch. But maybe someone from the a11y team can has a 2nd opinion on that.

[ramiy]

@Kau-Boy, you need to avoid using HTML tags in translation strings.
I fixed your last patch. See the changes.

[Kau-Boy]

I have read the discussion on the #accessibility channel about this ticket. Any thoughts about which patch to use from the a11y team? I would still tend to the first patch that only changes the "more link" only.

[Kau-Boy]

@ramiy you are right. The translatable string do not need HTML (my previous version needed them). Thanks for the tip!

But your patch had some small syntax errors. I updated my three patch variants with your suggested improvement.

[ocean90]

Moving back to themes component since this is about the default values for the template tags.

[Kau-Boy]

Any thoughts on the patches from one of the a11y team? I still think 36572-link-only.2.diff would be the right way to go. Let's get this ticket finished with WP 4.6 :)

[SergeyBiryukov]

In 37706:

Themes: Make default "read more" link more accessible.

Add an aria-label with the post title to make it available for screen readers.

Props Kau-Boy.
Fixes #36572.

[davidakennedy]

Just wanted to pop in and say that @Kau-Boy asked for testing from the accessibility team on this. I didn't get to test until this morning, but everything looks good.

I tested with two themes that do not alter the default more output and everything worked as expected. I also tested with a handful of default themes that do alter the markup. I saw no issues there either.

Looks good – thanks for all the work!

[Travel_girl]

Awesome! I want to thank all of you, who was working on this ticket! I'm so glad, that WordPress becomes more accessible :-)