Using ARIA to make invalid form inputs accessible

This sample form has two invalid form inputs. Each is pointing to a single alert that states the inputs are invalid becuase they are required.

sample form

The field is required

Video Screencast

Code

<form>
<label for="fin">Financial Institute Name</label>
<input id="fin" name="fin" aria-describedby="fin-error"  type="text" aria-invalid="true" required="required"    />

<strong id="fin-error" role="alert">The field is required</strong>

<label for="acc">Account Nickname</label>
<input id="acc" name="acc"  type="text" aria-describedby="fin-error" aria-invalid="true"  required="required"    />


<label for="can">Confirm number</label>
<input id="can" name="can"  type="text" required="required"  />

</form>