Accessibility: Title Achievement

Titles. Every book, royal figurehead, military official, podcast, and website has one - but how often do we really think about them?

If you rely on a screen reader the answer is often. If you're a web developer the answer is probably more than most, but perhaps not as much as you should.

Titles have the power to greatly impact SEO performance, in-application organization, and allow screen-reader users to quickly understand page content. In more ways than one they directly impact, influence, and inform our end users.

The Title Element

Like the <header> and <footer> elements, the <title> element is a semantic HTML element designed to support the global structure of the HTML document.

To be clear, the title is not the main heading - the main heading being the first, and ideally only top-level, <h1> element on the page. By convention this element is usually styled in large fonts and contains the same, or similar, text to the title.

Furthermore, the <title> element is not to be confused with the title attribute, which offers advisory information about the element for which it is set.

Syntax and Use

In most cases, a document without a title is considered invalid. A valid title must follow a few rules:

The only permitted parent of the <title> element is the <head> element
Both opening and closing tags (e.g. <title></title>) must be present
The document should have only one(1) set of <title> tags
The <title> tags must not be empty
The content between tags must be text-only. Nested elements will be ignored.

Accepted Attributes

The <title> element accepts only the global attributes, a set of standard attributes (like id, lang, and hidden) available to all elements in HTML5. There are no special attributes specific to the <title> element, like the checked attribute for <input type="checkbox" /> elements.

Implicit ARIA Roles

The <title> element has no corresponding implicit ARIA roles. This is another way to say that the meaning of the <title> element cannot be accurately represented, to assistive technology or otherwise, through the roles, states, and properties provided in the ARIA specification.

We cannot provide a title the same way that we can, if for some reason it's absolutely necessary, create a valid and compliant link with the role, data-href, and tabindex ARIA attributes:

<span role="link" tabindex="0" data-href="<https://example.com>">Example Text!</span>

The <title> element is not just a way to get content to show up on the screen. The tag denotes meaning to a machine and implies something about the content. Not using it, or using it incorrectly, is at best a disservice and at worst creates an exclusive experience for end-users.

Title Consumption

Sighted users consume the document title most frequently through the text that appears on open tabs in a browser window. The value this adds is quite literally visible, especially when best practices are followed.

For users without access to this visual structure, the <title> element takes on an added layer of importance, likewise the implications of poor title practices are more severe.

When a screen-reader user arrives at a page the title is the very first thing they will hear. If the title is too long the user could find it cumbersome. If the title is too short, or missing, the user will have to spend extra time navigating through page content to understand its purpose. Or they could leave the page completely in search of a more inclusive and less time-consuming experience.

Basic Best Practices

Armed with the knowledge of what a title is, how it should be used, and why it's important, we can take a more in-depth look at best practices and a couple of use cases.

In its most basic form a page title should be:

Accurate and informative
Concise
Unique within the website
Similar in content to the top level heading in the main content

Use Case: The Confetti Club

<head>
    <title>Environmentally-Friendly Confetti Alternatives</title>
</head>
<body>
    <h1>Environmentally-Friendly Confetti Alternatives</h1>
        <h2 id='botanical'>Petals & Botanicals</h2>
        <ul aria-labelledby='botanical'>
            <li>Fresh flower petals</li>
            <li>Dried flower petals</li>
            <li>Coconut flakes</li>
            <li>Sprouting seeds</li>
        </ul>
        <h2 id='alternative'>Alternative Options</h2>
        <ul aria-labelledyby='alternative'>
            <li>Biodegrabale glitter</li>
            <li>Blown cornstarch</li>
            <li>Bubbles</li>
            <li>Recycled paper flower petals</li>
        </ul>
        <h2 id='recycled'>Recycled Materials</h2>
        <ul aria-labelledby='recycled'>
            <li>Paper flower petals</li>
            <li>Tissue paper</li>
        </ul>
</body>

The title, "Environmentally-Friendly Confetti Alternatives", accurately conveys the purpose of the page quite well. At only 4 words in length it is concise, easily readable, and a quick listen with assistive technology.

In some cases you may see a title with several keywords jammed into the text. For our example that could look something like this:

<head>
    <title>Environmentally-Friendly Confetti Alternatives, Botanical, Alternative, Recycled, Eco-friendly celebrations </title>
</head>

This is usually done with the intention of improving the site’s SEO performance, but it is a bad practice. The resulting title is quite long and screen reader users could find it tedious to listen to and confusing to understand. While titles have no technical length, they should be as short as possible without losing accuracy or informativeness.

Finally, it’s an added bonus that the text content of the title matches the text of the first heading on the page. While these two(2) elements are different, they both essentially exist to give the page a title.

Dynamic Best Practices

In an increasingly dynamic digital world, more is done in web apps with less true page reloads. This is a positive for many reasons, but it creates a unique challenge for screen-reader users; how do we keep these users informed with what’s happening on the page and create equivalent digital experiences? The <title> element is a good place to start.

An accessible dynamic title will follow a couple of guidelines:

If a page’s content is the result of a user initiated action or a scripted change of context the <title> will describe the result or change to the user.
The unique title text should come before common title text, or text that is repeated throughout other pages in the app

Use Case: The Confetti Club Search Page

<head>
    <title>Product Search - Confetti Club</title>
</head>
<body>
    <form>
      <label class="search-label" for="search">
      Search
      </label>
      <input id="search" type="text" placeholder="Search our Confetti Products!">
      <input class="button" type="button" value="Search">
</form>
</body>

In the title above the unique information, ‘Product Search’, comes before the ‘Confetti Club’ text that we see throughout the site. This gives different pages titles that allow for easy and accurate identification for both sighted and screen-reader users.

We can take this a step further by imagining the user has typed in and submitted a search for “petals”. The app, which we can assume is written in a framework like Vue or React, won’t need perform a full-page reload when the user submits the form. Instead the page will dynamically update, returning a list of products after a background request has resolved. To let a screen-reader user know of this change we need to also dynamically update the title:

<head>
    <title>"Petals" - Product Search Results</title>
</head>
<body>
    <form>
      <label class="search-label" for="search">
      Search
      </label>
      <input id="search" type="text" placeholder="Search our Confetti Products!">
      <input class="button" type="button" value="Search">
    </form>
    <div id="search-results">
        <ul>
            <li>
                <a href='/product/rose-petal'>Rose petals</a>
            </li>
            <li>
                <a href='/product/tulip-petal'>Tulip petals</a>
            </li>
            <li>
                <a href='/product/daisy-petal'>Daisy petals</a>
            </li>
        </ul>
    </div>
</body>

The updated title accurately describes the result of the user action - that is, searching “petals” on the Product Search page. Additionally the unique information comes first. If someone were to share a direct link to this page, or bookmark it for future reference, the purpose and contents are easily discernible for all users.

The <title> element and its contents are critical to all users, but especially to screen-reader users without the option of quickly glancing at the content of the page to visualize and understand what it’s about. Adhering to best practices and providing page titles throughout the application that are succinct, informative, and consistent with content ensures these users will spend less time trying to figure out what’s happening on the page and more time using the service it provides.

Resources

🖇️ W3C/WAI: HTML Page Title is Descriptive

🖇️W3C/WCAG: Technique H25: Providing a title using the title element

🖇️ Descriptive HTML page titles help users quickly understand a web page’s content, Indiana University

🖇️ IAAP WAS (Web Accessibility Specialist) Exam Preparation Course, Deque University

As always, thank you for reading, and I hope you were able to learn something new today! 🕶️ Any feedback, corrections, or general discourse are always welcome 🦄

Blog