Changing Heading Tags

Hi everyone,
Quick question. If there anyway to change the Heading Levels of Articles, Blocks and Components? They currently read H2, H3, H4. In the way I build, I essentially use one article per component so I can apply specific backgrounds to each component (every second one is white).

Therefore I only use Component Titles for a couple of reasons. One, I want the content and the title to have proper spacing and two, it’s way more time efficient to just use the component than having to go into the Article.

The problem is WCAG recommends not skipping Heading tags. With my setup, I go from H1 (page header) to H4 (Component title). My client needs it to go H1-H2 which means I have to put everything in the Article.

I’d love to just be able to set the component at H2 because I NEVER use the article or block titles (normallY).

S

1 Like

Hello Steve,

I don’t think there is a way to apply custom heading levels to Article, Block and Component titles at this point. I recently filed a support ticket with Evolve, asking for the ability to apply custom heading styles to various component blocks (as the default H4 was causing a skipped heading issue in my course).

Agnieszka

Hi Steve, I have the same issue as you and would also like to be able to set the heading level at a component level.

I’m just about to embark on a test to see if I can restyle the theme in a way that looks identical to how it looks now, but by using the Artical to display the titles so that they are H2.

As it stands, my Headings go from H1 for the title at the top to H4 for all of the ‘screens’ in my courses.

Thanks,

Barry

1 Like

Just saw this Barry - assume you know this is taken care of in Evolve 10?

1 Like

Hi Steve, no, I did not know this had been fixed for Evolve 10. I’m buiding a course now where I’m using the Article Headings instead of Block or Component headings, so that I have H2 tags.

As it stands I cannot see how the Heading tags can be customised.

Thanks for the heads up as I will continue looking.

@hbailey Maybe I’m missing something, but I cannot see a release note for this update.

Thanks,

Barry

Ah, it’s automatic!

For anyone else reading this. If you add a title to an Article Display Title it will be an H2 tag. If you leave the Article Display Title blank and add a title to a Block Display Title , that will be an H2 tag instead. In the past, the Block Display Title was being set as an H3 tag and if you added a title to a component, this would be set as an H4 heading. Therefore incorrectly setting the page’s hierarchy.

It’s great that it is now automatic.

I’m really pleased that Header tags are now nested appropriately in the pages output, as this will help screenreader users navigate our courses.

Yeah, I feel like they haven’t done a good enough job promoting how BIG this change is. Not having to use Article/Block titles now is HUGE (bigger than the UI if you ask me).

When I commented on an Evolve ee’s LI post, they told me to look for it in the 10 announcement - even then I completely missed it even when I was looking for it.

I still can’t find the announcement, but it’s great to see it fixed.

Two big issues (in my opinion) still need addressing.

Issue 1. The bottom navigation bug where a screen reader user is not taken to the start of a topic when using the footer navigation buttons. The reason it’s not be fixed sooner is because not enough people are complaining about it! It’s an awful bug that renders these courses useless :frowning: I think it should be fixed sooner and I raised this in July 2021.

Issue 2. The paragraph spacing issue where you have no choice but to add a blank paragraph space between paragraphs, which is read out as BLANK by the screen reader. It’s not a massive issue, but could you imagine having to hear the word BLANK between every paragraph in the text you are reading?

I’ve raised these issues with Evolve support but haven’t got anywere.

Hi all, the heading tag improvements were in the release notes for Evolve 9.1. We also made announcements elsewhere regarding this.

Please bear in mind, we regularly address accessibility issues but we are a small team and there is always more work to do, and accessibility has to compete with every other area of development we have to work on.

We are definitely aware of the multi page focus issue and hope to address that soon.

With regards to screen readers reading the word ‘blank’ in paragraph spaces - in my experience this is specific to NVDA currently. It’s a harder task making fixes for specific readers (and this isn’t actually a bug per se).

1 Like

Hi @Sam_Cook_Evolve_QA, thank you for your reply.

Let me start by saying that I love Evolve and use it most days and it’s my favourite tool to use.

But it can be tough explaining issues that I cannot fix, and I always anticipate the multi page focus issue being reported. For me it’s a big issue as it’s hard enough navigating a web page with a screen reader as it is, without it randomly jumping to anywhere other than the top of the screen.

I’ll check the reading of the word ‘blank’ in paragraph spaces with JAWS and will get back to you, but I thought it was the case for NVDA, JAWS and Windows Narrator.

Adding a margin to paragraphs is simple CSS, but I guess if you add this now it would muck up loads of courses that have already been built. Could it be added with a defualt value of 0px?

Thank you.

1 Like