Make WordPress Core

Opened 4 years ago

Last modified 19 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: reporter-feedback has-patch
Focuses: Cc:

Description

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 19 months ago.

Download all attachments as: .zip

Change History (4)

#1 @laurelfulford
4 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
4 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? :)

@sabernhardt
19 months ago

#3 @sabernhardt
19 months 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>
	</span>
</span>

Twenty Fifteen has a similar nesting, too.

Note: See TracTickets for help on using tickets.