(upbeat instrumental music)

- [Narrator] Hello and welcome! In the next few minutes, you’ll learn the exact steps you need to take to create an accessible web page title.

What is the page title, and why is it important? The page title tells a user what the page is about. This information is critical for users of assistive technology such as screen readers, and the title tag is also the most powerful tag in terms of SEO - or Search Engine Optimization - keyword relevance. When you search for something on google and you get a list of results, do you know where the link text comes from? That’s right, it comes directly from the page title. So let’s say I am a person who is blind using a screen reader. When I land on a web page, I can know what it’s about right away. The first thing a screen reader user hears when they load a page is the title, and they also hear each page title when moving from tab to tab on their browser. If there is no page title present, or if it has generic, vague text, I have to enter the main content with my screen reader and waste valuable time trying to infer this information.

The page title is helpful to sighted users, as well. Since most web browsers display the page title in each tab, a sighted user searching through many open tabs can quickly locate the one they need. Think of the page title as the first, quick birds-eye view that a user gets.

How do I create an accessible page title? There are required and best-practice elements. Let’s go over each category. We’ll be using the Deque home page as an example here.

Here are the required elements. The first requirement is that the page title must have correct markup. The title tag must be present for each page and must contain valid text. So here I am on Deque.com. I can see the page title displayed on the tab. Now I’ll go to view page source. And here I can locate the title. It’s in the title tag within the document head, and it contains text.

The second requirement is that the title must be accurate and informative. I want to know, at a high-level, what is this page about? Going back to my example, the title of this page is: Deque Systems | Web Accessibility | Software, Services, and Training. This title exactly describes the home page of Deque, so I have valuable orienting information when I first land on this page.

The third requirement is that when the web address changes, the title must change to reflect the new content. So let’s say from the home page here I click this Get Accessibility Help button. I have a new address here. And notice that the title changed. This tab is now called Get Accessibility Help. And I can see this in the source code, as well.

So, these are the required elements. There are also a few best practices to keep in mind.

The first best practice is that if page is the result of a user action or scripted change of context, the text of the title should describe the result or change of context to the user. So let’s say that I want to search here for the keywords “accessibility software”. I can see that the title changed to “you searched for accessibility software.” Going to view page source, here is my title tag with that same text. Here is an important point to keep in mind: Single-page applications, or SPAs, use AJAX, or Asynchronous JavaScript and XML, to load partial page content into a web page that is already rendered, so the page title won't change unless you use JavaScript to change it as the partial page content is loaded. If you use JavaScript to change the page title, the change will not show up in the page source. You would need to go to the inspector in the developer tools to view the page title. The page source shows only the original page as it was loaded to begin with. The inspector shows the accurate document object model, or DOM, including elements that have been changed via JavaScript. It’s important to understand why this best practice matters in AJAX-driven interactions.

The second best practice is that the title should be concise. You don’t want to waste someone’s time in listening to a really long title before getting an idea of what the page is about. Google usually displays the first 50 to 60 characters of a title, so that’s a great limit to stick to. Here we can see when I search for Deque, the entire title is displayed.

The third best practice is that the page title should be unique if possible, and the unique information within a title should come first. So here from the home page, let me open these three training options. Notice that they each have a unique title: Accessibility Training, Instructor-Led Accessibility Training, and Online Self-Paced Accessibility Training. There is also non-unique information within each title, the word Deque, but it has been purposely placed at the end, so that a user doesn’t have to hear it repeatedly or just see the same word repeated over and over if they have several tabs open, which would make it hard to locate the one they need.

Fourth and final: The title text should be an exact match, or very close to, the top heading level text. Here the title of this page is Online, Self-Paced Accessibility Training, and when I go to view page source and search for heading level 1, I can see that the text is nearly identical. This completes this tutorial on creating an accessible page title.