There's a few accessibility problems here.
- Use the autocomplete attribute on the fields that can be auto filled.
- You don't need role alert as well as aria-live. Stick to aria-live, then use aria-desciribedby on he input pointing to the ID of its error. That way, the errors and inputs will be programmatically linked.
- Add
focusable="false"
to the svgs. They are added to the tab order by some screen readers.
Marked as helpful
@joshjavier
Posted
Thanks @grace-snow! These are very helpful points. I've already applied the changes to my solution.