APLN Moderator

Hi FrancisLepage,

Thank you for this topic!

Yes, it is recommended to use <hgroup> to wrap a heading and a subtitle together. If the header contains more than just a heading and subtitle, for example, an epigraph or an image, then you can use the <header> tag within which there can be an <hgroup> for the heading and subtitle, followed by other header components.

Example from DAISY Knowledge Base:

<section id="c01" aria-labelledby="c01-hd">
<header>
<img src="graphics/chapter-marker.png" alt=""/>
<hgroup>
<h2 id="c01-hd">Chapter 1<h2>
<p role="doc-subtitle">Let there be light</p>
</hgroup>
<p role="doc-epigraph">Now the earth was formless and void,
and darkness was over the surface of the deep.</p>
</header>

</section>

 

Your second example looks good! However, I’m unsure about the use of the title attribute in the <h1> tag. “title=”My Title” can likely be omitted as a screen reader will read out the value within the <h1> tag: “MY TITLE”

In the case where there are non-visual headings, an aria-label attribute is used and read out by assistive technology to announce the start of a new section.

More info on headings here: https://kb.daisy.org/publishing/docs/html/headings.html

 

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

View our current resources