Page cover image

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>

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?