Why Title for Every Page
The Page Title is the First Thing Screen Reader announce to its users.
Blind users cannot glance quickly at the content of a web page to see what the page is about, so they depend on the page title to give them this information. Web pages without titles waste the time of screen reader users, because they have to try different key combinations to find out what the page is all about.
- The page <title> MUST be present and MUST have text.
Screen reader users depend on the title to quickly learn the uniqueness and purpose of the page. If you leave “title” tag blank, screen reader users will have to browse the page and understand the purpose from the content, which is very difficult and time wasting.
Example: A Valid Page Title
The page has a valid <title> in the document <head>.
Begin code:
!DOCTYPE html>
<html lang=”en”>
<head>
<title>Web Accessibility Services </title>
</head>
End code.
- The page <title> MUST be updated when the web address changes.
When ever the web address changes, whether due to a true page load event, or due to an AJAX call (as in single-page applications), or due to a JavaScript event, the page <title> must change to reveal the new content. Or else, the page title will be out of sync with the content, which can create confusion, especially if the user gets the page link sent to them or saved in a bookmark.
- Meaningful Page Title
The page <title> MUST be appropriate and useful.
The page title identify the purpose of the page in a way that is useful to all users, but especially to screen reader users, who depend on the title to get a quick sense of the page.
Example: Meaningful Page Title
Begin code:
<title>Household Products</title>
End code.
- If a 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.
Good Example: Title with Search Text
The title adds the text of the search.
Begin code:
<title>”Warranty” – Search Results</title>
End code.
Bad Example: Generic Title
The title does not include the text of the search.
Begin code:
<title>Search Results</title>
End code.
- The <title> must be short.
There are no specific restrictions on the length on <title> in accessibility guidelines, but it is best practice to keep it as short as possible with appropriate information.
Good Example: Short Page Title
Begin code:
<title>Accessibility Services</title>
End code.
Bad Example: Page Title Used for Keywords Instead of a Correct Title
Stuffing a list of keywords into a page title makes the page title too long. People using screen readers will get annoyed listening to the long title as they wait to hear other important information about the page.
Begin code:
<title>Blindness Resources, Blindness related services, Blindness Related Organizations in Pakistan, low Vision Aids, Special Education Services, Blindness Related Apps, Audio Books ,Blindness Related Health Services </title>
End code.
- The page <title> SHOULD be unique and come first.
To avoid confusion — especially for screen reader users — it’s best if the <title> of a page is unique within the web site.
Main information SHOULD come first in the <title>.
Example: Unique Information is Placed First
In this example, the purpose of the page is listed first (Web Accessibility Services), followed by the site identity (Beyond Our Vision).
Begin code:
<title>Web Accessibility Services – Beyond Our Vision</title>
End code.
- Extra Benefit: Page Titles Improve Search Engine Optimization
Search engines and site search tools also use the page title when displaying search results. Effective titles help users quickly sift through the search results to identify the content they need. In this sense, good page titles are an important component of search engine optimization (SEO) in addition to accessibility.
