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

Fix Assignment accessibility issues found in the 3.11 accessibility audit

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-72687-master
    • Hide

      Setup

      • WAVE accessibility checker tool
      • A course with few enrolled students.
      • An assignment activity in the course that has the following settings:
        • Due date: Some date in the future
        • Submission types: Online text, File submissions
        • Accepted file types: document
        • Feedback types: Feedback comments, Annotate PDF

      Assignment submission page

      1. Log in as a student and go to the assignment page.
      2. Click Add submission.
      3. Inspect the source code and search for "legend".
      4. Make sure no <legend class="sr-only"></legend> is found in the search.

      Assignment grading page

      1. Log in as a teacher or admin
      2. Go to the assignment page and click Grade button.
      3. Hover over the Change user element's (Fig. 17.01) left arrow.
      4. Confirm that you see a "Previous user" tooltip.
      5. Hover over the Change user element's (Fig. 17.01) right arrow.
      6. Confirm that you see a "Next user" tooltip.
      7. Make sure the link below Current grade in gradebook (Fig. 17.05) now shows "Not graded" instead of "-".
      8. Give the user a grade and save.
      9. Make sure the link below Current grade in gradebook (Fig. 17.05) now shows the grade you have given to the user.

      Assignment grading page - Accessibility checker

      1. Click on the Colour picker (small yellow button in the toolbar)
      2. Using WAVE tool scan the page.
      3. Click on the Details tab.
      4. Uncheck the Alerts, Features, Structural Elements and ARIA sections to only show the errors.
      5. Confirm that you don't see the following errors:
        • Missing alternative text on the student's profile picture
        • Missing form label on the "Change user" combo box
        • Broken ARIA menu
          There seems to be a Broken ARIA reference for an empty dialog but let's ignore that for now
      Others
      1. Inspect the page source code and search for toolbar_group
      2. Make sure the <div> element now has a valid role toolbar.
      3. Using the keyboard, navigate to the Filter icon and hit enter (See figure below).
      4. Make sure you are able to navigate directly to the filter select element when tabbing.
      5. Tab through the bottom elements.
      6. Confirm that the tab order goes from the "Notify students" checkbox, then the action buttons (save/reset buttons), and then up to the collapse buttons.
      7. Zoom the page to 200%.
      8. Confirm that the action buttons do not overlap with the collapse buttons.
      9. Hover over the student's email and due date.
      10. Confirm that tooltips are shown when you hover on the due date and the email.
      Show
      Setup WAVE accessibility checker tool A course with few enrolled students. An assignment activity in the course that has the following settings: Due date: Some date in the future Submission types: Online text, File submissions Accepted file types: document Feedback types: Feedback comments, Annotate PDF Assignment submission page Log in as a student and go to the assignment page. Click Add submission . Inspect the source code and search for "legend". Make sure no <legend class="sr-only"></legend> is found in the search. Assignment grading page Log in as a teacher or admin Go to the assignment page and click Grade button. Hover over the Change user element's (Fig. 17.01) left arrow. Confirm that you see a "Previous user" tooltip. Hover over the Change user element's (Fig. 17.01) right arrow. Confirm that you see a "Next user" tooltip. Make sure the link below Current grade in gradebook (Fig. 17.05) now shows "Not graded" instead of "-". Give the user a grade and save. Make sure the link below Current grade in gradebook (Fig. 17.05) now shows the grade you have given to the user. Assignment grading page - Accessibility checker Click on the Colour picker (small yellow button in the toolbar) Using WAVE tool scan the page. Click on the Details tab. Uncheck the Alerts, Features, Structural Elements and ARIA sections to only show the errors. Confirm that you don't see the following errors: Missing alternative text on the student's profile picture Missing form label on the " Change user " combo box Broken ARIA menu There seems to be a Broken ARIA reference for an empty dialog but let's ignore that for now Others Inspect the page source code and search for toolbar_group Make sure the <div> element now has a valid role toolbar . Using the keyboard, navigate to the Filter icon and hit enter (See figure below). Make sure you are able to navigate directly to the filter select element when tabbing. Tab through the bottom elements. Confirm that the tab order goes from the "Notify students" checkbox, then the action buttons (save/reset buttons), and then up to the collapse buttons. Zoom the page to 200%. Confirm that the action buttons do not overlap with the collapse buttons. Hover over the student's email and due date. Confirm that tooltips are shown when you hover on the due date and the email.
    • HQ Team International Sprin 10, HQ Team International CI H2-21

      Submit an assignment
      1. There is an empty legend tag present
      Grade an assignment
      1. The linked arrow icons for the previous and next user selection do not have alt text. Informative images require a descriptive alt text. See Fig 17.01
      2. The "Change User" combo box input field does not have a form label associated with it and solely relies on the placeholder text for context. See Fig 17.02
      3. There are 3 ARIA menus for the colour and stamp pickers, that are broken and do not contain required menu items. See Fig 17.03
      4. The email address, due date information and "Reset" button are cut off when the page is zoomed to 200%. See Fig 17.04
      5. When tabbing into the "Change Filters" drop down, the user has to tab backwards to get into the drop-down after expanding it. This is neither logical or predictable.
      6. The linked arrow icons for the previous and next user selection are broken and the "-" link under the "Current grade in gradebook" is not read due to it being a "-". None of these links make sense in context. See Fig 17.01 and Fig 17.05
      7. Missing label for the 'Change user' dropdown. See Fig 17.02
      8. Broken ARIA menu. See Fig 17.03
      9. The toolbar for the main input field does not have a valid ARIA role. See Fig 17.06
      Detailed statistics report
      1. There are missing form labels for the checkboxes.
      2. Usability issue: While not a fail, it is recommended that a fieldset is to group contextually similar items.

        1. Fig. 17.01 Linked icons without alt.png
          4 kB
          Shamim Rezaie
        2. Fig. 17.02 Missing form label.png
          3 kB
          Shamim Rezaie
        3. Fig. 17.03 Example of broken ARIA menu.png
          3 kB
          Shamim Rezaie
        4. Fig. 17.04 Content cut off at 200%.png
          2 kB
          Shamim Rezaie
        5. Fig. 17.04 Content cut off at 200%.png
          22 kB
          Shamim Rezaie
        6. Fig. 17.05 Nonsensical link.png
          5 kB
          Shamim Rezaie
        7. Fig. 17.06 Invalid ARIA role.png
          15 kB
          Shamim Rezaie
        8. MDL-72687_Screenshot1.png
          261 kB
          Gladys Basiana
        9. MDL-72687_Screenshot2.png
          206 kB
          Gladys Basiana
        10. MDL-72687 filter.png
          8 kB
          Simey Lameze

            lameze Simey Lameze
            rezaie9 Shamim Rezaie
            Dongsheng Cai Dongsheng Cai
            Jun Pataleta Jun Pataleta
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 days, 6 hours, 23 minutes
                3d 6h 23m

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