The title attribute is often used to give additional information about an element. Content editors will find a field for it when they add a link or an image to the WYSIWYG.
In other words, the CKEditor WYSIWYG calls it the “Advisory Title” under the Advanced tab of the Link and Image Properties modals.
The resulting HTML puts an attribute on the element called title with the value set to whatever was entered into the text field.
In most browsers, the “Additional info” text and “Photo by the cat” text will pop up as a tooltip when hovering over the element with a mouse.
For your information, these are valid uses of the title attributes from a technical standpoint.
Title attributes, after all, are on a global attribute scale and can be used on any HTML element.
Using Title Attribute in WordPress Navigation Menus
Recently, one of our readers asked if there’s a way to add title attribute in WordPress menus? Of course, the answer is Yes!
Apart from adding them on embedded videos, the title attribute allows you to provide extra information about a link.
It often appears as tooltip text when the mouse moves over the link.
In reality, the title Attribute is sometimes forgotten and I am of course referring to the WordPress menus.
And, since most of the time we cannot add the full blog page title to our menu bars, we use 1 or 2 words to describe them.
The best way to add the full title to these menus is by using the Title Attribute feature in the custom menu section of your dashboard.
Adding Title Attribute in WordPress Navigation Menu
In the first place, you need to visit the Appearance » Menus page and click on the ‘Screen Options‘ tab in the top right corner of the screen.
This will bring down a menu where you need to click on the checkbox next to the Title Attribute’s option.
After that, simply scroll down and click on any menu item in your existing menu to expand it. You will now see the title attribute field.
You can now add the text you want to use as a title and then repeat it for all menu items in your navigation menu.
But, don’t forget to click on the save menu button to store your changes.
You can now visit your website and take your mouse to a link in the navigation menu. You will see the title attribute displayed as a tooltip.
Why Use Title Attribute in Website Menus?
When you hover your mouse over a word in your menu bar, the full title will appear in a small box.
Go ahead and hover your mouse over one of our menu titles in the top navigation bar for an example.
The title attribute is an HTML attribute that can be added to any element, but it is most commonly used with links and images.
It allows you to provide additional information about the link or the image.
Typically web browsers display the title attribute on mouseover. This allows users to see where this link will take them before they click on it.
Screen readers may also read the title attribute, but many screen readers will ignore it and will only read the anchor text.
WordPress removed title attribute from insert link popup in version 4.2. However, you can easily add the title and rel=nofollow options in insert link popup.
See what’s the difference between image alt text vs title.
Why not use the Title Attribute?
Someone who uses a keyboard to navigate websites, such as a person who lacks the fine motor control required by a mouse, will never see your title attributes. In that case, because they have no way to hover over elements.
On the other hand, a person who uses a screen reader because they are blind or have low vision will likely never have the title attribute read to them.
Important to realize, some screen readers don’t support the title attribute and those that do, don’t read the title attribute by default.
In the end, it requires changing a setting for the title to be read, which not all users do.
Equally important, touchscreen devices such as phones and tablets don’t support title attributes. Above all, which creates an accessibility issue for everyone and not just those with a disability.
What Not to Do?
First of all, don’t rely on the title attributes to convey important information. For instance, if you need to alert a user to something that will happen when clicking on a link.
Whereby, that information should go in the link text, not a title attribute.
Next, don’t use it to duplicate text from elsewhere. If an image’s alt attribute already describes what needs to be described, don’t put it in the title attributes too.
For those people that do have the title enabled in their assistive technology, it’s an annoyance to have to listen to the same thing twice.
What to Do?
In general, use of the title attributes is discouraged…with one exception. You should ALWAYS provide a title attribute for frame elements. This is supported in screen readers.
<frame title=”Advertisement”>
If you find yourself in a situation where you do need to provide complementary text, because of design constraints, for instance, it’s better to either revise your link text when possible or use CSS to hide a portion of the link text.
For example:
<a href=”road-less-traveled.html”>Read more <span class=”element-invisible”> about The Road Not Taken, a poem by Robert Frost</span></a>
And if you really, really, really [insert temper tantrum here] need the title attributes for some reason, consider putting the text in a data-* attribute instead (i.e. data-title).
Isn’t the Title Attribute Good for SEO?
Some SEO experts believe that it is not useful while others claim it is useful for SEO as it allows you to provide more context.
By every account I’ve read, no. Not on the actual page where it resides, anyway.
Since the title attribute can be used on every html element, it would be a great way to do some serious keyword stuffing. So it would make sense that the search engines would ignore it.
You’re much better off putting your keywords in the link text than the title attribute.
(Disclaimer: I am not equally 100% SEO expert. So, if you have evidence to the contrary, please add a comment!)
Summing Up,
Since the title attributes provide little if any benefit at best and can be annoying or confusing to some users at worst. Avoid using it unless absolutely necessary. In that case, except for frame elements where it’s required.
However, you can take title attributes even further with jQuery by adding fancy tooltips on mouseover effect. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.
Be that as it may, the main reason we add this type of attribute is to help visitors understand what the page is all about. Convincing them equally that the page is very useful.
On the contrary, it tends to be the details that make a blog successful. And it starts with a small change such as title attributes.
Additional References;
- How To Add Titles Attribute To WordPress Menu Bar
- Differences Between HTML 4.01 and HTML5
- Using the Title Attributes with HTML Elements
Get Free Updates
Notice: All content on this website including text, graphics, images, and other material is intended for general information only. Thus, this content does not apply to any specific context or condition. It is not a substitute for any licensed professional work. Be that as it may, please feel free to collaborate with us through blog posting or link placement partnership to showcase brand, business, or product.
