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. 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

• 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

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

Email

• 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

Message: <ul> <li> <strong>select</strong>: 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. </li> </ul> <pre class="brush:php;toolbar:false"></pre> <form> <select> <ul> <li> <strong>checkbox</strong>: this element allow users to select one or more options. </li> </ul> <pre class="brush:php;toolbar:false"></pre> <form> <label for="subscribe"></label> <input type="checkbox"> <ul> <li> <strong>button</strong>: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server. </li> </ul> <pre class="brush:php;toolbar:false"></pre> </form> <form> <button type="submit">Submit</button> </form> <hr> <h2> Accessible forms with HTML </h2> <ul> <li>Include sematic tags</li> </ul> <p>Using the right sematic tags such as </p> <form>,<input>, <label>, <select>,<button> and <textarea><br> <pre class="brush:php;toolbar:false"></pre> <form> <label for="name">Name</label> <input type="type"> <ul> <li>Always use label in your forms</li> </ul> <p>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.<br> </p> <pre class="brush:php;toolbar:false"></pre> </form> <form> <label for="username">Username:</label> <input type="text"> <ul> <li>Proper use of Accessible Rich Internet Application (ARIA) attributes.</li> </ul> <p>Examples are aria-label, aria-labelledBy, aria-hidden, aria-describedBy, aria-required, aria-invalid, aria-placeholder, aria-expanded, aria-checked.<br> </p> <pre class="brush:php;toolbar:false"></pre> </form> <form> <button aria-label="add">+</button> </form> <pre class="brush:php;toolbar:false"></pre> <form> <h2> </h2> <p>❌ Don't over use them</p> <ul> <li>Provide clear instructions</li> </ul> <p>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.</p> <ul> <li>Provide error message.</li> </ul> <p>This is essential to users which notify them that an error has been made. The error message should be descriptive.</p> <ul> <li>Use HTML built-in validations in the forms</li> </ul> <p>Examples are required, maxlength, minlength,pattern,type,min and max.<br> </p> <pre class="brush:php;toolbar:false"></pre> </form> <form> <label for="username">Username:</label> <input type="text"> <pre class="brush:php;toolbar:false"></pre> </form> <form> <label for="quantity">Quantity (1-10):</label> <input type="number"> <h2> Accessible forms with CSS </h2> <ul> <li><p>Make form responsive<br> Create forms that are accessible across devices.</p></li> <li><p>Provide focus inclined inputs<br> This allow users to navigate the form properly.<br> </p></li> </ul> <pre class="brush:php;toolbar:false">input:focus{ outline: 3px solid #000080; } </pre> <pre class="brush:php;toolbar:false">input:valid{ outline: 3px solid #000080; } </pre> <pre class="brush:php;toolbar:false">input:invalid{ outline: 2px solid red; } </pre> <ul> <li>Hidden labels If you don't want visual labels, style it to be visually-hidden or have class name of sr-only.</li> </ul> <h3> Conclusion </h3> <p>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</p> </form>

The above is the detailed content of How to Design Accessible Forms with HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!