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

Accessibility issues found on assignment with rubrics

    XMLWordPrintable

Details

    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MDL-74812-311
    • MDL-74812-400
    • MDL-74812-master
    • Hide
      Setup
      1. Install axe DevTools on your browser (Chrome/Firefox).
      2. Log in as an admin
      3. Restore the course backup: backup-moodle2-course-2-activity_examples-20220616-1603-nu.mbz
      4. Enrol a student and a teacher on the restored course
      5. Log in as a student.
      6. Create a submission. Make sure to attach a file to the submission as well.
      7. On a separate browser session (e.g. incognito), log in as a teacher.
      8. Grade the student's submission. Add comments. Fill out the rubrics table. Add comments on the criteria. Make sure to provide feedback comments as well.
      Test: Text wrapping
      1. On the student's browser, go to the assignment's view page.
      2. Check the rubrics tables (both on the Submission status and Feedback sections)
      3. Confirm that the longer words (e.g. "onomatopoeia") don't overflow to the other cells
      4. Inspect the rubrics table on the browser dev tools.
      5. Under Elements > Style (Chrome) / Inspector > Styles (Firefox), look for the "table" style, add the following line:

        letter-spacing: 0.5em;
        

      6. Confirm that the letters have wider spacing but they wrap nicely and don't overlap outside their respective cells.
      Test: HTML Validator check
      1. View the page source (Right-click > View page source)
      2. Copy the page source
      3. Paste it on the text area of the Nu HTML Validator
      4. Press Check. Filter out the warnings.
      5. Confirm you don't see any of the following errors (Note: Disregard the other errors not mentioned below):
        • Duplicate ID.
        • The "width" attribute on the "td" element is obsolete.
      Test - Axe DevTools
      1. On the student's browser, go to the assignment's view page.
      2. Run axe DevTools
      3. Confirm that there are no errors related to the rubrics tables:
        • (Critical) Certain ARIA roles must contain particular children
        • (Serious) Elements must have sufficient color contrast
        • (Minor) id attribute value must be unique
          Note: The "Needs review" colour contrast issues are false positives. The 2 Moderate ones are unrelated to the rubrics table.
      Show
      Setup Install axe DevTools on your browser (Chrome/Firefox). Log in as an admin Restore the course backup: backup-moodle2-course-2-activity_examples-20220616-1603-nu.mbz Enrol a student and a teacher on the restored course Log in as a student. Create a submission. Make sure to attach a file to the submission as well. On a separate browser session (e.g. incognito), log in as a teacher. Grade the student's submission. Add comments. Fill out the rubrics table. Add comments on the criteria. Make sure to provide feedback comments as well. Test: Text wrapping On the student's browser, go to the assignment's view page. Check the rubrics tables (both on the Submission status and Feedback sections) Confirm that the longer words (e.g. " onomatopoeia ") don't overflow to the other cells Inspect the rubrics table on the browser dev tools. Under Elements > Style (Chrome) / Inspector > Styles (Firefox), look for the " table " style, add the following line: letter-spacing: 0.5em; Confirm that the letters have wider spacing but they wrap nicely and don't overlap outside their respective cells. Test: HTML Validator check View the page source (Right-click > View page source) Copy the page source Paste it on the text area of the Nu HTML Validator Press Check. Filter out the warnings. Confirm you don't see any of the following errors ( Note: Disregard the other errors not mentioned below ): Duplicate ID . The "width" attribute on the "td" element is obsolete. Test - Axe DevTools On the student's browser, go to the assignment's view page. Run axe DevTools Confirm that there are no errors related to the rubrics tables: (Critical) Certain ARIA roles must contain particular children (Serious) Elements must have sufficient color contrast (Minor) id attribute value must be unique Note: The " Needs review " colour contrast issues are false positives. The 2 Moderate ones are unrelated to the rubrics table.
    • 3

    Description

      To reproduce
      1. Create an assignment
      2. Set its grading method to Rubrics
      3. Configure the rubrics, and set up several criteria and levels. Make sure to include lengthy descriptions on the labels.
      4. Save and display
      5. On another browser session, log in as a student.
      6. Make a submission.
      7. Back on the admin/teacher's browser, grade the student's submission.
      8. On the student's browser, reload the assignment view page.
      9. View the page source and check with Nu HTML validator

      HTML validator issues

      1. Duplicate ID "intro"
        • The activity description container already has an ID of "intro" and the actual description
      2. The "role" attribute must not be used on a "tr" element which has a "table" ancestor with no "role" attribute, or with a "role" attribute whose value is "table", "grid", or "treegrid"
        • Found on the Rubrics table
      3. The "role" attribute must not be used on a "td" element which has a "table" ancestor with no "role" attribute, or with a "role" attribute whose value is "table", "
        • Found on the Rubrics table{{grid}}", or "treegrid"
      4. The "width" attribute on the "td" element is obsolete.
        • Also on the Rubrics table
      Others from the audit
      1. When text spacing is increased, text in the Grading Criteria table is cut off.
      2. Text with longer words that don't fit in the Rubrics table cell overlaps with the other cells.
      3. Colour contrast issues on the green text within the Rubrics table.
        1. Grading criteria - The points text inside the rubric table does not have sufficient colour contrast. Both normal and on hover.
        2. Feedback > Grade - The points text inside the rubric table within the grey cells does not have sufficient colour contrast. Both normal and on hover.

      Attachments

        Issue Links

          Activity

            People

              jpataleta Jun Pataleta
              jpataleta Jun Pataleta
              Laurent David Laurent David
              Shamim Rezaie Shamim Rezaie
              Angelia Dela Cruz Angelia Dela Cruz
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                11/Jul/22

                Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 2 hours, 30 minutes
                  1d 2h 30m