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

Assignment accessibility correct use of tables and toggleable +/- link

XMLWordPrintable

    • MOODLE_34_STABLE, MOODLE_35_STABLE, MOODLE_36_STABLE, MOODLE_37_STABLE
    • MOODLE_36_STABLE, MOODLE_37_STABLE
    • MDL-61121-master-5
    • Hide
      1. Log in as Admin.
      2. Create a Course 
      3. Enroll a Student in the Course.
      4. Create an Assignment activity.
        • For "Submission types" enable "Online text".
        • Enable multiple attempts in 'Submission settings'
          • Attempts reopened = 'Manually'
          • Maximum attempts = 5
      5. Go back to the created Assignment.
        • make sure the tables "Grading summary" is present.
      6. Using JAWS or another screen reader navigate through the tables.
        • make sure the leftmost columns are now represented as a table header (th) and not as 'td' (you will need to inspect the code with the browser inspector tool).
        • make sure the screen reader makes it clear to the user that the info in the leftmost column identifies the rightmost column in the table. 
      7. Login as the Student.
      8. Go to Course > Assignment.
      9. Add an "Online text" submission (make sure to add a longer content) and "Save changes".
      10. In the assignment page, there should be a table row that shows a preview of the submitted "Online text" submission.
        • make sure there is toggleable +/- link that shows a preview or the full Online text submission.
      11. Using JAWS or another screen reader navigate through the Assignment page.
      12. Attempt to navigate to the +/- link in the "Online text" table row.
        • make sure the +/- link is accessible with the screen reader and the reader properly describes (reads) it's function.
      13. While focused on the +/- link, press "Enter"
        • make sure the link changes its state from "+" to "-" and the other way around and properly displays the full online text submission or the preview. 
      14. Login as Admin.
      15. Go to the Course > Assignment.
      16. Go to "View all submissions".
      17. Click on the "Grade" button that represents the Student's submission.
      18. In the Grading page:
        • make sure there is toggleable +/- link that shows a preview or the full Online text submission.
      19. Using JAWS or another screen reader navigate through the Assignment page.
      20. Attempt to navigate to the +/- link.
        • make sure the +/- link is accessible with the screen reader and the reader properly describes (reads) it's function.
      21. While focused on the +/- link, press "Enter"
        • make sure the link changes its state from "+" to "-" and the other way around and properly displays the full online text submission or the preview. 
      22. From the Grader page
        1. Add a grade.
        2. Add a longer Feedback comment.
        3. Save changes.
      23. After adding the feedback and the grade, go back to the Assignment > View all submissions.
      24. Find the Student in the table and from the edit dropdown select 'Allow another attempt'.
      25. Log in as Student.
      26. Go to Course > Assignment.
        • make sure there are 3 tables ("Submission status" and "Feedback" and "Previous attempts")
      27. Using JAWS or another screen reader navigate through the tables.
        • make sure the leftmost columns are now represented as a table header (th) and not as 'td' (you will need to inspect the code with the browser inspector tool). 
        • make sure the screen reader makes it clear to the user that the info in the leftmost column identifies the rightmost column in every table. 
      28. Using JAWS or another screen reader navigate to the Feedback section.
      29. Attempt to navigate to the +/- link in the "Feedback comments" table row.
        • make sure the +/- link is accessible with the screen reader and the reader properly describes (reads) it's function.
      30. While focused on the +/- link, press "Enter".
        • make sure the link changes its state from "+" to "-" and the other way around and properly displays the full feedback comment or the preview.
      Show
      Log in as Admin. Create a Course  Enroll a Student in the Course. Create an Assignment activity. For "Submission types" enable "Online text". Enable multiple attempts in 'Submission settings' Attempts reopened = 'Manually' Maximum attempts = 5 Go back to the created Assignment. make sure the tables "Grading summary" is present. Using JAWS or another screen reader navigate through the tables. make sure the leftmost columns are now represented as a table header (th) and not as 'td' (you will need to inspect the code with the browser inspector tool) . make sure the screen reader makes it clear to the user that the info in the leftmost column identifies the rightmost column in the table.   Login as the Student. Go to Course > Assignment. Add an "Online text" submission (make sure to add a longer content) and "Save changes". In the assignment page, there should be a table row that shows a preview of the submitted "Online text" submission. make sure there is toggleable +/- link that shows a preview or the full Online text submission. Using JAWS or another screen reader navigate through the Assignment page. Attempt to navigate to the +/- link in the "Online text" table row. make sure the +/- link is accessible with the screen reader and the reader properly describes (reads) it's function. While focused on the +/- link, press "Enter" make sure the link changes its state from "+" to "-" and the other way around and properly displays the full online text submission or the preview.   Login as Admin. Go to the Course > Assignment. Go to "View all submissions". Click on the "Grade" button that represents the Student's submission. In the Grading page: make sure there is toggleable +/- link that shows a preview or the full Online text submission. Using JAWS or another screen reader navigate through the Assignment page. Attempt to navigate to the +/- link. make sure the +/- link is accessible with the screen reader and the reader properly describes (reads) it's function. While focused on the +/- link, press "Enter" make sure the link changes its state from "+" to "-" and the other way around and properly displays the full online text submission or the preview.   From the Grader page Add a grade. Add a longer Feedback comment. Save changes. After adding the feedback and the grade, go back to the Assignment > View all submissions. Find the Student in the table and from the edit dropdown select 'Allow another attempt'. Log in as Student. Go to Course > Assignment. make sure there are 3 tables ("Submission status" and "Feedback" and "Previous attempts") Using JAWS or another screen reader navigate through the tables. make sure the leftmost columns are now represented as a table header (th) and not as 'td' (you will need to inspect the code with the browser inspector tool) .   make sure the screen reader makes it clear to the user that the info in the leftmost column identifies the rightmost column in every table.   Using JAWS or another screen reader navigate to the Feedback section. Attempt to navigate to the +/- link in the "Feedback comments" table row. make sure the +/- link is accessible with the screen reader and the reader properly describes (reads) it's function. While focused on the +/- link, press "Enter". make sure the link changes its state from "+" to "-" and the other way around and properly displays the full feedback comment or the preview.

      According to an audit made over Accessibility, violations exist over the assignments as follows:

      Affected modules: Graded Assignment

      • Ensure custom controls provide proper textual roles and descriptions
      • Avoid the sole use of device-dependent event handlers

      The "View Full/View Summary" switch control for "Online Text" has not been assigned a role. Screen-reader users will not be aware that this control can be activated, and will not find it when searching by control.

      <img class="icon expandsummaryicon expand_assignsubmission_onlinetext_13" alt="View full" title="View full" src="">
      		 
      ...
      		 
      <div class="box boxaligncenter full_assignsubmission_onlinetext_13 p-y-1" style="display: none;" hidden="hidden">
      		 
      <img class="icon expandsummaryicon contract_assignsubmission_onlinetext_13" alt="View summary" title="View summary">
      		 
      ...
      		 
      </div>

      The simplest way to resolve the violations for this control would involve

      1. Wrapping the <img> elements in <a> elements.
      2. Assign the <a> elements href attributes of "javascript:void(0)"

      This would give the elements a role of link and would allow keyboard-only users to focus and activate them.

      Update: The "View Full/View Summary" can be found as a teacher or as student when an assignment is created:
         Student: Enter the course which has the assignment created, enter the assignment and check over Submission status > Online text

        Teacher: Enter the course which has the assignment created, enter the assignment, enter the grade for the assignment

      • Ensure data table headers are properly identified

      This page contains two tables of two columns each. The leftmost column of each of these tables identify the contents of the cells in the rightmost column, however they are not programatically associated. Screen-reader users will not be immediately aware that the info in the leftmost column identifies the rightmost column.

      <table class="generaltable" ...>
      		 
      <tbody>
      		 
      <tr class="">
      		 
      <td class="cell c0" style="">Group</td>
      		 
      <td class="cell c1 lastcol" style="">Group A</td>
      		 
      </tr>
      		 
      <tr class="">
      		 
      <td class="cell c0">
      		 
      Submission status</td>
      		 
      <td class="submissionstatussubmitted cell c1 lastcol" style="">Submitted for grading</td>
      		 
      </tr>
      		 
      ...
      		 
      </tbody>
      		 
      </table>

      Wrap the "Grade," Graded On," "Online text" etc. headers in <th> elements and assign their scope to "row"

      <th scope="row" ...>Grade</th>

      Update: This table can be seen when an assignment is created and as student, the student enters the assignment and two tables exists:

      submission status

      Feedback

       

        1. Assignment Feedback.png
          19 kB
          Ann Adamcik
        2. Feedback.png
          54 kB
          Rafael Becerra
        3. Screenshot_1.png
          252 kB
          Janelle Barcega
        4. Screenshot_2.png
          451 kB
          Janelle Barcega
        5. Screenshot_3.png
          166 kB
          Janelle Barcega
        6. Submisiongrade_teacher.png
          802 kB
          Rafael Becerra
        7. submissionstatus_student.png
          388 kB
          Rafael Becerra
        8. submission status.png
          160 kB
          Rafael Becerra

            Geshoski Mihail Geshoski
            rbecerrarodriguez Rafael Becerra
            Neill Magill Neill Magill
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Janelle Barcega Janelle Barcega
            Votes:
            13 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 5 hours, 50 minutes
                5h 50m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.