<h1>Input Forms Accessiblity - Get "A" certified</h1>

In this post we’ll be discussing how to create accessible input forms to reach level A of accessibility certification.

Certification

In total, there are three levels of accessibility certification for your web app:

1. A
2. AA
3. AAA

By law, you must be A certified if you are:

• a private or non-profit organization with 50+ employees; or
• a public sector organization

Starting in 2021, your app must reach level AA

Input Fields

One of the factors for achieving A level is Error Identification, here's how to make error identification more accessible:

1. Notifying a User when they have incorrect input
   It's best to programmatically connect an error message with a failed input field. But if you can't, set aria-invalid = "true" on the failed fields
   • It should not be set to “true” before input validation is performed or the form is submitted.
   • If it’s done programmatically, you’re not required to use aria-invalid
2. Displaying error messages:
   To display an error message, give it role="alertdialog"
   
   
   
   
   
   
3. How to design the Form:
   
   • Give each input field an HTML5 label tag, so that it will be read by the screen reader
   • Place each label beside the field so users that use zoom will be able to see both at once
   • Give examples for input that needs to be formatted a specific way like dates and addresses
   • Use aria-labelledby to tell the user a field is required. It doesn’t mean you can’t use asterisks, color or other visual cues, you just need both.
   • Group together related input fields visually but also using roles. For example: put the your radio button input fields into a div with the role="radiogroup"
     
     
     

If you want to explore these concept in more detail, see the Reference below!

Reference and Credit: Ontario.ca - How to make Websites Accessible