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

Accessibility on assignments

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Development in progress
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.4, 3.5.2
    • Fix Version/s: None
    • Component/s: Accessibility, Assignment
    • Labels:
    • Testing Instructions:
      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".
      5. Login as the Student.
      6. Go to Course > Assignment.
      7. Add an "Online text" submission (make sure to add a longer content) and "Save changes".
      8. 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.
      9. Using JAWS or another screen reader navigate through the Assignment page.
      10. 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.
      11. While focused on the +/- link, press "Enter"
        • make sure the link changes it's state from "+" to "-" and the other way around and properly displays the full online text submission or the preview. 
      12. Login as Admin.
      13. Go to the Course > Assignment.
      14. Go to "View all submissions".
      15. Click on the "Grade" button that represents the Student's submission.
      16. In the Grading page:
        • make sure there is toggleable +/- link that shows a preview or the full Online text submission.
      17. Using JAWS or another screen reader navigate through the Assignment page.
      18. 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.
      19. While focused on the +/- link, press "Enter"
        • make sure the link changes it's state from "+" to "-" and the other way around and properly displays the full online text submission or the preview. 
      20. Add a grade.
      21. Add a longer Feedback comment.
      22. Log in as Student.
      23. Go to Course > Assignment.
        • make sure there are 2 tables ("Submission status" and "Feedback")
      24. Using JAWS or another screen reader navigate through the tables.
        • make sure the screen reader makes it clear to the user that the info in the leftmost column identifies the rightmost column in both tables. 
      25. Using JAWS or another screen reader navigate to the Feedback section.
      26. 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.
      1. While focused on the +/- link, press "Enter".
        • make sure the link changes it's 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". 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 it's 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 it's state from "+" to "-" and the other way around and properly displays the full online text submission or the preview.   Add a grade. Add a longer Feedback comment. Log in as Student. Go to Course > Assignment. make sure there are 2 tables ("Submission status" and "Feedback") Using JAWS or another screen reader navigate through the tables. make sure the screen reader makes it clear to the user that the info in the leftmost column identifies the rightmost column in both tables.   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 it's state from "+" to "-" and the other way around and properly displays the full feedback comment or the preview.
    • Affected Branches:
      MOODLE_34_STABLE, MOODLE_35_STABLE
    • Pull 3.6 Branch:
      MDL-61121-36-1
    • Pull 3.7 Branch:
    • Pull Master Branch:
      MDL-61121-master-1

      Description

      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

       

        Attachments

        1. Assignment Feedback.png
          Assignment Feedback.png
          19 kB
        2. Feedback.png
          Feedback.png
          54 kB
        3. Submisiongrade_teacher.png
          Submisiongrade_teacher.png
          802 kB
        4. submissionstatus_student.png
          submissionstatus_student.png
          388 kB
        5. submission status.png
          submission status.png
          160 kB

          Activity

            People

            • Votes:
              13 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

              • Created:
                Updated:

                Time Tracking

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours
                2h