Focus Order and Markup Accessibility Queries

Hello, I am producing a series of learning modules in Evolve and the client has performed an accessibility audit on the solution. They have identified some bugs that I have been able to resolve, but I would appreciate any guidance on the below two:

1) The focus in the screen reader doesn’t move to the new content after submitting an answer. In the module, I have created triggers to bring up content after questions to help break up the experience. The modules use a range of MCQs and Text Input questions. The feedback to questions is also presented inline. Has anyone else experienced issues and found any workarounds?

2) Incorrect heading levels appear on the Tabs interaction. It has been identified that the Tab Panel Title is pulling through as a h1 heading where they requested that this be pulled through as a h2 heading. You can’t delete the title completely so I am trying to find a fix. I had a look in the theme settings and couldn’t see anything obvious. Any ideas?

The modules have been tested with JAWS and NVDA in both Edge and Chrome.

Thanks in advance for the help!

1 Like

Hey @Sam,

Unfortunately, using Logic to make things appear can mess with the page structure and focus order for screen readers so we can’t give any guarantees for content remaining fully accessible when Logic is used like this. Under non-logic circumstances, inline feedback and page structure generally shouldn’t cause any issues.

For the Tab panel title - all the headings tags in Evolve are set dynamically, so it’s not something you can adjust manually. I just did a quick test of tabs in a couple of different courses and each time the tab panel title had an h4 heading. If you want, you can DM me a link to your course and I can take a look at the tabs component.

Cheers-Sam

1 Like

Hi @Sam_Cook_Evolve_PO

Thanks for getting back to me on this. Would you mind sending me a DM as I’m not sure I have the permissions yet to create new conversations.

Thanks :slight_smile:

It’s hard to say for sure without seeing the course in question whether this will help or not - but if, using Logic, you want to reveal some content as a result of an event and send the learner to it you should add a slight delay to the ‘navigate to’ Logic action.

The only time this should happen is if you haven’t set any page/article/block display titles on the page and the tabs component has no display title.

As @Sam_Cook_Evolve_PO points out, heading levels are set automatically - so if you have, say, a page display title, no article title, no block title but have set a component display title then the heading order will be set to:

  1. page display title
  2. tabs component display title
  3. tab panel title

hope this helps!

2 Likes

@Matt_Leathes your suggestion of combining the text component above with the tabs component worked a treat, so thanks

2 Likes

I’d also generally recommend having either a page display title or hero image title set on every page - just so there’s a ‘top level’ title that has a higher prominence in the heading hierarchy than all the other display titles on the page. That way if the user brings up the list of headings in their screenreader it gives them a better sense of the structure.

4 Likes

Very nice, thank you. This solves a few issues our accessibility testers also discovered in a sample course. Cheers!

2 Likes