Project: moodle
Issue MDL-36009: Gradebook table uses complex tables that are not accessible
*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* # Login as teacher # navigate to CF101 # Click grades link # 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():* # 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}}. # 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 # Activity headers #* Hid activity icons from screen readers
Story points: 20