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

Forum grading submit grade form does not conform to accessibility guidelines

XMLWordPrintable

    • MOODLE_38_STABLE
    • MOODLE_38_STABLE
    • MDL-67663-master-3
    • Hide
      Prerequisites
      1. Test on the following browser-screen reader combinations
        Browser Screen reader
        IE 11, Microsft Edge JAWS
        Firefox NVDA
        Chrome Chromevox
        Safari Voice Over
      Setup
      1. Create a forum with whole forum grading turned on.
      2. Log in as various users in the course and create one or more discussions and post one or more replies to discussions within the forum.
      3. Log in as a teacher.
      Focus order
      1. Navigate to the forum page.
      2. Press "Grade users"
      3. Tab through the forum grading UI.
      4. Confirm that the focus order is in the folloing order: Navigation header > Forum posts panel > Grading panel
      Grading navigation header
      1. With a screen reader enabled, navigate to the forum page.
      2. Press "Grade users"
      3. Using the keyboard, navigate to the Close button of the navigation section of the grading UI.
      4. Confirm that it is being announced as "Close grader"
      5. Press tab.
      6. Confirm that the menu button is now being announced as "Actions for the grader interface"
      Grading panel header
      1. With a screen reader enabled, navigate to the forum page.
      2. Press "Grade users"
      3. Using the keyboard, navigate to the header of the grading panel.
      4. Confirm that the first element that receives focus is the "->" button.
      5. Confirm that the "->" button is now being announced as "Hide grader panel"
      6. Tab to the search button.
      7. Confirm that it is being announced as "Show user search"
      8. Press the search button.
      9. Confirm that the user search UI is being shown.
      10. With the Search users text box focused, tab to the "x" button.
      11. Confirm that it is being annouced as "Hide user search".
      12. Press Shift-Tab.
      13. Confirm that the last focusable item in the forum posts panel gets focused.
      14. Press tab to go back to the grading panel.
      15. Confirm that the Search users text field gets focused first.
      16. Press tab to shift focus to the "Hide user search button"
      17. Press the "Hide user search button"
      18. Confirm that when the search panel is closed, it is now back to a magnifying glass and is now being announced as "Show user search".
      User switching
      1. With a screen reader enabled, navigate to the forum page.
      2. Press "Grade users"
      3. Confirm that you hear the name of the user that is currently being graded when the grading UI shows up.
      4. Using the keyboard, navigate to the grading panel until you reach the "<" button.
      5. Confirm that the screen reader reads it as "Save changes and proceed to the previous user".
      6. Press the button.
      7. Confirm that after the previous user has been loaded, you hear the name of the user as the one that is now being graded.
      8. Tab to the ">" button.
      9. Confirm that the screen reader reads it as "Save changes and proceed to the next user".
      10. Press the button.
      11. Confirm that after the next user has been loaded, you hear the name of the user as the one that is now being graded.
      Show
      Prerequisites Test on the following browser-screen reader combinations Browser Screen reader IE 11, Microsft Edge JAWS Firefox NVDA Chrome Chromevox Safari Voice Over Setup Create a forum with whole forum grading turned on. Log in as various users in the course and create one or more discussions and post one or more replies to discussions within the forum. Log in as a teacher. Focus order Navigate to the forum page. Press " Grade users " Tab through the forum grading UI. Confirm that the focus order is in the folloing order: Navigation header > Forum posts panel > Grading panel Grading navigation header With a screen reader enabled, navigate to the forum page. Press " Grade users " Using the keyboard, navigate to the Close button of the navigation section of the grading UI. Confirm that it is being announced as " Close grader " Press tab. Confirm that the menu button is now being announced as " Actions for the grader interface " Grading panel header With a screen reader enabled, navigate to the forum page. Press " Grade users " Using the keyboard, navigate to the header of the grading panel. Confirm that the first element that receives focus is the " -> " button. Confirm that the " -> " button is now being announced as " Hide grader panel " Tab to the search button. Confirm that it is being announced as " Show user search " Press the search button. Confirm that the user search UI is being shown. With the Search users text box focused, tab to the " x " button. Confirm that it is being annouced as " Hide user search ". Press Shift-Tab. Confirm that the last focusable item in the forum posts panel gets focused. Press tab to go back to the grading panel. Confirm that the Search users text field gets focused first. Press tab to shift focus to the " Hide user search button " Press the " Hide user search button " Confirm that when the search panel is closed, it is now back to a magnifying glass and is now being announced as " Show user search ". User switching With a screen reader enabled, navigate to the forum page. Press " Grade users " Confirm that you hear the name of the user that is currently being graded when the grading UI shows up. Using the keyboard, navigate to the grading panel until you reach the " < " button. Confirm that the screen reader reads it as " Save changes and proceed to the previous user ". Press the button. Confirm that after the previous user has been loaded, you hear the name of the user as the one that is now being graded. Tab to the " > " button. Confirm that the screen reader reads it as " Save changes and proceed to the next user ". Press the button. Confirm that after the next user has been loaded, you hear the name of the user as the one that is now being graded.
    • 1
    • International 3.9 - Sprint 5, International 3.9 - Sprint 9

      • Navigate to the "Grade Users" UI for a forum post
      • Input a grade in the "Grade" field
      • Navigate back to the "Next" link and click
      • A screen reader perceivable message "Grade saved for ..." is presented.

       

      The accessibility and usability issues here can be parsed in a few ways:

      • That the "Next" element is marked up as a link doesn't conform to WCAG 2.1 4.1.2 because, when data is present, it functions as a submit button. Users do not typically expect clicking a link to submit data. (There is arguably no 4.1.2 issue if there is no data in the "Grade" field, because it is functioning as a link.)
      • You could view the same issue as a WCAG 2.1 1.3.1 nonconformance, since the relationship between the navigation and the form is not clear, and submitting data by not clicking a link is not semantics. (WCAG 1.3.1 generally hopes for valid semantics.)
      • Since there are no instructions indicating that the way to submit the data is by clicking the link, the interaction does not really conform with the spirit of WCAG 2.1 3.3.2, which expects helpful instructions for forms.
      • While the grade submitted status message is perceivable by screen readers, the is no indication that the student presented has updated (that the link has taken the user to a new student.) The new student's name and the "X out of Y" change in context are not updated. so this does't conform to WCAG 2.1 4.1.3. To demonstrate this, click the "Next" button without data entered into the grade field. No status message is presented to the user even though the student displayed has been updated.
      • Though not a strict accessibility nonconformance but a usability concern: when clicking the "Next" or "Previous" button, focus remains on the link, which may suggest to a screen reader user that nothing has changed when clicking it, especially when there is no status message. Moving focus to, say, the users name may help indicate to the user that clicking a link has in fact navigated to a new resource.
      • Typically, in forms, submit buttons occur at the end of the form. Since the "Next / Previous" buttons appear at the top of the form, and no explicit submit button is present, and no instructions are present, a user may be confused how to submit the form information. It can also be cumbersome to navigate to the end of the form to submit data, and then navigate back through the form to find the submit button.

      I'm not sure whether these would be usability issues without testing with users with disabilities, and if they have said they have no issue with the UI, that's great. But if usability testing hasn't done, the overall interaction might be a candidate for testing and redesign.

      In the mean time, adding instructions that clicking the Next button will submit data, if any data is present, and providing status updates that the UI has navigated to a new student, would present immediate accessibility improvements.

        1. bottom-part-cut-off.png
          bottom-part-cut-off.png
          187 kB
        2. Screenshot_1.png
          Screenshot_1.png
          73 kB
        3. Screenshot_2.png
          Screenshot_2.png
          165 kB
        4. Screenshot_3.png
          Screenshot_3.png
          87 kB
        5. Screenshot_4.png
          Screenshot_4.png
          67 kB

            jpataleta Jun Pataleta
            michaelwayneharris87 Michael Wayne Harris
            Shamim Rezaie Shamim Rezaie
            Adrian Greeve Adrian Greeve
            Janelle Barcega Janelle Barcega
            Votes:
            3 Vote for this issue
            Watchers:
            11 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 week, 4 hours, 47 minutes
                1w 4h 47m

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