Forum Discussion
Accessibility issue - page titles not unique
Hello, our client has run an accessibility report on a module I've developed using Storyline 360. They've highlighted this issue: The page title for all learning pages is the title of the course. Fix: Ensure a front-loaded, unique page title is provided for all pages which indicates its purpose.
Each slide does have its own title underneath the thumbnail in story view, which is visible in the player menu and announced by a screen reader as expected, so I don't think that's the problem. After doing some research, I think the issue could be that the <title> markup for each page is being pulled from the title I give the course when I publish it, therefore each page actually does have the same title - is this correct? If this is the case, is there any way I can give each page of the course its own unique title or is this not an option?
I've asked this by email to support too, but posting here for if anyone else has come across this. The email suggestion I've had so far hasn't solved my problem - unchecking the Title check box in player settings - this just stops the title from displaying at the top of the course, but each page still has the same <title> (the title I gave the course when publishing).
Thank you in advance for any help.
- SamHillSuper Hero
HI KayleighCardnel you are right that Storyline uses the course title in the <title> element in the HTML head, and is used on all slides.
The only way to correct an issue like this is using JavaScript. Storyline do not offer any configuration regarding the <title> element.
If, for example, you were using a Slide Template that has a Title on it, we can use JavaScript and a timeline start trigger, to get the text from that Title and then apply it to the <title> like this:
const title = document.getElementById("slide-label").innerText; document.title = title.replace('slide: ','');
However, this will then cause another issue, as your main title of the page will be duplicated multiple times. You will have the title appear in the following definitions:
- <title>This is my title</title>
- <div id="slide-label" data-ref="label" aria-live="polite">slide: This is my title</div>
- <span>This is my title</span>
It would be best first to determine what the title of each page should be and if it is ok to have the HTML Title and the Slide Title the same. If not, then what should the <title> be?
Another option could be using a Storyline variable to define a unique HTML page title. For example, you could define a text variable in Storyline called "pageTitle". Ensure that on each slide, when the slide loads, the variable is updated with the required label.
Use the Storyline variable, we can then use JavaScript again to set the <title> of the page:
const player = GetPlayer(); document.title = player.GetVar("pageTitle");
Add this JavaScript to the MASTER SLIDE and add a trigger that runs the script, every time the pageTitle variable is changed.
- KayleighCardnelCommunity Member
Thank you very much for your detailed reply. I'm going to try the second option with a few slides from the module to see if it works. How can I check that a slide has the unique title that I set the variable "pageTitle" to? Would I be able to publish to review 360 and inspect the html to double check this? Thank you again.
- SamHillSuper Hero
If you don't have access to a screen reader, you can hit F12 (when the course is open), select the console tab, then add the following script and see what the value is when you hit ENTER.
document.title