Page Titles
This is Part 8 of our “First Steps to An Accessible Website” blog series! This post is going to focus on page titles (i.e., the title element). Why? Because…
- page titles are critical in helping users quickly identify the content they need within site maps and search results
- page titles also help users identify their current location within a website without reading or interpreting the page’s content
- often websites use the same title across multiple pages and most scanning tools, if any, fail to identify when page titles repeat across pages
- scanning tools typically do not verify if the page title accurately describes the topic or purpose of the page
- the titles element provides an accessible name for the document
- providing a page title that describes the topic or purpose of the page is a WCAG Level A criterion which means it is a basic web accessibility requirement
The title element represents the document's title or name. Page authors should use titles that identify their documents even when they are used out of context, for example in a user's history or bookmarks, or in search results. The document's title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.
Here is a quick example of what that may look like at the source level (this is a simplified example and not complete working code):
<title>Understanding the Mind of Lawyers</title>
…
<h1>An Impossible Task</h1>
<p>This guide attempts to make sense of the twisted and always confusing thinking patterns of attorneys. Why do we say attempts? Because if there was ever an impossible undertaking…</P
If you would like to see a working example similar to the above code, you can do so at the W3 School site.
Before we dig into page title details, we should clarify a few things to avoid any confusion. You may already know this and if you do, feel free to skim past the next section.
Element vs Tag vs Attribute
The basic structure of an HTML document contains elements, tags, and attributes.
HTML Element
An HTML element is defined by the start tag, the end tag, and the content that is contained in between. For example, a title element would look like the following:
<title>Page title text goes here</title>
HTML Tag
The tag almost always has a start and an end. In the above example you will notice the starting tag for the title element is <title> and the end or closing tag is </title>
Another example would be a paragraph tag such as this:
<p>This is a paragraph of text</p>
You should get the idea by now.
HTML Attribute
What about the attribute? Attributes provide additional information about the HTML elements. For example, when you see a link on a page it is because the HTML anchor element is used to define the hyperlink. It would look like the following:
<a href= "https://convergeaccessibility.com">Converge Accessibility – Narrowing the Digital Divide</a>
You will notice in our example above, the anchor element has an opening tag, closing tag, and content in between. That being <a> and </a> respectively along with text "Converge Accessibility – Narrowing the Digital Divide" that represents the hyperlink text.
The href attribute that is part of the start tag identifies the link target. Without it the information required to create the link would be incomplete.
Why do we bother explaining all this? Because there are title attributes also! We want to make sure you know we are talking about the title element or tag and not the title attribute. Title attributes are often used on image elements to provide a tooltip when the mouse hovers over an image or to provide an accessible name to an iframe element.
Now that we are clear we are talking about a title element/tag and not a title attribute, let’s continue!
Title Elements in Action
As mentioned at the start of this post, title elements help users to identify and navigate to pages of interests in search results, bookmarks, etc. Screen readers will also read out the page’s title when the page first loads helping the user to determine if they ended up in the location they were hoping.
In the following screen capture the page elements for a series of pages on a baking company’s website all use the same title text. As you can likely see, it would be difficult for a user to know what the purpose of each page was when viewing the tabs within the browser.
In the next example, the same pages on the baking company’s website are now using page elements with text that describes the purpose of the page along with identifying the site.
The last example is a much more accessible and usable experience for all users and conforms with the WCAG 2.x Level A conformance requirements for page titles.
Things to Know
Browsers do not strictly adhere to the rules when it comes to title elements on a page. For example, if multiple title elements are present in the HTML document, most browsers will display the first title element it encounters, even when that title element is in the wrong location within the page source.
That being said, here are some general details when it comes to title elements/tags:
- defines the title of the document
- defines a title in the browser title bar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
- is required in an HTML document
- must contain text-only
- are to be children of (or contained within) the head element of a document
- there must be no more than one title element per document
- should not be empty
- is used by search engine algorithms to decide the order when listing pages in search results
Tips to Follow
To create descriptive and useful page titles, follow these tips:
- Go for a longer, descriptive title (avoid one or two-word titles)
- Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
- Do not use just a list of words as the title (this may reduce the page's position in search results)
- Make the title as accurate and meaningful as possible
Summary
With the information provided in this post you should be a page title expert!
As you can see, web accessibility does not have to be hard. If you need a structured, comprehensive, and clear resource to help everyone on your web content development team effectively incorporate accessibility into the web development lifecycle, sign up for a subscription to WebAlign today!
Thanks for reading! Until next time, feel free to re-review the entire "First Steps to An Accessible Website" series.
Want to See More Content Like This?
Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!
We're Here to Help When You're Ready
Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.
0 comments on “First Steps to an Accessible Website (Part 8)”