Most components are not keyboard accessible

When attempting to navigate the survey via keyboard, only the text boxes are focusable. Check boxes, radio buttons, and rating scales are neither focusable nor settable using the keyboard.

For comparison, here are the native HTML element versions (zero JS/CSS):
https://codepen.io/lionel-rowe/pen/BaLMdrO

In particular:
* Pressing Tab focuses the next form element. For radio buttons, this is the next element after the radio button group, identified by having the same name attribute, rather than the next radio button within the group.
* Pressing Shift+Tab navigates to the previous form element.
* When focused, all elements have visible styles to indicate that they are focused.
* Pressing Space while a checkbox is focused toggles its state.
* While a radio button group is focused, pressing Left or Up selects the previous radio button. Pressing Right or Down selects the next radio button. Both directions wrap within the same radio button group.
* While a range slider is focused, pressing Left or Down reduces the value. pressing Right or Up increases the value. Neither direction wraps.

It’s possible to implement all this behavior from scratch using JavaScript, but it would be a lot easier and less error prone to simply use semantic HTML elements already available. Range slider looks to be supported by Internet Explorer 10, so it should be fine unless you need to support IE9 or below. Also, I think part of the problem with the existing radio-button and checkbox elements is that the semantic HTML versions you’re using are set to display: none, so the browser doesn’t make them focusable. To remain focusable, you can use other styles that effectively hide them, for example:

  display: block;
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  right: 10000px;

• This topic was modified 3 years, 10 months ago by lionelrowe.