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