Moodle
  1. Moodle
  2. MDL-30852

user report grade view has inaccessible table

    Details

    • Story Points:
      8
    • Rank:
      51650
    • Sprint:
      FRONTEND Sprint 3

      Description

      The table used to display the grades in the "user report" grade view is a complex data table and thus needs to have headers explicitly attached to the correct data cells. By complex data table I mean it does not have a single set of headers across either the rows and/or columns. For WebAIM's example of a simple data table, view "The scope attribute" at http://webaim.org/techniques/tables/data#headers.

      For the correct way to implement complex data tables, view WebAIM's "The headers and id attributes" at http://webaim.org/techniques/tables/data#id

        Activity

        Hide
        Michael de Raadt added a comment -

        Thanks again for working on this.

        Show
        Michael de Raadt added a comment - Thanks again for working on this.
        Hide
        Jason Hardin added a comment -

        Some other issues here reported by Deque:

        • Summary attribute - The results table has no summary explaining what it’s about to the user.
        • Explicit associations – The results table shows no explicit associations between header and data cells, making it impossible for non-sighted, screen reader users to understand what it’s about. Associate header cells with the appropriate data cells using id and header attributes.
        • Visual cues – The table structure is organized visually through colors and indentations, but not being conveyed programmatically (in the code) to the screen reader user.
        • On input – Using the select form input for quick navigation results in an unexpected automatic redirection that could confuse the user. Either provide a submit button or announce the behavior ahead of time to prevent confusion.
        • Facilitate understanding – There is a huge data table that would be best handled by all users if it was broken down into smaller, more easily manageable tables (one per course).
        Show
        Jason Hardin added a comment - Some other issues here reported by Deque: Summary attribute - The results table has no summary explaining what it’s about to the user. Explicit associations – The results table shows no explicit associations between header and data cells, making it impossible for non-sighted, screen reader users to understand what it’s about. Associate header cells with the appropriate data cells using id and header attributes. Visual cues – The table structure is organized visually through colors and indentations, but not being conveyed programmatically (in the code) to the screen reader user. On input – Using the select form input for quick navigation results in an unexpected automatic redirection that could confuse the user. Either provide a submit button or announce the behavior ahead of time to prevent confusion. Facilitate understanding – There is a huge data table that would be best handled by all users if it was broken down into smaller, more easily manageable tables (one per course).
        Hide
        Steve Bader added a comment -

        I have been working on a patch for this particular item. I should have it up here tomorrow sometime. Jason, I would appreciate your review when I post it. Hopefully, I cover some of your concerns and maybe you can help me improve.

        Show
        Steve Bader added a comment - I have been working on a patch for this particular item. I should have it up here tomorrow sometime. Jason, I would appreciate your review when I post it. Hopefully, I cover some of your concerns and maybe you can help me improve.
        Hide
        Steve Bader added a comment - - edited

        Added header/id associations and summary attribute.

        Attached are the modifications I have been working on for this item. Currently the headers refer to the current row, current category (immediate parent) and current column.

        Show
        Steve Bader added a comment - - edited Added header/id associations and summary attribute. Attached are the modifications I have been working on for this item. Currently the headers refer to the current row, current category (immediate parent) and current column.
        Hide
        Andrew Davis added a comment -

        This issue was assigned to me automatically, however I will not be able to work on this issue in the immediate future. In order to create a truer sense of the state of this issue and to allow other developers to have chance to become involved, I am removing myself as the assignee of this issue.

        For more information, see http://docs.moodle.org/dev/Changes_to_issue_assignment

        Show
        Andrew Davis added a comment - This issue was assigned to me automatically, however I will not be able to work on this issue in the immediate future. In order to create a truer sense of the state of this issue and to allow other developers to have chance to become involved, I am removing myself as the assignee of this issue. For more information, see http://docs.moodle.org/dev/Changes_to_issue_assignment
        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 -

        Pushing this up to FRONTEND as a priority because of the code here

        Show
        Martin Dougiamas added a comment - Pushing this up to FRONTEND as a priority because of the code here
        Hide
        Damyon Wiese added a comment -

        This patch looks good to me (tested in NVDA) - I made git branches and backported it.

        Submitting for integration.

        Show
        Damyon Wiese added a comment - This patch looks good to me (tested in NVDA) - I made git branches and backported it. Submitting for integration.
        Hide
        Damyon Wiese added a comment -

        Note - added one minor coding style improvement.

        Show
        Damyon Wiese added a comment - Note - added one minor coding style improvement.
        Hide
        Marina Glancy added a comment -

        This changes the look of the report a little - the <th> has bold font and <td> was using normal. As a result this report now looks different from /grade/edit/tree/index.php
        It seems to me that the later should be changed as well.
        What do you think guys?
        At the same time I realise that students need accessibility more than teachers, so maybe that can be delayed as a separate issue.

        Show
        Marina Glancy added a comment - This changes the look of the report a little - the <th> has bold font and <td> was using normal. As a result this report now looks different from /grade/edit/tree/index.php It seems to me that the later should be changed as well. What do you think guys? At the same time I realise that students need accessibility more than teachers, so maybe that can be delayed as a separate issue.
        Hide
        Damyon Wiese added a comment -

        Hi Marina,

        I added a new issue to fix any other reports that are misbehaving (MDL-41028). Like you said - this is a student accessible report so it is more important than some of the others. Also these are actually headings so the fact they are bold now is IMO correct behaviour.

        Show
        Damyon Wiese added a comment - Hi Marina, I added a new issue to fix any other reports that are misbehaving ( MDL-41028 ). Like you said - this is a student accessible report so it is more important than some of the others. Also these are actually headings so the fact they are bold now is IMO correct behaviour.
        Hide
        Marina Glancy added a comment -

        I agree that bold looks better. Thanks

        Show
        Marina Glancy added a comment - I agree that bold looks better. Thanks
        Hide
        Damyon Wiese added a comment -

        Added a commit to all branches to fix a long line and properly escape the table summary.

        Show
        Damyon Wiese added a comment - Added a commit to all branches to fix a long line and properly escape the table summary.
        Hide
        Marina Glancy added a comment -

        Thanks guys, this was integrated in 2.4, 2.5 and master

        Show
        Marina Glancy added a comment - Thanks guys, this was integrated in 2.4, 2.5 and master
        Hide
        Mark Nelson added a comment -

        Jason said he was really desperate to test this out and because I am a kind hearted person I decided to let him. This is totally not because my Windows VM is crashing my whole computer and not allowing me to use NVDA.

        Show
        Mark Nelson added a comment - Jason said he was really desperate to test this out and because I am a kind hearted person I decided to let him. This is totally not because my Windows VM is crashing my whole computer and not allowing me to use NVDA.
        Hide
        Jason Fowler added a comment -

        This doesn't seem to be working the way I expected it to given the instructions.

        The text below is from the Speech Viewer in NVDA:

        column 7
        row 17  column 2
        link
        graphic
        SCORM package
        MDL-30440
        column 4
        -
        column 5
        0–100
        column 6
        -
        column 7
        row 18  column 2
        column 3
        graphic
        Category
        DoDeDooDoo
        row 19
        link
        graphic
        Quiz
        Multipage Quiz
        column 4
        -
        column 5
        0–100
        column 6
        -
        -
        column 6
        0–100
        column 5
        -
        column 4
        Multipage Quiz
        

        It doesn't read out the header of the column, and it doesn't read out the category details for the columns under that category.

        Show
        Jason Fowler added a comment - This doesn't seem to be working the way I expected it to given the instructions. The text below is from the Speech Viewer in NVDA: column 7 row 17 column 2 link graphic SCORM package MDL-30440 column 4 - column 5 0–100 column 6 - column 7 row 18 column 2 column 3 graphic Category DoDeDooDoo row 19 link graphic Quiz Multipage Quiz column 4 - column 5 0–100 column 6 - - column 6 0–100 column 5 - column 4 Multipage Quiz It doesn't read out the header of the column, and it doesn't read out the category details for the columns under that category.
        Hide
        Jason Fowler added a comment -

        Turns out that's a Chrome issue. looks good in firefox with NVDA. Passing test. Thanks Steve

        Show
        Jason Fowler added a comment - Turns out that's a Chrome issue. looks good in firefox with NVDA. Passing test. Thanks Steve
        Hide
        Sam Hemelryk added a comment -

        Huzzah, your code made it into Moodle. Perhaps now things are ever so slightly better!

        "The ship can't take this much pressure. Sometimes it falls apart just sitting in the hangar."
        ~ Professor Farnsworth

        Show
        Sam Hemelryk added a comment - Huzzah, your code made it into Moodle. Perhaps now things are ever so slightly better! "The ship can't take this much pressure. Sometimes it falls apart just sitting in the hangar." ~ Professor Farnsworth

          People

          • Votes:
            4 Vote for this issue
            Watchers:
            14 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Agile