Formik documentation should follow best accessibility practices (ie associating labels and errors to inputs)

[kaylee42]

📖 Documentation

A lot of the examples of using Formik in the docs don't associate labels or errors to inputs, which create problems for folks who use assistive technology to access the web. It would be nice to include examples that are accessible, as a way to implicitly raise awareness and model best behavior for other developers.

For example, here's the email input on the Overview page right now:

          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}

which could instead look like:

         <label htmlFor="email">Email:</label>    
         <input
            id="email"
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
            required
            aria-required="true"
            aria-invalid={!!errors.email}
            aria-describedby="emailError"
          />
          {errors.email && touched.email && <p id="emailError">errors.email</p>}

This example includes a label associated to the input, attributes indicating the field is required and whether or not it is invalid, and associates the error to the input, all of which are critical for screenreader users to be able to understand the form.

I think it would be great if all of the examples in the Formik docs modeled best practices for making forms accessible. It would be extra extra great to have a section in the documentation directly addressing form accessibility, but I think just providing the examples would be a great start!

[tordans]

+1 for the idea, kaylee42. Maybe not on the label/input example, but on the Form/Field examples. Or maybe first on the validation page at https://jaredpalmer.com/formik/docs/guides/validation / https://github.com/jaredpalmer/formik/blob/master/docs/guides/validation.md.

(Also, I hope this comment will remove the stale-label :-) – Success ✅ 😄).

[Ciavarella]

Bump! :) Please implement.

[turbolego]

Still not implemented? Any reasons why not?