Screen reader only text

A technique that is commonly used in web development, for accessibility, is to provide text that is available only to screen readers. The text is visually hidden, but can be accessed by text-to-speech and text-to-braille readers.

An example usage may be, an image has been used as the heading of the page (maybe a specific font was required). Whilst an ALT text value on the image can describe it and relay the text contents, it cannot provide the same semantics an <H1> element can. Heading elements provide essential structure to the document for assistive tech users, and also provide really handy shortcuts for navigating through a document.

<style>
    .screen-reader-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
</style> <img src="https://thumbs.dreamstime.com/z/multi-ethnic-group-people-holding-text-diabetes-45539467.jpg?ct=jpeg" alt="" />
<h1 class="screen-reader-only">Diabetes</h1>

Whilst we can't leverage CSS in Storyline, we can achieve the same outcome for accessibility. Using the same example illustrated above, we have a visual heading.

The first step would be to ensure the image itself, is not visible to screen readers, by right clicking the image, selecting Accessibility and ensuring that the checkbox labelled Object is visible to accessibility tools is not selected (check mark is cleared).

The next step is to relay this same information to screen readers. Start by inserting a text box on the slide and enter the same text that appears within the image. Then select the text you have just entered using CTRL+A. Then from the Text Styles drop-down menu, select the appropriate mark-up, in this instance, Heading 1.

The next step is to check your Focus Order and make sure the new text H1 is in the correct reading order for screen readers.

The final step is to emulate the "visually hidden" component of the solution. The most common methods I use is to either:

Position the text behind the image that it represents, or
Position off the slide (the content will still be accessible, even when position off screen).

My first preference is to try and keep on the slide, and in a similar location to the image, but sometimes this is not possible, due to animation that is occurring on the slide, as I like to have screen reader text available right away.

Following are the results. The video demonstrates the difference between ALT text and hidden text and the benefits of semantic mark-up.

Problem embedding the YouTube link, so here it is: https://youtu.be/DlpCXSeZQkw