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

Gradebook table uses complex tables that are not accessible

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      With both supported screen reader + browser configurations (latest IE + JAWS, latest Firefox + NVDA), on both Base and Bootstrapbase:

      • Create a test course of size S.
      • Navigate to the grader report by going to Course administration -> Grades.
      • Using the controls for your screen reader, navigate through the grade table.
        • On each cell, ask the screen reader for information about the cell, and check that the corresponding column and row headers are identified correctly.
          • Verify that user email addresses and other "extra user cells" are not being read out - just their names.
          • Verify that the user pictures are not being picked up by the screen reader (except for on 2.7, which does not support hiding user pictures).
      • Navigate to the categories and items page by going to Grade administration -> Setup -> Categories and items.
      • Create two categories, A and B, such that they are directly under the course (i.e. the course is their parent category).
      • Create two more categories, C and D, where C is a child of B and D is a child of C.
      • Put two activities in each category - this should leave you with two activities not in any category.
      • Navigate back to the grader report.
        • Verify that the table still looks correct, with headers where they should be.
      Show
      With both supported screen reader + browser configurations (latest IE + JAWS, latest Firefox + NVDA), on both Base and Bootstrapbase: Create a test course of size S. Navigate to the grader report by going to Course administration -> Grades . Using the controls for your screen reader, navigate through the grade table. On each cell, ask the screen reader for information about the cell, and check that the corresponding column and row headers are identified correctly. Verify that user email addresses and other "extra user cells" are not being read out - just their names. Verify that the user pictures are not being picked up by the screen reader (except for on 2.7, which does not support hiding user pictures). Navigate to the categories and items page by going to Grade administration -> Setup -> Categories and items . Create two categories, A and B, such that they are directly under the course (i.e. the course is their parent category). Create two more categories, C and D, where C is a child of B and D is a child of C. Put two activities in each category - this should leave you with two activities not in any category. Navigate back to the grader report. Verify that the table still looks correct, with headers where they should be.
    • Affected Branches:
      MOODLE_21_STABLE, MOODLE_22_STABLE, MOODLE_23_STABLE, MOODLE_27_STABLE, MOODLE_28_STABLE, MOODLE_29_STABLE
    • Fixed Branches:
      MOODLE_29_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-36009-master
    • Story Points:
      20
    • Sprint:
      FRONTEND Sprint 16, Team B Sprint 1, Team Beards Sprint 2
    • Issue size:
      Medium

      Description

      Issue
      Teacher:

      • Gradebook uses complex tables that are not accessible.
      • Row headers are incorrect so the user thinks they are in a different row than they actually are.

      Student:

      • Screen reader is incorrectly reading the wrong row header data because of the blank cell in the top left corner of the table.

      Standard Level
      WCAG 2 1.3.1 (A) http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html

      Impact
      Critical

      Example Link
      http://demo.moodle.net/

      Test Steps

      1. Login as teacher
      2. navigate to CF101
      3. Click grades link
      4. Try to navigate the grades table.

      Recommendations

      • Reduce complexity of grade editing tables or provide an alternative, accessible interface.
      • Correct the structure of this complex table to ensure the row headers line up in the correct row. Test with a variety of screen readers. Explicitly set each table data cell's row and column headers.

      edit 28/Aug/2014:
      Unable to reproduce identified behaviour now that the UCLA code has been integrated. Some improvements to accessibility have been implemented under this issue, namely:

      • Top left cell(s) have been replaced with a single cell with rowspan that contains a label only visible to screen readers, namely get_string('participants'); scope has been set to col to make it relate to the three or more columns it sits above.
      • Header attributes removed from grade report cell and email cell; the only "header" for a row is the participant's name cell.

      This results in better behaviour; when prompted about a given cell, a screen reader reads first the column information (category / course, then activity title), followed by row information (user's name only), followed by the contents of the cell. Given that the floating user panel only contains the user's name, this should be an acceptable tradeoff.

      Note that a lot of elements within these cells do not yet have their appropriate ARIA attributes (e.g. the user picture); this will be addressed in MDL-46662.

      Changes, mostly to "left" cells generated by get_left_rows():

      1. Top-left filler cells
        • Amended logic to generate a single big filler cell using rowspan, instead of multiple stacked filler cells.
        • Set scope attribute to target columns below.
        • Added a span to hold a label for said columns, using lang string participants.
      2. User rows
        • Moved header class onto first column
        • Added rowheader class to first column
        • Changed all other columns to be td s rather than th s so screen readers don't count them as "row headers"
        • Hid user avatars from screen readers
      3. Activity headers
        • Hid activity icons from screen readers

        Attachments

        1. 36009_i27fixup.patch
          0.7 kB
        2. after (left) before (right).png
          after (left) before (right).png
          67 kB
        3. post-MDL-36009.png
          post-MDL-36009.png
          129 kB
        4. pre-MDL-36009.png
          pre-MDL-36009.png
          119 kB

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/May/15