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
    • 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

          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