Question about Screen Readers and Custom Styles

Dec 29, 2020

When you add a custom style you have to match it to a pre-existing style in the "Publish As" field. I'm wondering which of the labels the screen reader will read out.

If I add a new style and call it "Subtitle", I'm forced to have to match it to a pre-existing style, which is limited to "normal", "heading 1-4" and "blockquote". If I match it to say, "heading 2", will the screen reader read out: "Subtitle:" or "Heading 2:"? 

Also, is there a reason the pre-existing styles are so extremely limited? I would expect there should be titles, subtitles, numbered and bulleted lists, label, button, instruction, etc. 

3 Replies
Lauren Connelly

Greetings Organization & Staff Development!

I'm happy to help! This is a great question about naming and using Text Styles.

Storyline 360 has six built-in text styles:

  • Normal text is the default style for all text. You’ll typically use this style for body text in your project.
  • Headings 1-4 add hierarchy and structure to your content. For example, you might use Heading 1 for slide titles and Heading 2 for subtitles. You could also use Heading 3 and Heading 4 to organize lengthy text in scrolling panels or call out important content on the slide.
  • Hyperlink defines the default states for linked text—normal (unvisited), hover, active, and visited.

You can also create an unlimited number of custom text styles for other elements, including blockquotes, button labels, image captions, speech bubbles, and more. It's your choice!

Text Styles are used to properly communicate the content to assistive technology as screen readers announce content using HTML code and ARIA Labels. If items are misnamed, it could be unclear for learnings to understand the slide content's direction. You can add a style named "Subtitle," but you'll want to make sure to use Heading 2 so it's properly communicated to the learner using a screen reader. Otherwise, learners might miss the order of the content if it's not properly labeled. 

Please let me know if you have additional questions!

Organization & Staff  Development

Hi Lauren, thanks for getting back to me. I know the things you've explained. The questions I asked though were this: 

Which of the two fields does the screen reader pick up, the custom name, i.e. "Subtitle" or the text style you had to link it to, in this case, "Heading 2"? If it picks up "Subtitle" then that's fine, if it picks up "Heading 2" then what is the point making custom text styles?

And why is there such an incredibly limited set? I shouldn't have to use "Heading 2" for subtitles because it should be used for 2nd level headings. Subtitles should be used for subtitles (and titles for titles, not "Heading 1". There should also already be a button label, instruction text, etc. These shouldn't have to be custom made.

Lauren Connelly

Hello!

The screen reader will pick up the HTML code, which is Heading 2. Using a custom text style is perfect when you want to have more than one style (visual style) for Headings 1-4, paragraph text, or blockquote. By default, you have one style for each. 

It sounds like you're looking to add in your own HTML code. We don't currently offer a way to customize the code as we are using the standard tags recognized by accessibility tools. Using the tag <subtitle> isn't an HTML tag that accessibility tools will recognize. 

Here's a great resource from Deque explaining HTML tags' purpose and when to use each tag. 

Deque Accessibility Resource