Accessibility - Screen Reader

Accessibility - Screen Reader

by Grace Naschtz -
Number of replies: 6

Hi Everyone!

I have some students that have learning disabilities and I've been looking for a plugin that enables text to speech while using the quiz option. 

Quizzes are normally Java protected with a screen popup so students can't really copy/paste text which disables the feature of Text to Speech which is available on Windows 10.

Does anyone know of a plugin that can be used without removing the security feature of the screen popup and JavaScript? These students really need to be able to hear the text as their learning disability effects their reading abilities.


Thanks!

Average of ratings: -
In reply to Grace Naschtz

Re: Accessibility - Screen Reader

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hello Grace,

I don't think you can use a screen reader with the "Full screen pop-up with some JavaScript security" option. Even if it was possible, screen readers might not interpret everything in a quiz, for example certain answers, images and buttons.

Why not just read the text yourself, as follows:
  • Go to a quiz
  • Create a block
  • Configure block / Where the block appears / Display on page types: Any quiz module page
  • Put the code below in the HTML of the block's content.
Here's what you'll get:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {

        var utter = new SpeechSynthesisUtterance();

        // MOST ELEMENTS
        $("span, p, h1, h2, h3, h4, div.state, div.grade, div.prompt, div.rightanswer, div.r0, div.r1, div.specificfeedback, div.generalfeedback, tr, .questionflag.editable, div.validationerror").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('background-color', 'yellow');
            $(this).children("th").css('background-color', 'yellow');
            $(this).children("td").css('background-color', 'yellow');
        });
        $("span, p, h1, h2, h3, h4, div.state, div.grade, div.prompt, div.rightanswer, div.r0, div.r1, div.specificfeedback, div.generalfeedback, tr, .questionflag.editable, div.validationerror").click(function() {
            $(this).css('background-color', 'yellow');
            $(this).css('cursor', 'default');
            utter.text = $(this).text();
            window.speechSynthesis.speak(utter);
        });
        $("span, p, h1, h2, h3, h4, div.state, div.grade, div.prompt, div.rightanswer, div.r0, div.r1, div.specificfeedback, div.generalfeedback, tr, .questionflag.editable, div.validationerror").mouseout(function() {
            $(this).css('background-color', 'initial');
            $(this).children("th").css('background-color', 'initial');
            $(this).children("td").css('background-color', 'initial');
        });

        // BUTTON: CHECK
        $("[value='Check']").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('color', 'yellow');
            utter.text = "Check";
            window.speechSynthesis.speak(utter);
        });
        $("[value='Check']").mouseout(function() {
            $(this).css('color', 'white');
            $(this).css('cursor', 'default');
        });

        // BUTTON: FINISH ATTEMPT
        $("[value='Finish attempt ...']").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('color', 'yellow');
            utter.text = "Finish attempt";
            window.speechSynthesis.speak(utter);
        });
        $("[value='Finish attempt ...']").mouseout(function() {
            $(this).css('color', 'white');
            $(this).css('cursor', 'default');
        });

        // LINK: FINISH ATTEMPT
        $(".endtestlink").mouseover(function() {
            $(this).css('background-color', 'yellow');
            $(this).css('cursor', 'help');
            utter.text = "Finish attempt";
            window.speechSynthesis.speak(utter);
        });
        $(".endtestlink").mouseout(function() {
            $(this).css('background-color', 'initial');
            $(this).css('cursor', 'default');
        });

        // MESSAGE: CLEAR MY CHOICE
        $("a:contains('Clear my choice')").mouseover(function() {
            $(this).css('background-color', 'yellow');
            $(this).css('cursor', 'help');
            utter.text = "Clear my choice";
            window.speechSynthesis.speak(utter);
        });
        $("a:contains('Clear my choice')").mouseout(function() {
            $(this).css('background-color', 'initial');
            $(this).css('cursor', 'default');
        });

        // PHOTO
        $("[alt='A version of Moodle']").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('border', '8px solid yellow');
        });
        $("[alt='A version of Moodle']").click(function() {
            $(this).css('cursor', 'default');
            utter.text = "A photo of Martins kids";
            window.speechSynthesis.speak(utter);
        });
        $("[alt='A version of Moodle']").mouseout(function() {
            $(this).css('border', 'none');
        });

        // BUTTON: RETURN TO ATTEMPT
        $("button:contains('Return to attempt')").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('background-color', 'yellow');
            utter.text = "Return to attempt";
            window.speechSynthesis.speak(utter);
        });
        $("button:contains('Return to attempt')").mouseout(function() {
            $(this).css('background-color', '#ced4da');
            $(this).css('cursor', 'default');
        });

        // BUTTON: SUBMIT ALL AND FINISH
        $("button:contains('Submit all and finish')").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('background-color', 'yellow');
            utter.text = "Submit all and finish";
            window.speechSynthesis.speak(utter);
        });
        $("button:contains('Submit all and finish')").mouseout(function() {
            $(this).css('background-color', '#ced4da');
            $(this).css('cursor', 'default');
        });

        // BUTTON: FINISH REVIEW 
        $("[value='Finish review']").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('color', 'yellow');
            utter.text = "Finish review";
            window.speechSynthesis.speak(utter);
        });
        $("[value='Finish review']").mouseout(function() {
            $(this).css('color', 'white');
            $(this).css('cursor', 'default');
        });

        // BUTTON: RE-ATTEMPT QUIZ
        $("button:contains('Re-attempt quiz')").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('background-color', 'yellow');
            utter.text = "Re-attempt quiz";
            window.speechSynthesis.speak(utter);
        });
        $("button:contains('Re-attempt quiz')").mouseout(function() {
            $(this).css('background-color', '#ced4da');
            $(this).css('cursor', 'default');
        });

        // BUTTON: ATTEMPT QUIZ NOW
        $("button:contains('Attempt quiz now')").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('background-color', 'yellow');
            utter.text = "Attempt quiz now";
            window.speechSynthesis.speak(utter);
        });
        $("button:contains('Attempt quiz now')").mouseout(function() {
            $(this).css('background-color', '#ced4da');
            $(this).css('cursor', 'default');
        });

        // BUTTON: CONTINUE THE LAST ATTEMPT
        $("button:contains('Continue the last attempt')").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('background-color', 'yellow');
            utter.text = "Continue the last attempt";
            window.speechSynthesis.speak(utter);
        });
        $("button:contains('Continue the last attempt')").mouseout(function() {
            $(this).css('background-color', '#ced4da');
            $(this).css('cursor', 'default');
        });

        // BREADCRUMB
        $(".breadcrumb-item").mouseover(function() {
            $(this).css('cursor', 'help');
            $(this).css('background-color', 'yellow');
            $(this).find("a").css("cursor", "help");
            utter.text = $(this).find("a").text();
            window.speechSynthesis.speak(utter);
        });
        $(".breadcrumb-item").mouseout(function() {
            $(this).css('background-color', 'initial');
            $(this).css('cursor', 'default');
        });

    });
