Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#30606 closed defect (bug) (fixed)

Twenty Fifteen: Screen reader text spaces?

Reported by: pavelevap's profile pavelevap Owned by: azaozz's profile azaozz
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Bundled Theme Keywords: has-patch
Focuses: accessibility Cc:


<span class="screen-reader-text">' . esc_html__( 'Page', 'twentyfifteen' ) . ' </span>%

There is a space before ending span for Page number.

<span class="screen-reader-text">Page </span>1

But there are no spaces for other text like "Posted on", "Tags", etc.

<span class="posted-on"><span class="screen-reader-text">%1$s</span><a href="%2$s" rel="bookmark">%3$s</a></span>

So, output is without space.

<span class="posted-on"><span class="screen-reader-text">Posted on</span><a href="URL" rel="bookmark">DATE</a></span>

I am not sure what is right?

Attachments (1)

30606.patch (4.2 KB) - added by nvwd 10 years ago.
added necessary spaces to screen reader text

Download all attachments as: .zip

Change History (8)

#1 @ocean90
10 years ago

  • Focuses accessibility added
  • Milestone changed from Awaiting Review to 4.1

#2 @afercia
10 years ago

see #30174
Screen readers read out text reading what's in the DOM, spaces included.
Ideally, your markup should have spaces and punctuation like you would do in your normal writing (or speaking). You wouldn't write:

"pageone" "pagetwo" etc.

of course you would use spaces between words.

For the same reason there's a hidden comma between links, to let screen readers do a little pause.

Regarding Posted on, Categories, Tags, etc. yes, ideally there should be a space there too, but it's a minor issue since they're links so screen readers will say "link", for example this is what NVDA reads, copied and pasted from NVDA Speech Viewer (the commas are not read out, they're just pauses):

Posted on
visited link
December 5, 2014
My first category
My second category
my first tag
my second tag
my third tag

Not sure about other kind of machines reading that, for example search engine crawlers. I guess they will get what you see when you remove styles, for example in Firefox: View > Page Style > No Style

Pages: Page 1, Page 2, Page 3
Posted onDecember 5, 2014AuthoradminCategoriesMy first category, My second categoryTagsmy first tag, my second tag, my third tag

but of course they understand links.

Last edited 10 years ago by afercia (previous) (diff)

#3 follow-up: @pavelevap
10 years ago

afercia: Thank you for great explanation! So, we can use it simply in our localization and for example "Posted on" translate to "Publikováno: " (with space)?

#4 in reply to: ↑ 3 @afercia
10 years ago

Replying to pavelevap:

afercia: Thank you for great explanation! So, we can use it simply in our localization and for example "Posted on" translate to "Publikováno: " (with space)?

hi pavelevap, I don't know :) it should be tested in your language. Consider also that screen readers try to read out punctuation in a natural way so when they find a colon : they will do a little pause. See How Screen Readers Read Content on
If you want to actually test and you're on Windows, I would recommend NVDA which does its best when used with Firefox:
and supports several languages, including Czech :)

10 years ago

added necessary spaces to screen reader text

#5 @nvwd
10 years ago

  • Keywords has-patch added

#6 @pavelevap
10 years ago

afercia: OK, I will test it. But somewhere is colon "Next post:" and somewhere not "Format", etc. I am not sure if it should be different? Also for our language is not "Page 1" the best solution for word order, because it would be better "1. stránka". So I was looking for solution "Stránka: 1" which could be also usefull. But I will try to test linked software...

#7 @azaozz
10 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 30781:

Twenty Fifteen: add spaces after screen reader text strings to make them readable. Props nvwd, pavelevap, afercia. Fixes #30606.

Note: See TracTickets for help on using tickets.