Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-30852

user report grade view has inaccessible table

    Details

    • Testing Instructions:
      Hide
      1. Create a course with several graded activities in it
      2. create grading categories and subcategories
      3. Use a screen reader (NVDA).
      4. Open the user grade report.
      5. Go to a table cell - you should hear the table summary announces with information about the headers.
      6. Navigate through the table cells in the screen reader virtual buffer (Down key in NVDA) You should hear the table header and the cell contents for each cell. For items in a grade category you should hear the category header as well.
      Show
      Create a course with several graded activities in it create grading categories and subcategories Use a screen reader (NVDA). Open the user grade report. Go to a table cell - you should hear the table summary announces with information about the headers. Navigate through the table cells in the screen reader virtual buffer (Down key in NVDA) You should hear the table header and the cell contents for each cell. For items in a grade category you should hear the category header as well.
    • Affected Branches:
      MOODLE_21_STABLE
    • Fixed Branches:
      MOODLE_24_STABLE, MOODLE_25_STABLE, MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-30852-master
    • Sprint:
      FRONTEND Sprint 3
    • Story Points (Obsolete):
      8
    • 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

        Gliffy Diagrams

          Attachments

            Activity

            Hide
            salvetore Michael de Raadt added a comment -

            Thanks again for working on this.

            Show
            salvetore Michael de Raadt added a comment - Thanks again for working on this.
            Hide
            jrh18 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
            jrh18 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
            smbader 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
            smbader 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
            smbader 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
            smbader 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
            andyjdavis 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
            andyjdavis 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
            salvetore Michael de Raadt added a comment -

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

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

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

            Show
            dougiamas Martin Dougiamas added a comment - Pushing this up to FRONTEND as a priority because of the code here
            Hide
            damyon 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 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 Damyon Wiese added a comment -

            Note - added one minor coding style improvement.

            Show
            damyon Damyon Wiese added a comment - Note - added one minor coding style improvement.
            Hide
            marina 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 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 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 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 Marina Glancy added a comment -

            I agree that bold looks better. Thanks

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

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

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

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

            Show
            marina Marina Glancy added a comment - Thanks guys, this was integrated in 2.4, 2.5 and master
            Hide
            markn 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
            markn 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
            phalacee 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
            phalacee 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
            phalacee Jason Fowler added a comment -

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

            Show
            phalacee Jason Fowler added a comment - Turns out that's a Chrome issue. looks good in firefox with NVDA. Passing test. Thanks Steve
            Hide
            samhemelryk 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
            samhemelryk 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:
                  Fix Release Date:
                  9/Sep/13