This document demonstrates accessibility design standards that I established at Debtsy, the fin-tech startup where I lead frontend engineering.

We build a lot of forms at Debtsy and I wanted to come up with a way for our development team to easily ensure that our forms are navigable by keyboard for the sake of supporting users who struggle to navigate by mouse.

Keyboard Accessibility

Auto-Focus the First Field of a Form

By auto-focusing the first field of a form when the form is rendered, we save users time and hassle in selecting the form. Once the user has the first field of the form selected, proceeding through the form is relatively easy.

https://www.loom.com/share/ac92eef3dd4b42afbcb542c6f0eb42da

// Using React with MaterialUI

<Field
  label="Housing Cost"
  name="housingExpense"
  onChange={onChange}
  className={classes.input}
  component={TextField}
  InputProps={{
    inputComponent: FormattedNumberInput,
    startAdornment: (
      <InputAdornment position="start">$</InputAdornment>
    ),
    autoFocus: true // to auto-focus text input
  }}
  variant="outlined"
  {...centsFormatProps}
/>

Auto-Focus and Auto-Select the First Radio Button

Radio buttons are selected using the keyboard by navigating to them via the arrow keys. If we don't auto-select the top radio button, the user could only select the top radio button after pressing the down arrow key to select the 2nd radio button, and pressing the up arrow key to navigate to the previous (1st) radio button.

https://www.loom.com/share/0333b85737c4413f85a3e695ab85027d

// Using React with MaterialUI

<Form
  initialValues={{ studentStatus: "non-student" }} // to auto-select radio
  ...
/>
...
  <Field
    name="studentStatus"
    value="non-student"
    component={Radio}
    type="radio"
    variant="outlined"
    autoFocus // to auto-focus radio
  />
...