Guide to Accessible HTML Forms

In our everyday lives, online forms are something that we come across again and again so forms should be accessible to anyone irrespective of their abilities or technological proficiency. This means that people with visual, auditory, cognitive, and motor impairments should be able to use forms with ease.

In this article we will provide you with some helpful tips on how you can create accessible forms.

Web Accessibility

Web accessibility is a term that refers to designing and developing websites in a way that accommodates users with various types of disabilities, including auditory, cognitive, neurological, physical, speech, and visual impairments.

Web accessibility ensures that people with disabilities can perceive, understand, navigate, interact with, and contribute to the web.

What is Form Accessibility?

Form accessibility refers to the practice of designing and implementing online forms in such a way that they can be used effectively by all individuals, including people with disabilities. Accessible form are critical component of a web accessibility, as they allow users with visual, auditory, motor, or cognitive impairments to interact with the forms.

Key features of Form Accessibility

Screen Reader Compatibility

Screen reader compatibility is important for users with visual impairments who rely on these assistive technologies to interact with digital devices. A developer should always test a form with popular screen readers to verify that all form elements are correctly communicated to the user. This is typically achieved using semantic HTML elements like <label> and attributes such as aria-describedby for additional context.
Keyborad Navigation

People with impaired vision or motor function use keyboards to navigate online forms. The tab key lets users jump between links and form controls. Some people, regardless of ability, prefer navigating this way because it’s easier on the hands and faster than using a mouse. This is typically achieved using semantic HTML elements whose name clearly identifies its purpose, such as <form> or <button>.
Labels

Label tags (<label> and </label>) are required to make your form accessible to screen reader users. The assistive technology will announce the text within them when it reaches its associated form input. Label tags also create a clear visual label.

To associate a <label> with an <input>, set the identifier(ID) in the <input> to correspond with the for attribute of the <label>.
```
 <form>
   <label for="firstName">First Name</label>
   <input type="text" id="firstName" name="firstName"/>
 </form>
```

Provide Error Messages

Everyone make mistakes and when we make it we need to understand why we have failed so that we are able to correct it ourselves. An accessible forms provide clear error messages when users input invalid data. These messages should be visible and announced by screen readers so that all users can correct their input.

 <form>
   <label for="username">Enter a username</label>
   <input type="text" id="username">
   <p class="hint hidden" id="usernameHint" >Your username cannot contain punctuation</p>

   <label for="email">Enter your email address</label>
   <input type="text" id="email">
   <p class="hint hidden" id="emailHint">Please enter a valid email address</p>

 </form>

 .hidden {
   display: none
 }

 .hint {
   color: red;
 }

Logical Grouping

The grouping related inputs in HTML forms uses the <fieldset> and <legend> elements for enhancing the accessibility for users relying on screen readers. These tags provide a logical structure that helps in convey the relationship between questions and their corresponding options.

The <fieldset> tag tells the form that a group of inputs belongs together, and the <legend> tag acts as a label for the group of inputs. If your code doesn’t have these elements, people using screen readers will hear the label for each option but not the question it is answering.

Consider this form question:

The code with proper <fieldset> and <legend> tags looks like this:
```
   <fieldset>
     <legend>Are you a cat person or a dog person?</legend>
     <div>
       <input type="radio" name="animal" value="cat-person" id="cat-person">
       <label for="cat-person">cat person</label>
     </div>
     <div>
       <input type="radio" name="animal" value="dog-person" id="dog-person">
       <label for="dog-person">dog person</label>
     </div>
     <div>
       <input type="radio" name="animal" value="both" id="both">
       <label for="both">both</label>
     </div>
     <div>
       <input type="radio" name="animal" value="neither" id="neither">
       <label for="neither">neither</label>
     </div>
   </fieldset>
```
Without the <legend> tag in your code, a screen reader would only read out the labels for each input—cat person, dog person, both, and neither.
ARIA Labels

ARIA—Accessible Rich Internet Applications—is a set of related HTML attributes that includes instructions and information for screen readers. The attributes, such as aria-label and aria-labeledby don’t display anything on the web page instead they provide information to someone who is relying on a screen reader to understand the form.

Say, for example, you have a field with a button that says “Search”:

This field is visually clear, but to make it accessible to screen readers, it needs an ARIA attribute:
```
   <input type="text" name="search" aria-label="Search">
   <button type="submit">Search</button>
```

Conclusion

Creating accessible HTML forms is a crucial step in ensuring inclusivity on the web. By implementing best practices such as proper use of labels, clear instructions, keyboard navigation, and ARIA attributes where needed, we can make our forms usable for everyone, including those with disabilities.

How to Create Accessible HTML Forms

Web Accessibility

What is Form Accessibility?

Key features of Form Accessibility

Conclusion