Twenty Sixteen: Theme includes Screen Reader Text inside Card

[dshanske]

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.

[laurelfulford]

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]

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.