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.