Joomla! Programmers Documentation

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

Overview¶

Tooltips are useful elements. They allow presenting information with an icon or a short text and adding additional informationn when the users hovers the icon or text. If several tooltips are on a page, every toolpip must have an own ID. Other wise a screenreader cannot identify which tooltip gives Information to which element.

Code Snippet¶

<span class=".." aria-describedby="tip-unpublish<?php echo $i; ?>">
    <?php echo $item->count_published; ?>
</span>
<div role="tooltip" id="tip-unpublish<?php echo $i; ?>">
   <?php echo Text::_('COM_MENUS_COUNT_UNPUBLISHED_ITEMS'); ?>
</div>

<a href="/.." aria-describedby="editarticle-<?php echo $id; ?>">
    <span class="icon-edit" aria-hidden="true"></span>Edit
    <div role="tooltip" id="editarticle-<?php echo $id; ?>">Published Article</div>
</a>       

Common Mistakes¶

• Missing ID.
• ID not uniquee.

Example in Joomla¶

A tooltip on a element in a table: administrator/components/com_menus/tmpl/menu/default.php

A tooltip in the frontend which is visible for editable content (if you have permission for editing) components/com_content/tmpl/article/form.php

Who is affected?¶

People using screen readers need ....

People with cognitive disabilities need ... etc.

Who is impacted most by the accessibility of this element?

Testing for accessibility¶

Relevant WCAG Success Criteria¶

• Link to the WCAG Success Criteria here. For example:
• WCAG criteria 1.3.1 - Info and Relationships

Relevant ATAG Guidelines (optional)¶

• Link to the ATAG Guideline(s) here. For example:
• Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time.