|
Tooltips and Alt Text
A tooltip is the visible text that appears when users hover over an icon. Alt text is not visible but is read by screen reading assistive technology, such as JAWS. Alt text is the alternative text description of the image at the HTML Alt tag level. The text for both tooltips and Alt text comes from the same shortDesc property in the Application Development Framework (ADF).
Icon Definition and Interaction
Use tooltips and Alt text on icons to provide their associated definitions. The tooltip should name the action or meaning of the icon.
Here is an example of a tooltip for an icon definition in form layout:
 |
| Figure 1. Tooltip for an icon definition in form layout |
Figure 2. shows an example of a tooltip for an icon definition in a table toolbar.
 |
| Figure 2. Tooltip for an icon definition in a table toolbar |
Tooltip Text
The Oracle Fusion Icon Usage Guidelines provide suggested tooltip text for some common Oracle Fusion icons. The tooltip should name the action, concept, indicator, or status associated with the icon. In general, limit tooltip text for all icons to 40 characters. The maximum is 80 characters.
The
Language in UI Usage Guidelines
includes the recommendations for tooltip text.
Follow these guidelines for tooltip text:
- For functional and functional status icons (both clickable):
- Use headline capitalization for tooltip text.
That is, place initial capitals on each word except for articles (a, an, the), prepositions, and coordinate conjunctions (and, but, or, nor, so, yet). For example, use headline capitalization for the tooltip "Add Row."
- Do not show access keys in the tooltip.
- For item qualifier, item indicator, and status icons (all nonclickable):
- Use sentence capitalization for tooltip text.
That is, use an initial capital for the first word in each phrase or sentence. For example, "Updated item or "In progress."
- Note that proper nouns, such as San Francisco and Friday, always have initial capitals when placed in sentences.
Capitalization depends on the function of the tooltip, depending on whether it is being used as a label or as help text. This table provides examples of tooltip text for each icon type.
Icon Type (Size) States |
Icon File Name Ends With |
Examples |
| Icon |
Tooltip Text |
Alt Text:
Headline Capitalization |
Help Text:
Sentence Capitalization |
| If you are using a tooltip as an alternative textual (Alt text) label for an icon, use headline capitalization. |
If you are using a tooltip as help text, use sentence capitalization. |
Functional
(16 x 16)
Enabled, hover, mousedown, disabled |
_ena.png |
add_ena.png
 |
Add Row |
Not applicable |
Functional Status
(12 x 12)
Enabled, hover, mousedown, disabled |
_ena.png |
clock_sm_ena.png

|
In Process |
Not applicable |
Item Qualifier
(16 x 16)
Display only |
_qualifier.png |
repeatingevent_qualifier.png

|
Not applicable |
Repeating event |
Item Indicator or Flag
(12 x 12)
Display only |
_status.png |
updatedvalue_status.png

|
Not applicable |
Changed item; New item |
Status
(12 x 12)
Display only |
_status.png |
dash_status.png

|
Used as an alternate textual (Alt text) label in a legend:
Trend Unchanged |
Used as help text for an icon:
Trend unchanged |
Table 1: Examples of tooltip capitalization on different icon types
For some icons, ADF automatically provides the tooltip, and you cannot override it. Tooltips for the commonly used * (Required) and ** (At least one is required) item indicator icons are automatically generated by ADF. The Common Oracle Fusion Icons section of the Oracle Fusion Icon Usage Guidelines notes all the icons that come from ADF with hard-coded, noneditable tooltips.
Definitions for Required and At least one is required in the ADF Query Component
The ADF af:query component contains hard-coded tooltips and hard-coded definitions for * (Required) and ** (At least one is required). Teams should suppress both term definitions in this component because tooltips address accessibility requirements.
The example in Figure 3 illustrates the location of the af:query component term definitions that you should suppress.
 |
| Figure 3. Icons for Required and At least one is required appear with tooltips; therefore, term definitions should be suppressed |
Use of At least one is required in Components Other than ADF af:query
In Oracle Fusion, components other than ADF af:query do not support the use of double asterisks ("**") to indicate that at least one of multiple fields is required. In such cases, follow these recommendations:
- Use static instruction text to indicate that at least one of multiple fields is required.
- Use this instruction text format: "Enter a value for at least one of these fields: <field name>, <field name>, or <field name>." For example, "Enter a value for at least one of these fields: First Name, Last Name, or Email."
- Field names should be listed in the order in which they display, starting at the top left and moving toward the bottom right (see figure 4).
- Do not use the double asterisk (**) indicators in prompts because the additional manual coding will have to be undone in a later version of Oracle Fusion.
Figure 4 shows an example of a non-ADF af:query component in which at least one of multiple designated fields is required.
 |
| Figure 4. In non-ADF af:query panels, static instruction text informs users that at least one of multiple fields is required |
Standard error messaging behavior applies if users do not fill in at least one of the referenced fields. For more information, see the following documents:
Legends
Some components, such as the
Gantt chart, include their own component-specific legend for the icons used in the component. If a group of related icons, such as status icons, is used in a particular table, tree, or tree table, you can place a legend for those icons in close proximity to the component. You can use a
panel box
to group the icons and visually distinguish the legend. You include such legends in addition to the tooltips provided for the icons. Consider the following factors to determine whether a legend is necessary:
- Speed of accessing an icon definition:
- Users find it is faster to look at the legend than hover over the icons to see their meaning when either of the following are true:
- Four or more related icons are used in the component.
- Users interact infrequently with the page and are not likely to memorize the meaning of the icons.
- Usage of page real estate:
- The novice or infrequent user may prefer to see icon definitions in the legend.
- The frequent or power user may consider tooltip text sufficiently useful and the legend less valuable.
Follow these guidelines:
- Use headline capitalization for the text label associated with each icon inside the legend.
- Do not use tooltips with icons inside the legend.
- Icons in the legend are considered decorative images because each icon is immediately followed by a text label.
- The icons themselves must be marked up as decorative to avoid replication (in HTML, ALT="").
Figure 5 shows a legend for component-specific icons. Note its placement below and end-aligned with the tree table.
 |
| Figure 5. Example of a legend for the component-specific icons |
|