Accessibility of in text glossary terms with tooltips


I’d appreciate some help with an issue I’ve picked-up when using Windows Narrator and I believe NVDA and the Chrome reader.
The issue is that the team I’m working with have included tooltips for definitions of words when using these screen-readers it just goes past them so one doesn’t know that there is an option to click and read a definition. It is possible though to force the cursor to focus and the word is highlighted and underlined in an orange-red (which has sufficient contrast) and the the pop-up appears with white text on a black background and a yellow outline.

So it’s just the focus with the screen reader during the sentence, which is an issue.
I’m honestly not sure whether its something to do with my standard screen-reader settings
(I’ve just adjusted pitch and voice speed for Narrator) or whether there is something else we can do. There is also a glossary though this isn’t immediately accessible at present.

The final (UK based) client sign-off requires that the course pass WCAG 2.1 AA. Any guidance .

Could we have a link to the course please Kate?

HI Helen,
I sent what I hope was a private message because of client privacy concerns.

1 Like

Thank you Kate, yes that worked.

Here’s the reply from our Accessibility manager:

Hi Kate, unfortunately the tool tip functionality and glossary extension are currently not compatible with WCAG 2.1 compliance. We regularly make updates to Evolve to make the output more accessible (a significant accessibility feature is due to be released next week, for example) and I will ensure these two issues are added to our support board related to accessibility issues. We have created two courses that show all the components and extensions that can be used for accessibility and some ways to think about presenting content which you can find here Evolve and Accessibility : Intellum

In terms of an alternative way to display these definitions I would suggest these possibilities:

  • Include the definitions as plain text in brackets after the word
  • Use the Action Button component to display a list of definitions contained in a hidden text component (you can see an example of this in the ‘Providing Alternative Versions of Diagrams’ section of the ‘Evolve and Accessibility 1’ course linked to above)
  • Use the About extension to contain a list of definitions on a separate page. You can use the Links component to create a link to the About page within the main content

I hope this helps, and please keep an eye on Evolve release notes for future accessibility fixes. Thanks - Sam Cook - Senior Quality Assurance Engineer’


Many thanks @hbailey and Sam Cook. I appreciate the effort you’ve put in to provide us with such a comprehensive, helpful answer.

1 Like

Hello Helen

I was hoping that you might be able to assist me again with regards to some further accessibility guidance.

Im working with an agency on behalf of two UK institutions and to date while one recommended using Evolve, their reviewers have raised concerns about both the use of the accordion for covering case studies (or other large components of content), and the use of large images with text in the Narrative Component to make it accessible. They specifically object to the scrolling required in order to navigate through this option.

Is there any other component or specific adaptation,your team could advise us on in order to reduce the scrolling, comply with accessibility-WCAG 2.1AA and meet the client’s requirements?

Kind regards
Kate Whittaker

Hello I forgot to mention that the content was originally built in Articulate Rise but has been adapted by a team who is more familiar with Articulate than Evolve.

Kind regards
Kate Whittaker

Hi Kate,

It depends what needs to go into the case studies media-wise and how it needs to be presented.

You don’t have to have images in the Narrative or Carousels, but if they don’t like the scrolling, then how about Tabs, or Text Reveal?

Thanks Helen.
I think we’ve found a workable workaround.

Kind regards