Standard Themes: Logic for translated strings in connection with Screen Reader text can be improved

[Presskopp]

There are 2 strings including:

screen-reader-text"> "%s"

1)

Continue reading<span class="screen-reader-text"> "%s"</span>

&

2)

Edit<span class="screen-reader-text"> "%s"</span>

In german (as an example, I assume this happens too in other languages) the syntax for 1) needs to be reversed like that:

<span class="screen-reader-text">"%s"</span> weiterlesen

2) gets:

<span class="screen-reader-text">&#8222;%s&#8220;</span> bearbeiten

which is correct for Screen Reader Users, but it should rather be capitalized in both cases so the button text doesn't start lowercase, see screenshot.

​https://translate.wordpress.org/projects/wp-themes/twentyseventeen/de/default?filters%5Bterm%5D=screen-reader-text%22%3E+%22%25s%22

We could now capitalize the strings in translation, but there must be a better solution!?

PS:
Yes, the quotation marks in our translation also needs a little attention, but that's not part of the ticket ;-)

[joyously]

Would this fix it?

the_content( sprintf(
  /* translators: %s: Name of current post for Continue link, only visible to screen readers, with space before and after */
  esc_html__( 'Continue reading%s', 'twentyseventeen' ),
    '<span class="screen-reader-text"> "' . wp_strip_all_tags( get_the_title() ) . '" </span>'
) );

and

edit_post_link(
  sprintf(
  /* translators: %s: Name of current post for edit link, only visible to screen readers, with space before and after */
    esc_html__( 'Edit%s', 'twentyseventeen' ),
      '<span class="screen-reader-text"> "' . wp_strip_all_tags( get_the_title() ) . '" </span>'
    ),
  ' <span class="edit-link">',
  '</span>'
);

It doesn't address the capitalization problem though.

[Presskopp]

..turns out this also happens in Twenty Sixteen and Twenty Nineteen.

see:
​https://translate.wordpress.org/projects/wp-themes/twentysixteen/de/default/?filters%5Bterm%5D=%22screen-reader-text%22%3E+%22%25s%22

​https://translate.wordpress.org/projects/wp-themes/twentynineteen/de/default/?filters%5Bterm%5D=%22screen-reader-text%22%3E+%22%25s%22

[mrfoxtalbot]

I can confirm that this is still happening. It came up in ​a support thread.

[poena]

@joedolson Hi! This ticket brings up theme "continue reading" links and "edit post" links that combine a text with a visually hidden post title.

In the themes that are mentioned in the ticket, the post title is inside double quotes (").
Example:

the_content(
	sprintf(
	/* translators: %s: Post title. Only visible to screen readers. */
	__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
	get_the_title()
	)
);

Is there any accessibility benefit to placing the post title within quotes?

The themes are Twenty Sixteen, Twenty Seventeen, and Twenty Nineteen, so it is not consistent across all default themes.
For example Twenty Fifteen uses the following code:

the_content(
	sprintf(
		/* translators: %s: Post title. Only visible to screen readers. */
		__( 'Continue reading %s', 'twentyfifteen' ),
		the_title( '<span class="screen-reader-text">', '</span>', false )
	)
);

[joedolson]

No, there's no advantage to wrapping the title in quotation punctuation in the screen reader text. Some screen readers might read them out or interpret them as a pause, but that's heavily dependent on screen reader configuration and voice synthesizer. I wouldn't consider it an advantage in any case; just a difference. If a pause is desired, then more consistent approach would be to use a colon, e.g.:

the_content(
	sprintf(
	/* translators: %s: Post title. Only visible to screen readers. */
	__( 'Continue reading<span class="screen-reader-text">: %s</span>', 'twentyseventeen' ),
	get_the_title()
	)
);

[poena]

@Presskopp For these text strings where the order needs to be changed during translation, it is difficult for someone who is not a native German speaker to propose a new markup.

I wonder if it would be an improvement if there were two separate texts. If the visible link text was "Edit", but there was an aria label with the full context: "Edit %post title".

[Presskopp]

@poena

Either the texts should be both exactly the same or they needed to be separated, yes. As we can see it doesn't work if 2 strings get concatenated and make a part of that "screen reader only"

[poena]

I don't understand what "the texts should be both exactly the same" means.
But I also don't understand why

<span class="screen-reader-text">&#8222;%s&#8220;</span> Bearbeiten

would be a problem if Bearbeiten needs to be capitalized. And that capitalization is added by the translator. I think I am missing the point. The screen reader software is not going to read it incorrectly just because it is capitalized?

[Presskopp]

@poena I'm sorry we seem to have lost each other. All I try to say is, that "bearbeiten" as seen on the screenshot must be capitalized, while it must not for the screen reader text. I can't tell if a screen reader reads "Bearbeiten" differently then "bearbeiten".

[sabernhardt]

I agree that this is best handled in the translations themselves (for Twenty Sixteen and more recent themes).

In the example from comment:9,
<span class="screen-reader-text">&#8222;%s&#8220;</span> Bearbeiten
would be read as '„Post Title“ Bearbeiten' and the browser would display 'Bearbeiten' capitalized without the post title.

The translation memory contains a number of German translations:

Bearbeite<span class="screen-reader-text"> "%s"</span>
<span class="screen-reader-text"> „%s“</span> bearbeiten
<span class="screen-reader-text">&#8222;%s&#8220;</span> bearbeiten
Bearbeiten<span class="screen-reader-text"> "%s"</span>
<span class="screen-reader-text"> "%s" </span>Bearbeiten

The last example is similar to comment:9, with the space inside the <span> but different quotes.

I made a ​spreadsheet that gathers the classic themes' strings, their German translations, the HTML produced from them, and images of the German links.

From a technical perspective, any change to translatable strings in theme templates and template functions would require updates to child theme templates and to overriding functions. Otherwise, they could lose translations for all languages.

Older themes have links without screen reader text to differentiate them, but editing them now could be complicated.

• T10 to T15 have Edit links on both the single post and archive pages (which can include home).
• T10 to T12 have Continue reading <span class="meta-nav">&rarr;</span> on the archive pages.