Joomla! Documentation™

Introduction

As a developer you will have met title attributes, tooltips and popovers intended to provide extra information needed to carry out some task. You may also know that Joomla has a tooltip design a little different from the Bootstrap design. But what should you use where, or not at all?

Articles to read:

• The title page at MDN Web Docs
• Tooltips & Toggletips at Inclusive Components
• I thought title text improved accessibility. I was wrong. at silktide.

The title Attribute

The title attribute can be applied to almost any HTML element and has been widely used and abused for years. It contains text representing advisory information related to the element it belongs to. On hover, the browser shows the element title text after a short delay. The default browser title display is small, bland and unobtrusive. That leads developers to style their title attributes to produce what are commonly known as tooltips, which might be big and brash.

Title attributes are most commonly used for links, buttons and form input elements. These are navigational elements which obtain focus in turn, usually with repeated use of the Tab key. The title might say what sort of input is expected or what a link or button will do. It is commonly used where space for explanatory text is limited, sometimes to the extent that icons are used instead of words.

Best advice: do not use the title attribute unless you really have to. If at all possible, redesign the page to make titles unnecessary. Ask yourself what the title is supposed to do, what do you expect a sighted person to see and what do you expect a non-sighted person to hear with a screen reader. This is designing for accessibility. Remember that a non-sighted person might be tabbing through focusable elements and listening to what they do. A sequence of Click here or Read more is not going to be very helpful.

Examples from Joomla 4 Beta8-Dev

Go to the Administrator Articles list. Almost all of the Joomla list pages work the same way so you could choose almost any page. The following image shows the page with a screen reader turned on. A field with focus is outlined in orange.

Article Title

Hover over any title link for any article. After a short pause a small bland label appears with the text Edit [article title]. It is trying to tell you that selecting this link will take you to the article edit page. You can tell from the nature of the label that it is implemented as a title attribute of the <a> tag. Try navigating to a link with the keyboard - the label does not appear. Is this title really worth it? Someone must have thought so during the page design stage.

The HTML code for this table cell is rendered as follows (layout revised for easy reading):

<div class="break-word">
	<a href="/j4test/administrator/index.php?option=com_content&amp;task=article.edit&amp;id=27" 
		title="Edit Queen Elizabeth II"
	>
		Queen Elizabeth II
	</a>
	<div class="small break-word">
		Alias: queen-elizabeth-ii
	</div>
	<div class="small">
		Category: 
		<a 
			href="/j4test/administrator/index.php?option=com_categories&amp;task=category.edit&amp;id=18&amp;extension=com_content" 
			title="Edit Category"
		>
			Monarchs
		</a>
	</div>
</div>

Screen Reader

A transcript of the words spoken by the screen reader: Queen Elizabeth the second [pause] Link

The pause is just a short break to separate pieces of information. In this case there is no mention of Edit or what the link is to. Could this be made more useful to the non-sighted? Is the title attribute doing anything useful for the normally sighted?

Note: What the screen reader actually announces depends on several factors such as the screen reader in use, its mode, level of verbosity, and so on. The final item, Link, is provided by the screen reader. There is no need to try to provide it yourself.

Search Tooltip

Hover over the Search field - a Tooltip appears. Hover elsewhere - the Tooltip disappears. Click on the field or tab to the field - the Tooltip appears but does not disappear when the hover is moved away. It needs the focus to move away to disappear.

The Tooltip content is quite complicated with several different prefixes you can use to search different fields. Clearly, this one would be difficult to fit into available space without completely redesigning the filter. Almost all of the component list pages use this search bar layout so a Tooltip does seem appropriate.

The rendered HTML code using the Joomla Tooltip design but laid out here to help understanding:

<div class="btn-group">
	<div class="input-group">
		<input 
			type="text" 
			name="filter[search]" 
			id="filter_search" 
			value="" 
			class="form-control" 
			aria-describedby="filter[search]-desc" 
			placeholder="Search" 
			inputmode="search"
		>
		<div role="tooltip" id="filter[search]-desc">
			Search in title, alias and note. Prefix with ID: or AUTHOR: or CONTENT: to search for an article ID, article author or search in article content.
		</div>
		<span class="visually-hidden">
			<label id="filter_search-lbl" for="filter_search">
				Search Articles
			</label>
		</span>
		<button type="submit" class="btn btn-primary" aria-label="Search">
			<span class="icon-search" aria-hidden="true"></span>
		</button>
	</div>
</div>

Remember that in the real source code strings in English here will appear as Text::_('...') values.

Screen Reader

The screen reader only responds to change in focus, so on tabbing to this field with the keyboard, it says in transcript:

Section search [pause] Edit text [pause] Search articles with hid search [pause] Search in title [pause] alias and note [pause] Prefix with ID: or AUTHOR: or CONTENT: to search for an article ID [pause] article author or search in article content

Notice that the pauses occur at commas and full stops. So some improvement for both sighted and non-sighted is possible:

Search in title or alias or note. Prefix with ID: to search for an article ID, or AUTHOR: to search for an author, or CONTENT: to search in article content.

Conclusion

The challenge is to design for accessibility and use a screen reader to listen to your design.

Parent Links

Back to J4.x:Tips and Tricks for Joomla 4 Developers