Make WordPress Core

Opened 5 years ago

Last modified 2 months ago

#46233 new defect (bug)

Twenty Sixteen: Theme includes Screen Reader Text inside Card

Reported by: dshanske's profile dshanske Owned by:
Milestone: Awaiting Review Priority: low
Severity: trivial Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:


The function twentysixteen_entry_meta includes the screen reader text inside the span property using the author mf class. That means when parsed it would say, 'Author David Shanske' The screen reader text should be inside the byline span but outside the author vcard span.

Attachments (1)

46233.patch (1.8 KB) - added by sabernhardt 3 years ago.

Download all attachments as: .zip

Change History (5)

#1 @laurelfulford
5 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Twenty Sixteen Theme includes Screen Reader Text inside Card to Twenty Sixteen: Theme includes Screen Reader Text inside Card

#2 @laurelfulford
5 years ago

  • Keywords reporter-feedback added

Thanks for this report, @dshanske!

I see what you mean. Unfortunately, this could be tricky to change without causing other issues -- moving <span class="screen-reader-text">Author </span> outside of the .author span would also place the author image between that string and the actual author name, making it less meaningful to screen readers.

I'm far from an expert on Microformats, but in this case, would adding role to that screen-reader-text be "correct"? Or am I totally reaching? :)

3 years ago

#3 @sabernhardt
3 years ago

  • Keywords has-patch added

With a (default) empty alt attribute, screen readers would ignore the avatar. However, the image could be moved before "Author" as well.

<span class="byline">
	<img alt="" src="..." class="avatar avatar-49 photo" loading="lazy" width="49" height="49">
	<span class="screen-reader-text">Author </span>
	<span class="author vcard">
		<a class="url fn n" href="http://localhost/svn/src/author/test/">test</a>

Twenty Fifteen has a similar nesting, too.

#4 @karmatosed
2 months ago

  • Keywords reporter-feedback removed
Note: See TracTickets for help on using tickets.