Forum Discussion

MikeImage's avatar
MikeImage
Community Member
11 days ago

Custom JavaScript to change Pronunciation of acronyms for Jaws users

Is there a way to use a JavaScript to change pronunciation of acronyms in Storyline so Jaws user will hear something different? I would like Jaws to read the acronyms "REER" as "RÉ R" for example.
SamHill's avatar
SamHill
Super Hero
7 days ago

Hi MikeImage​ , here's some HTML (+CSS) that demonstrates a technique. This is used frequently in web development, but very rarely on individual words. The reason this technique isn't used for words, is because not all screen readers are audio, some are braille readers, and so if we spell words phonetically for the benefit of screen readers, it wouldn't make much sense to braille readers. Therefore, rather than a direct replacement of the word, it may need a complementary "(pronounced as RÉ R)"

I've tried aria-label, but not all SR will read that instead of the text content within the container, and so I feel this method works better.

This could be implemented using JavaScript, by injecting the STYLE and by manipulating every instance of REER at runtime. Not a trivial thing to do, but all possible.

Another option (no JS) is to just explain to all users, on the first instance of "REER" how it is pronounced, phonetically. That way, when everybody reads it screen reader or no screen reader, they understand how it should sound.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
    </style>
</head>
<body>
    <p>This is a demonstration of how this might be implemented:</p>
    <p>The "REER" is using an attribute called aria-hidden="true" which hides the content from screen readers.</p>
    <p>The "RÉ R" is using a CSS style to hide the content visually, but it remains visible for screen readers.</p>
    <p><span aria-hidden="true">REER</span></p>
    <p><span class="sr-only">RÉ R</span></p>
    <p>In summary, screen reader users will see "RÉ R" and graphical display users will see "REER".</p>
    <p>Or using the example that would better support braille readers to.</p>
    <p>REER<span class="sr-only"> (pronounced as RÉ R)</span></p>
</body>
</html>