Accessibility concerns with course name as title & H1, and H1 tags with slide titles via Heading 1 style

Mar 25, 2024

When using a screen reader, the course name is perceived as an H1 tag (heading 1). But this is not how heading 1 is supposed to work. Headings are supposed to be structural -- to structure the content on the slide. If the course title is the Heading 1, then you would need to start every slide with a Heading 2 (as I've seen recommended here) which is just silly. You don't start with a Heading 2 -- you start with a Heading 1, on the slide's content, not the course name. The slides themselves should have one Heading 1. Using the Heading 1 style in the Title content placeholder (the first "text box" on every slide) will create H1 tags. If the title of the course (which is always the same) is also a Heading 1, you don't have a proper structure anymore.

Using the traditional website methodology of titles vs. headings, the course name, being the same on all pages in the course, should be the page Title, not a heading. The course title is making its way into the page HTML into the Title tag, but it's also shown on each page as a Heading 1. What was the thinking there? It seems to be a huge mismatch in function.

Also, I think the Heading 1 style should be applied to Slide Master Title placeholders in the Storyline templates from Articulate. Right now, most templates (if not all) do not utilize the Heading 1 style in the Title content placeholder. To me, this creates a lot of rework for us (because if we want Headings of any kind, H1, H2, etc., we have to manually apply these in the slide master and layouts), and doesn't exhibit best practices for accessibility.

If anyone has suggestions or feedback, love to hear them.

Thanks muchly.

-Karin

headings_on_slide.png

2 Replies

Sam Hill
Hero

1 month ago03/26/24 at 12:33 am (UTC)

Hi Karin, I think it may be because the title is in a different region to the main content, therefore the main content region can then use the H1 element.

I don't really use the SL player structure and so haven't had to think this one over before, but I would suspect that that is the rationale.

You are right that the title is also in the HTML title element, but it is also useful to have a visual representation of the title on the course and I can see the rationale for choosing H1 for the title of the course.

In my opinion, because they are in separate regions, and the main region is identified as "Main region" it would not cause too much confusion for assistive tech users.

Ideally, I think an option to set that title to aria-hidden=true would be good, as it does kind of sit in no mans land between the hamburger button and the navigation region.

If you'd like some a JavaScript snippet to hide that element from assistive technology, add this to your Master Template on timeline start:

if(typeof window.courseTitleSet === 'undefined')
{
    var coursetitle = document.querySelector('h1.presentation-title');
    coursetitle.setAttribute('aria-hidden',true);
    window.courseTitleSet = true;
}

Karin Carlson
Author

29 days ago04/01/24 at 9:20 pm (UTC)

Thanks for the great tip! I was doing some additional testing today, and it appears that the course title that's just above the main content doesn't get read on every slide as it used to (but is still marked as a heading 1 if you're using heading navigation tools with your AT). So, it's not as troublesome to have it there as it used to be, or it least it appears that way for now.