Accessible helper text options

From PegaWiki
Accessibility - Configuring Different Forms of Helper Text on Controls / This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Accessible helper text options

Description Recommendation of accessible helper text options
Version as of 8.8
Application Pega Platform
Capability/Industry Area User Experience



Using Helper Text[edit]

Labels assist in organization of content and are used for identifying an object or form field, such as input fields, buttons, or icons. They should be written in simple language, and be descriptive yet concise. However, if additional instructions are needed to help a user complete a task, then Helper text can be used.  

The Pega platform provides several options for adding helper text within your application. Some provide a more accessible experience than others. The purpose of this article is to describe several options for helper text on controls and find the best fit for your application needs.

Types of Helper Text Available in Platform[edit]

On most Pega controls, there are several options for helper text functionality that can be added onto the control’s configuration. These are:

Always visible/In-Line  [edit]

A text input field with In-Line helper text underneath the field
A text input field with In-Line helper text underneath the field
Description[edit]

This helper text option allows for further informative text to be provided directly below the control for which it has been configured.

Guidance[edit]

Recommended

Reason[edit]

This option benefits all users, including both keyboard-only users as well as screen reader users. When a user brings focus into a field with in-line helper text configured, a screen reader announces the value of the helper text after first announcing the label of the field. Since this option appears visibly on the UI, it serves keyboard-only users and the helper text content is not hidden within attributes of elements which only a screen reader may reveal.

However, this option may not be best suited for use if trying to minimize elements on the screen, as having In-Line helper text across multiple controls on a screen may introduce further clutter.

Help Icon with overlay on focus[edit]

A text input field with a help icon on focus configured for helper text
A text input field with a help icon on focus configured for helper text
Description[edit]

The help icon with overlay on focus introduces a help icon next to the label of the control on which it has been configured. The icon itself is a focusable element, and reveals the value of the helper text to the user on focus, both visually and through a screen reader. This option is first being implemented in Platform version 8.8.

Guidance[edit]

Recommended

Reason[edit]

This option benefits all users. If the user presses Esc while focus is on the icon or tabs to a different element, the helper text disappears. This option serves both the screen reader and keyboard users, as screen readers announces the contents of the helper text on focus and keyboard users are able to visibly see and read the contents of the helper text on focus. Note that this option introduces an additional tab stop for users navigating using the keyboard Tab key, so consider your design and complexity of your page from this perspective.

Because the icon itself is a separate focusable element from the field it is associated with, the value of the helper text does not replace the actual label of the field when being announced. This minimizes confusion for screen reader users who are navigating between interactive elements in the form. Though the introduction of an icon on the form may add further elements to the UI, its small size helps it blend seamlessly into the design and structure of the form.

Smart Tip[edit]

A text input field with a Smart Tip action configured on focus
A text input field with a Smart Tip action configured on focus
Description[edit]

A Smart Tip is presented visually as a bubble of text directly above or below the field which triggered it to display.

Guidance[edit]

Recommended (see Reason section for further notes on behavior)

Reason[edit]
Customization options when configuring a Smart Tip for helper text
Customization options when configuring a Smart Tip for helper text

The information conveyed in the Smart Tip is announced to screen reader users in addition to the label of the field, and is shown visually as well, without adding further permanent elements to the UI.  

One of the benefits of using the Smart Tip for helper text is the expanded freedom of customization, both in what information is presented as well as the trigger mechanism to display. Since the Smart Tip is configured through the action set of a control, the triggering event can be customized to meet application and user needs. The recommendation to meet accessibility requirements is "On Focus".

Additionally, several other customization options are available in the Smart Tip configuration. The source for the information presented in the Smart Tip can be a reference to a message rule, property, field value, or plain text entered directly on the configuration. Using the Plain Text option is the generally recommended option for accessibility requirements. Please note, however, that currently the Smart Tip will introduce an aria-label on its configured field which will override the label for screen reader users. This is a behavior that has been filed to be addressed in an upcoming release.

Custom formatting can also be created and referenced for Smart Tips configured, to give them a look and feel that is consistent with the rest of the application. As with other action sets, conditions for the action to occur can be specified in a When rule for further specificity.

Tooltip[edit]

A text input field with a tooltip (on hover) configured
A text input field with a tooltip (on hover) configured
Description[edit]

The tooltip helper text option makes use of the "title" HTML attribute to provide additional information to the user on a given field. The way this attribute functions is by displaying the provided helper text when a user hovers on the respective field with their mouse.

Guidance[edit]

Not recommended

Reason[edit]

When a user brings focus to a field configured with a tooltip, screen readers announce the value of the tooltip after first reading the provided label of the respective field. However, using a tooltip for helper text is generally not recommended as there are several scenarios that may impede users from obtaining the necessary information they require. For example, the tooltip displayed from the title attribute is not supported in any mobile browser. Since the tooltip is only displayed on hover, keyboard users have no accessible method to see the contents of the configured tooltip, with users likely unaware it even exists on the field. In some instances, the tooltip value may override the label of the configured field, causing potential confusion for screen reader users trying to understand the purpose of the field.


Help Icon with overlay on hover[edit]

A text input field with a help icon on hover configured
A text input field with a help icon on hover configured
Description[edit]

Similar to the previous help icon helper text, the help icon with overlay on hover provides another means of relaying additional information on a field. The key difference being that the icon itself is not a focusable element.

Guidance[edit]

Not recommended

Reason[edit]

The contents of the helper text is announced by a screen reader when a user focuses on a field, following the announcement of the configured label of the field. However this helper text implementation may be a detriment to keyboard users as well because the icon is not focusable. With no method of focusing the icon/acquiring the information contained in the icon via keyboard, such users will miss potentially important and relevant information respective to the field it has been configured on.

Breakdown of Helper Text options[edit]

Helper Text Keyboard Supported Screen reader supported
Always Visible/In-Line Yes Yes
Help Icon - Overlay on focus Yes Yes
Smart Tip Yes Yes
Tooltip No Yes
Help Icon - Overlay on hover No Yes