Moodle
  1. Moodle
  2. MDL-30895

provide easier chat reading for screen reader users in accessible chat activity

    Details

    • Story Points:
      13
    • Rank:
      51648
    • Sprint:
      FRONTEND Sprint 3

      Description

      While the accessible version of the Chat activity is accessible, it could be more usable. The way to navigate the discussion is a bit cumbersome to listen to for screen reader users because of the use of definition lists.

      It might be better to store the chat messages in a table with three columns. Column one would be a header column and include the poster's name. Column 2 would be the message. Column 3 would be the time stamp. This would allow screen reader users to simply navigate up and down the second column and easily hear the most pertinent information - the person's name and their message.

      The current definition lists, while semantically correct, are quite verbose and cumbersome to navigate for screen reader users.

        Activity

        Hide
        Frédéric Massart added a comment -

        Passing on to Raj because he his working on similar issues.

        Show
        Frédéric Massart added a comment - Passing on to Raj because he his working on similar issues.
        Hide
        Rajesh Taneja added a comment - - edited

        Hello Greg,

        I was revisiting this issue and it seems changing definition list to table might not look reasonable. Also, it might not be easy to show events (User xxx has left this chat) in table form.

        Although, I can add a checkbox to let user turn-off time for better accessibility. What do you recommend?

        Show
        Rajesh Taneja added a comment - - edited Hello Greg, I was revisiting this issue and it seems changing definition list to table might not look reasonable. Also, it might not be easy to show events (User xxx has left this chat) in table form. Although, I can add a checkbox to let user turn-off time for better accessibility. What do you recommend?
        Hide
        Greg Kraus added a comment -

        Hi Rajesh,

        One of my colleagues, a screen reader user, and I came up with the table idea to make it easier to quickly navigate the discussion. If you make the table like this

        <tr>
        <th scope="col">Person</th><th scope="col">Message</th><th scope="col">Time</th>
        </tr>

        <tr>
        <th scope="row">Greg</th><td>Hi!</td><td>12:00</td>
        </tr>

        <tr>
        <th scope="row">Sam</th><td>Hi back at you!</td><td>12:01</td>
        </tr>

        When the table is set up this way, the screen reader user can point their virtual cursor at the second column and simply scroll up and down that column. When they do that the screen reader will automatically read the person's name along with the message. The name is automatically read because they have focused to a row with a different heading. This way, also, the time is only read if the person wants to read it. Most people probably don't want to hear the time information when following a conversation.

        In the case of a system message, you could make the line something like this.
        <tr>
        <th scope="row">Notification</th><td>Greg has left the room</td><td>12:02</td>
        </tr>

        Show
        Greg Kraus added a comment - Hi Rajesh, One of my colleagues, a screen reader user, and I came up with the table idea to make it easier to quickly navigate the discussion. If you make the table like this <tr> <th scope="col">Person</th><th scope="col">Message</th><th scope="col">Time</th> </tr> <tr> <th scope="row">Greg</th><td>Hi!</td><td>12:00</td> </tr> <tr> <th scope="row">Sam</th><td>Hi back at you!</td><td>12:01</td> </tr> When the table is set up this way, the screen reader user can point their virtual cursor at the second column and simply scroll up and down that column. When they do that the screen reader will automatically read the person's name along with the message. The name is automatically read because they have focused to a row with a different heading. This way, also, the time is only read if the person wants to read it. Most people probably don't want to hear the time information when following a conversation. In the case of a system message, you could make the line something like this. <tr> <th scope="row">Notification</th><td>Greg has left the room</td><td>12:02</td> </tr>
        Hide
        Rajesh Taneja added a comment -

        Thanks for the feedback Greg,

        Will check with integrators to see if we can change chat html. As this can break existing Theme's.

        Show
        Rajesh Taneja added a comment - Thanks for the feedback Greg, Will check with integrators to see if we can change chat html. As this can break existing Theme's.
        Hide
        Rajesh Taneja added a comment -

        Added integrators to discuss best resolution for this issue.

        Show
        Rajesh Taneja added a comment - Added integrators to discuss best resolution for this issue.
        Hide
        Dan Poltawski added a comment -

        Without looking at the html changes.

        Can we change the html in the "accessible chat activity" to make it work as advertised - I think so.

        Show
        Dan Poltawski added a comment - Without looking at the html changes. Can we change the html in the "accessible chat activity" to make it work as advertised - I think so.
        Hide
        Michael de Raadt added a comment -

        Raj has not been able to work on this. I'm cleaning it and preparing it for the new Scrum backlog process.

        Show
        Michael de Raadt added a comment - Raj has not been able to work on this. I'm cleaning it and preparing it for the new Scrum backlog process.
        Hide
        Michael de Raadt added a comment -

        I'm shifting this issue into a new Epic issue, where we are collecting together accessibility issues.

        Show
        Michael de Raadt added a comment - I'm shifting this issue into a new Epic issue, where we are collecting together accessibility issues.
        Hide
        Martin Dougiamas added a comment -

        Bumping this to the current sprint because the solution is there (thanks Greg) and coding it will be straightforward.

        Show
        Martin Dougiamas added a comment - Bumping this to the current sprint because the solution is there (thanks Greg) and coding it will be straightforward.
        Hide
        Jérôme Mouneyrac added a comment -

        If we change the list for a table then it will break the existing chat themes, especially the third party ones. Is that ok? Imo if the issue is back-ported to all supported branches it's not a viable solution.
        I tried to put the current template content into the first cell, but I still lose part of the css. So I can't see changing list into table working.

        Another possibility that I can see is duplicating the info into a hidden panel for people to read it easily (not sure that it's accessible friendly).

        Finally we can make a specific accessible theme (with a bit of specific "hack" js for this accessible theme) - it may be the best option for now.

        Show
        Jérôme Mouneyrac added a comment - If we change the list for a table then it will break the existing chat themes, especially the third party ones. Is that ok? Imo if the issue is back-ported to all supported branches it's not a viable solution. I tried to put the current template content into the first cell, but I still lose part of the css. So I can't see changing list into table working. Another possibility that I can see is duplicating the info into a hidden panel for people to read it easily (not sure that it's accessible friendly). Finally we can make a specific accessible theme (with a bit of specific "hack" js for this accessible theme) - it may be the best option for now.
        Hide
        Greg Kraus added a comment -

        If theme support is a concern let me go take another look at it to see if there is another solution that doesn't require as many fundamental changes.

        Show
        Greg Kraus added a comment - If theme support is a concern let me go take another look at it to see if there is another solution that doesn't require as many fundamental changes.
        Hide
        Jérôme Mouneyrac added a comment -

        Hi Greg, my bad I was working on the non accessible chat.

        Show
        Jérôme Mouneyrac added a comment - Hi Greg, my bad I was working on the non accessible chat.
        Hide
        Jérôme Mouneyrac added a comment - - edited

        Greg I didn't add the notification string (first column). I think the notification messages are enough (user1 entered, user1 left, user1 beep you all...).

        Show
        Jérôme Mouneyrac added a comment - - edited Greg I didn't add the notification string (first column). I think the notification messages are enough (user1 entered, user1 left, user1 beep you all...).
        Hide
        Andrew Davis added a comment -

        This issue is missing testing instructions.

        I was going to say that you should be using html_writer but that whole area is riddled with echo html in strings so what you have is fine.

        You probably want to remove the commented out code //$output->basic = '<dl><d....

        I'm not particularly bothered which you choose but choose one style of white spacing around the string concatenation.

        <td class="cell c3">'. $message->strtime .'</td>

        <td class="cell c3">' . $message->strtime . '</td>

        Show
        Andrew Davis added a comment - This issue is missing testing instructions. I was going to say that you should be using html_writer but that whole area is riddled with echo html in strings so what you have is fine. You probably want to remove the commented out code //$output->basic = '<dl><d.... I'm not particularly bothered which you choose but choose one style of white spacing around the string concatenation. <td class="cell c3">'. $message->strtime .'</td> <td class="cell c3">' . $message->strtime . '</td>
        Hide
        Andrew Davis added a comment -

        Put this up for integration review once these things have been dealt with.

        Show
        Andrew Davis added a comment - Put this up for integration review once these things have been dealt with.
        Hide
        Jérôme Mouneyrac added a comment -

        thanks Andrew.

        Show
        Jérôme Mouneyrac added a comment - thanks Andrew.
        Hide
        Jérôme Mouneyrac added a comment -

        Sent to integration. Greg that would be good if your colleague could test it (either you can cherry-pick the changes, either you can wait for the issue to be "Waiting for testing" status then go on qa.moodle.net).

        Show
        Jérôme Mouneyrac added a comment - Sent to integration. Greg that would be good if your colleague could test it (either you can cherry-pick the changes, either you can wait for the issue to be "Waiting for testing" status then go on qa.moodle.net).
        Hide
        Sam Hemelryk added a comment -

        Thanks guys - this has been integrated now

        Show
        Sam Hemelryk added a comment - Thanks guys - this has been integrated now
        Hide
        Sam Hemelryk added a comment -

        Thanks Jerome - passing this now.

        Show
        Sam Hemelryk added a comment - Thanks Jerome - passing this now.
        Hide
        Dan Poltawski added a comment -

        Cảm ơn!

        Your changes have now been merged upstream in git and will be available on the Moodle download sites shortly!

        Một hai ba, yo

        Show
        Dan Poltawski added a comment - Cảm ơn! Your changes have now been merged upstream in git and will be available on the Moodle download sites shortly! Một hai ba, yo

          People

          • Votes:
            1 Vote for this issue
            Watchers:
            11 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Agile