DEV Community 👩‍💻👨‍💻

Cover image for A11y tips: write a good title
Carlos Espada
Carlos Espada

Posted on

A11y tips: write a good title

When we navigate with a screen reader, the first thing that is announced is the <title> included within <head>. That is why it is very important to make it descriptive of the content that the document includes.

It is also advisable to first provide the information that makes the <title> unique. So being in a section, this is better ...

<title>Madrid - Wikipedia</title>
Enter fullscreen mode Exit fullscreen mode

... that something like this ...

<title>Wikipedia - Madrid</title>
Enter fullscreen mode Exit fullscreen mode

The user may already know that he is on Wikipedia, so it is better to announce the specifics of that document first so that he does not have to listen to the entire <title> before knowing exactly where it is.

In certain situations it is also convenient to add extra information, such as the number of search results or errors when submitting a form. For example:

<title>17 search results for madrid. Page 1 of 2 - Google</title>
Enter fullscreen mode Exit fullscreen mode

Being the <title> an element that is very important for SEO, it can be tempting to fill it with words that help in the ranking of our content, but that will not help users. Think of the <title> as the business card of the document, try to keep it as short as possible while offering the really useful information.

Top comments (0)

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<