Upper title/Prefix
Or prefix. Whatever you like to call them.
Wrong
Why it is wrong
Assistive tools and keyboards see this as: paragraph, title. They are not linked to each other. For seeing users this is no problem as we have styled the small paragraph but for others it causes confusion.
<p>Smaller prefix title</p>
<h1>The main title</h1>
Right
Why it is right
This markup actually links the smaller prefix title to the main title. Remember to always use unique id for this in both aria-describedby
and id
attribute values. This can be easily achieved with WordPress's sanitize_title()
function.
<p aria-describedby="unique-sanitized-title-id">
Smaller prefix title
</p>
<h1 id="unique-sanitized-title-id">
The main title
</h1>
Last updated
Was this helpful?