How to Design Accessible Forms with HTML and CSS

Table of Contents

1. Introduction
2. Components of a form
3. Accessible Forms with HTML
4. Accessible Forms with CSS
5. Conclusion

---

Introduction

Forms are integral part in building a website. They are used to collect data from users when they submit their details. Forms are important in the interaction of users submitting their sign up form, login in form, subscribing to newsletter or sending message to receive feedback. Creating accessible forms is important to everyone especially the screen readers to fill the form without any problem.

---

Components of a form

A form is composed of different components such as

• form: this is the container that accept all other form elements like input tag, submit button, textarea, checkboxes and radio button

<form></form>

• input: this is the HTML element that accepts the user details. The input tag is served depending on the purpose of input; text, number, password, email among other things

<form>
      <input type="text" />
      <input type="email" />
      <input type="password" />
      <input type="radio" />
      <input type="checkbox" />
      <input type="file" />
      <input type="range" />
      <input type="color" />
      <input type="date"/>
</form>

• label: this tag that give an outline of the detail to fill in an input. It associate with the input tag.

<form>
<label for="email">Email</label>
<input type="email" id="email" name="name"/>
</form>

• textarea: this is an multi-line input tag that accept 524,288 characters by default except the maxlength attribute is set up to a value. It is used to accept reviews, messages and comments from the users

<form>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
</form>

• select: this element is for creating a dropdown in which the users are able to select one option by default or more options when the attribute multiple is being used.

<form>
<select id="country" name="country" required>  
    <option value="">Select your country</option>  
    <option value="ng">Nigeria</option>  
    <option value="usa">USA</option>  
    <option value="canada">Canada</option>  
    <option value="uk">United Kingdom</option>  
</select>
</form>

• checkbox: this element allow users to select one or more options.

<form>
<label for="subscribe"></label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">  
</form>

• button: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server.

<form>
<button type="submit">Submit</button>
</form>

---

Accessible forms with HTML

• Include sematic tags

Using the right sematic tags such as <form>,<input>, <label>, <select>,<button> and <textarea>

<form>
<label for="name">Name</label>
<input type="type" id="name" name="name"/>
<label for="email">Email</label>
<input type="email" id="email" name="email"/>
</form>

• Always use label in your forms

This gives the screen readers access to input with ease. Using the for Attribute in label element must match the id of the input element.

<form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required />
</form>

• Proper use of Accessible Rich Internet Application (ARIA) attributes.

Examples are aria-label, aria-labelledBy, aria-hidden, aria-describedBy, aria-required, aria-invalid, aria-placeholder, aria-expanded, aria-checked.

<form>
<button aria-label="add">+</button>
</form>

<form>
<h2 id="profile">Profile Information</h2>
<form aria-labelledby="profile">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
</form>
</form>

❌ Don't over use them

• Provide clear instructions

This includes the guide before or while filling the form to outline the information that is relevant. it could be a hint inform of paragraph or a placeholder text.

• Provide error message.

This is essential to users which notify them that an error has been made. The error message should be descriptive.

• Use HTML built-in validations in the forms

Examples are required, maxlength, minlength,pattern,type,min and max.

<form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required />
</form>

<form>
  <label for="quantity">Quantity (1-10):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
  <button type="submit">Submit</button>
</form>

Accessible forms with CSS

• Make form responsive
  Create forms that are accessible across devices.

• Provide focus inclined inputs
  This allow users to navigate the form properly.
  

input:focus{
  outline: 3px solid #000080; 
}

input:valid{
  outline: 3px solid #000080; 
}

input:invalid{
  outline: 2px solid red;
}

• Hidden labels If you don't want visual labels, style it to be visually-hidden or have class name of sr-only.

Conclusion

I hope you have been convinced on the proper way to create accessible forms using HTML and CSS. Until next time, Catch me on X and Linkedin