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

Accessibility issues with 'clear my choice' feature in multiple choice questions

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Duplicate
    • Affects Version/s: 3.7.2
    • Fix Version/s: None
    • Component/s: Accessibility
    • Labels:
      None
    • Affected Branches:
      MOODLE_37_STABLE

      Description

      Currently, the 'clear my choice' feature in multiple choice questions functions by adding a visually hidden radio button to each question's radio group. This hidden radio button is checked by default, and the moment the student makes a selection, a 'clear my choice' button (that was previously visually hidden) becomes visible. This approach causes the following accessibility issues:

      1. The radio button is visually hidden, but since it's the selected one in the group by default, it's also in the tab order. A sighted user tabbing through the page will have no indication at all that the radio button is focused, let alone exists. Or that they can change the selected radio button using arrow keys. It will look like their focus disappeared completely (this is assuming the site admin added decent focus indicator styles to begin with), unnecessarily complicating and confusing the user experience. The same thing happens when the user changes the selection using arrow keys: focus just seems to disappear one keypress while the hidden radio button is focused. In short: an element should never be hidden while focused.
      2. The radio button is not labeled, which means that to a screen reader user it appears as if there is an extra possible answer to the question that just happens to lack a proper description. This radio button is in the tab order by default so it's pretty much guaranteed to be focused when tabbing through the questions. Again, this makes the UX unnecessarily confusing. In short: interactive form controls must always be labeled.

      Steps to reproduce: 

      1. Open a page with a multiple choice question on it
      2. Tab to the question 

      There no single way to address this, but this would be my approach:

      • In addition to the .sr-only class that the extra radio button already has, add Bootstrap's .sr-only-focusable class. This will make the radio button appear when focused, e.g. when tabbed to, or when selected via arrow keys. This will make it clear to keyboard users where their focus went, and mouse users won't ever notice the difference.
        • Currently the radio button's parent div also has an sr-only class, which would have to be removed in this approach.
        • It seems Boost's styles have overridden .sr-only-focusable's 'position' property by setting it to 'fixed' (probably to make skip links appear in the top left corner of the page). This is a bad idea in general, but if that can't be changed, another rule will have to be added to re-override the position of the focused element to 'static' (so that it won't appear in the top left corner).
      • The radio button needs to be properly labeled, to explain to screen reader users and sighted keyboard users why it's there. The label text could be something like "no choice selected". Note that this label would have to become visible together with the radio button when it's focused.

      I've created a simple example of what this would look and act like in this pen: https://codepen.io/hhillen/pen/abbKdjJ

      You can  tab through the example to see how it behaves.

       

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              hanshillen Hans Hillen
              Participants:
              Component watchers:
              Andrew Nicols, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: