Skip to main content

Screen readers use HTML Section Heading elements (e.g. h1, h3, etc.) to specifically announce content as headings. PX is using div elements (e.g. .px-tooltip-title-wrapper) as containers for titles, so the screen reader does not read them as headings. This reduces accessibility. Consider the Guide tool tip, for example. The distinction between the title and the body text is pretty critical.

 

The workaround is to disable the title and manually code a heading element into the body of the engagement. This works in theory, but in practice this would need to be done for every localization version of every engagement, making it relatively impractical.

Hi @rschlette ,

 

Where are we facing this issue? Are we facing the issue in Engagement in default language (i.e. English) or a Localized Engagement?

@aharkut Yes, all of the above. The customer is seeing this in any engagement, whether default or localized.

Following up here, manually adding <h2> elements in the source code for tooltips and saving as a template, allows the customer to use this going forward on any new guides. However, a new template won’t help with any previously created guides with multiple steps and localizations these would all need to be recreated.

from the Customer:

“The easiest workaround would be for Gainsight to add this to any Divs used as the title for tooltips, guides, dialogs: role="heading" aria-level="2"

This keeps all the CSS intact and doesn’t shift things around like adding an H2 tag, but it does give screen readers the information to treat these elements as headings. This could also be applied to all the legacy tooltips/dialogs and localized versions without causing any effort to update CSS.

<div role="heading" aria-level="2" class="px-dialog-title" >Accessible Titles!</div>”

Terms & ConditionsCookie settings