Pro Forms: Accessibility Improvement

Feature Requests
#1

I’m not an expert but some keyboard/screen reader accessibility improvements are currently needed in the Pro-Forms

  1. Currently, in a multistep form, without filling in any of the input, when I press the enter key, it takes me to the second page even though there are errors and I have set different live validation rules for different input fields.
  2. The radio buttons should ideally be using <fieldset> and legend or role="radiogroup" and aria-labelledby as shown in MDN or APG
  3. The live validation error message should be linked to the form input using aria-invalid and aria-describedby.
  4. Ideally, in a multistep form, when I press the next button and there are errors with any of the current fields, it should take my focus back to the first form input with errors and announce the error
  5. If there are no errors, the next button should move to the next page with a focus on the first focusable input

I did all my tests using the keyboard and NVDA screen reader for Windows

5 Likes
#2

So, ideally, this is how the radio group should look like:

  1. Using <fieldset> and <legend> 
<fieldset id="" class="" role="radiogroup" data-element-id="" data-custom-id="" data-field-type="">
  <legend id="gender-label2"> Gender </legend>
  <div class="" data-element-id="">
    <input type="radio" id="f-0eb6b5" name="form-field-gender2[]" data-label="Male" value="Male" checked wfd-id="">
   <label for="f-0eb6b5">Male</label>
 </div>
 <div class="" data-element-id="">
   <input type="radio" id="f-8376f5" name="f-gender2[]" data-label="Female" value="Female" wfd-id="">
  <label for="f-8376f5">Female</label>
 </div>
<fieldset>
  1. Using <div role="radiogroup"> 
<div id="" class="" role="radiogroup" aria-labelledby="gender-label" data-element-id="" data-custom-id="" data-field-type="">
   <h3 id="gender-label"> Gender </h3>
   <div class="" data-element-id="">
    <input type="radio" id="form-field-gender-0eb6b4" name="form-field-gender[]" data-label="Male" value="Male" checked wfd-id="">
    <label for="form-field-gender-0eb6b4">Male</label>
  </div>
  <div class="" data-element-id="">
    <input type="radio" id="form-field-gender-8376f4" name="form-field-gender[]" data-label="Female" value="Female" wfd-id="">
    <label for="form-field-gender-8376f4">Female</label>
  </div>
</div>

Otherwise, the radio group name is not announced to screen readers (tested using NVDA).

2 Likes
#3
  1. The live validation error message should be linked to the form input using aria-invalid and aria-describedby.

With regards to the live invalid message, you can read more about it on W3C and see it in action when you submit invalid text on Geary.co where he uses WSForm.