Creating an accessible pause between chapter number and chapter title

  • This topic has 1 reply, 2 voices, and was last updated 1 month, 1 week ago by Laura Brady.
Viewing 2 posts - 1 through 2 (of 2 total)
Creating an accessible pause between chapter number and chapter title thread
Author Posts
123go

Hi all,

I’m testing a title right now, and the screen reader is running the chapter numbers (which are written out, like ONE, TWO, THREE, etc.) into the chapter title. There is no pause, so it makes the number and first word of the title all sound like one word. It’s unintelligible and confusing.

What is the most accessible way to add a pause between the chapter number and chapter title?

Code:
<section epub:type=”chapter” role=”doc-chapter” aria-labelledby=”ch02″>
<h2 id=”ch02″ class=”chaptitle”><span id=”page_18″ aria-label=” Page 18. ” epub:type=”pagebreak” role=”doc-pagebreak”/><span class=”chnum”>Two</span> <span class=”ctitle”>I Wanna Dance!</span></h2>

Thanks in advance for your help and advice!

Laura Brady

Here is a hack that I use in cases like this: I put a period after the number but put it in a span with a class of hidden. And then assign display:none; CSS to that class.

Your code example would be:

<section epub:type=”chapter” role=”doc-chapter” aria-labelledby=”ch02″>
<h2 id=”ch02″ class=”chaptitle”><span id=”page_18″ aria-label=” Page 18. ” epub:type=”pagebreak” role=”doc-pagebreak”/><span class=”chnum”>Two<span class=”hidden”>.</span></span> <span class=”ctitle”>I Wanna Dance!</span></h2>

Try it and let us know how it sounds.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Want to join the discussion?

a wooden table with a white keyboard on top, and a persons hand writing on a piece of paper

View our current resources