Tooltips and supplementary information

Must Not

Tooltips must not repeat link text or other alternatives.

Description

Not all users will see tooltips so they must not include essential information.

Hints, titles and other tooltip-like text should provide additional explanatory content rather than repeat the main alternative for an element, object, or image. This prevents duplication of information for screen reader users.

IOS

Key recommendations are:

  • Assign a 'hint' to an element with the expanded text via xCode;
  • Hints must start with a verb and omit the subject;
  • Hints must begin with a capitalised word and not end in a full stop (.);
  • Hints must not contain the name of the type of control or view (i.e. button) as the user is informed of this via the trait attribute;
  • Hints must not include the name of the action or gesture as these may become out-dated with different versions of OS.

iOS example

Hints are best used in situations where an item such as an item in a list has a dual purpose. For example, the item indicates the name of a audio article but when activated places the article in listening queue.

UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[addButton setTitle: NSLocalizedString("Weekend planner", @"Title for button")]
[addButton setAccessibilityHint:NSLocalizedString("Places item in queue", @"Accessibility hint for button")];                        
UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[addButton setTitle: NSLocalizedString("Weekend planner", @"Title for button")]
[addButton setAccessibilityHint:NSLocalizedString("Weekend planner button", @"Accessibility hint for button")];                        

ANDROID

Android does not provide tooltips or additional hint text other than aria: contentDescription. Note however that tooltips can be shown when long-pressing on icons in the Action Bar.

HTML

Key recommendations are:

  • Do not use the title attribute, except on a form input, as title is not well supported on links on mobile;
  • Do not rely on ARIA tooltips, as while there is some support on iOS there is not much across other devices or platforms;
  • Do not use title attributes and explicit labels together on form fields.

HTML example

<a href="..."/><img src="listenicon.jpg" alt="Listen to today's weather" />Listen to today's weather</a>
<a href="#" title="Listen to today's weather" />Listen to today's weather</a>
<a href="..." title="related articles"> Related articles </a>                        
<a href="..."/><img src="listenicon.jpsb" alt="" />Listen to today's weather</a>
<a href="..."> Related articles </a>                        

TESTING

 

Procedures
  1. Activate a screen reader.
  2. Gain focus on the individual objects, elements, or controls.
  3. Ensure that identity, information is not announced twice for each individual item (e.g. “Next Next button”).
Results

The following checks is true:

  • Information provided via a screen reader for an object, element, or control is not announced more than once, including accessibility properties which are conveyed via speech such as identity of the item.