</script>

<h4 class="questionflagtext" style="position:absolute;top:0;">Text to speech block</h4>
Average of ratings: Useful (1)
In reply to Dominique Bauer

Re: Accessibility - Screen Reader

by Beatriz Rojo -
This is great, Dominique, thanks for sharing!
Do you know if it's possible to change the code so that the language is Spanish?
Average of ratings: -
In reply to Beatriz Rojo

Re: Accessibility - Screen Reader

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hello Beatriz,

Thank you for your comment.

I improved the code and made it read automatically the language in which the page is displayed according to the active language pack.

I put the code in a block because it works well and I also found it to be practical.

From a programming point of view, the code is simple. It just uses the SpeechSynthesisUtterance interface. 33 different languages ​​are available in Chrome, 49 in Firefox and 0 (!) in Internet Explorer.

From the user point of view, I think the code is interesting because it is a custom algorithm for Moodle. It does not require any plugin or extension installation and you can easily modify it if necessary because it is very simple.

You will find a new 10 minute video, the code in a txt file and an example of a quiz with the Browser security parameter set to 'Full screen pop-up with some JavaScript security', in the course Accessibility ↗ where are installed the language ​​packs English, Spanish international and Mexican, Portuguese, German, French and Russian. So you can try the quiz in either of these languages ​​by choosing the language from the menu at the top of the screen on the main course page.

The code also works when the browser security parameter is set to "none". In fact, if you place the block in the course, it works fine on all pages, subject to some improvements.

One drawback, which I believe is not major, is that the code does not read long paragraphs at once. It must be cut into small pieces of one or a few sentences at most, delimiting them with span tags.
Average of ratings: Useful (2)
In reply to Dominique Bauer

Re: Accessibility - Screen Reader

by Beatriz Rojo -
Thanks, Dominique, I'll test it and read the further information you indicate.
Regarding the "drawback", it's actually a sensible constraint for well-written texts. smile
Average of ratings: -
In reply to Dominique Bauer

Re: Accessibility - Screen Reader

by Karen Sawyer -

Hello Professor Bauer,

I am not a coding person so appreciate the code you've provided.

I have followed the steps as written (I assume "create a block" meant an html block) a few times, but when I start the Quiz attempt do not hear the text spoken.  I also tried adding the Block at the course level so it would apply to all the pages, but still no voice.

Is there something else that must be done when the student is on the page to activate the feature?  Is it browser-dependent? 

I am not a Moodle Site Admin but a Category Admin, if that makes a difference in this situation.

Gratefully,

Karen

Average of ratings: -
In reply to Karen Sawyer

Re: Accessibility - Screen Reader

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hello Karen,

The code works in Chrome. It should work in Firefox too, but I'm not sure. In other browsers, I don't know. To limit the possible sources of the problem, is it possible for you to try it in Chrome first?

Make sure the block containing the code is displayed during the quiz. Here are the steps:

  1. Edit the quiz.
  2. Add an HTML block.
    1. Add the code in the HTML of "Content" of the block.
    2. Set "Where this block appears" / "Display on page types" to "Any quiz module page".
  3. Run the quiz.
  4. Make sure that the block is displayed during the quiz.

The code may stop working at some point for some reason. Close and restart the Chrome browser. This should re-enable screen reading.


Average of ratings: -