Accessible Forms

Guidance on the way to create form that meet WCAG

  1. What is web accessibility?
  2. Why are accessible forms important?
  3. How to make accessible forms
    • Write semantic HTML
    • Use appropriate HTML input types
    • Connect HTML input types to their labels
  4. Accessible Forms Concepts
    • Form Instructions
    • Labeling Controls
    • Grouping Controls
    • Validating Input
  1. What is web accessibility?

    Web accessibility is that the practice of constructing your website and web tools more accessible in order that as many folks as possible with disabilities can use them. Adapting your site to form it more accessible ensures that anyone can use your site, irrespective of their circumstances. That way nobody is at a drawback.

  2. Why are accessible forms important?

    Accessibility is typically perceived only to accommodate blind users, but it goes far beyond just that. This helps people to identify the aim of any given piece of content, no matter the strategy that they use to access the online site and web tools. There are varying kinds of disabilities, which include temporary disabilities like hand or arm injuries, situational disabilities like slow internet, and permanent ones like blindness et al.

    We want to make sure all our users are able to use forms without having a poor experience at any point in time, and so the goal is to make these key user interactions as friction less as possible. When forms are made accessible, they’re easier to use for not just people with disabilities, apart from everyone.
  3. How to make accessible forms

    There are some ways to assist improve forms and make them closer to being completely accessible to everyone. Here are a pair recommendations.

    1. Write semantic HTML
      Semantic are favorite because lots of accessibility issues can already be taken care of if the correct HTML element is employed. This technology also uses semantic HTML tags to grasp how best to convey each of element to its user. Like button, labels, fieldsets, legends etc.
    2. Use appropriate HTML input types
      There are numerous HTML input types, each created to form it easier to retrieve a selected style of data from the user. By specifying the correct type, for, aria-label, aria-labelledby and name attributes etc.
    3. Connect HTML input types to their labels
      I think labels are one amongst the foremost underrated elements in HTML. they’re quite powerful and make lots of things work better. except for the presentational purpose of knowing what data the input is requesting to take, it may be taken a step for By connecting labels on to the input using the “for” attribute, we will have increased usability.

      <label for="fristName">Frist Name</label>
      <input type="text" name="frist name" id="fristName">
  4. Accessible Forms Concepts

    Forms are commonly accustomed provide user interaction on websites and in web applications. as an example, login, registering, commenting, and buying. the identical concepts apply to any or all forms, whether or not they are processed client or server-side.

    1. Form Instructions
      overall form instructions. Where relevant, instructions that apply to the whole form should be provided before the form element. this could confirm that instructions are enhanced by screen readers before they switch to forms mode. as an example, indicate any required fields, allowed date formats, and password limitations. Screen readers often switch to “Forms Mode” once they’re processing content within a <form> element. during this mode they typically only read about form elements like<input>, <select>, <textarea>, <legend>, and <label>. It is critical to include form instructions in ways that can be read aloud.
    2. Labeling Controls
      • label element

        <label for="firstname">First name:</label>
        <input type="text" name="firstname" id="firstname">
        <input type="checkbox" name="subscribe" id="subscribe">
        <label for="subscribe">Subscribe to newsletter</label>

      • Using aria-label

        <input type="text" name="search" aria-label="Search">
        <button type="submit">Search</button>


      • Using aria-labelledby
        The id of the element containing the label text is used as the value of the aria-labelledby attribute.

        <input type="text" name="search" aria-labelledby="searchbutton">
        <button id="searchbutton" type="submit">Search</button>
    3. Grouping Controls
      Radio buttons

      <legend>Output format</legend>
      <input type="radio" name="format" id="txt" value="txt" checked>
      <label for="txt">Text file</label>
      <input type="radio" name="format" id="csv" value="csv">
      <label for="csv">CSV file</label>

      Check boxes

      <legend>I want to receive</legend>
      <input type="checkbox" name="newsletter" id="check_1">
      <label for="check_1">The weekly newsletter</label>
      <input type="checkbox" name="company name" id="check_2">
      <label for="check_2">Offers from the company</label>


    4. Validating Input
      This the foremost powerful new features of HTML5 is its support for validation built into the HTML of the sector. this is often very easy to keep up with minimal code and is very accessible since the error messages come directly from the browser and are well-supported by screen readers. additionally to the specified attribute described within the previous section, HTML5 also includes the pattern attribute, which might be wont to define specific patterns of acceptable input for the given field using regular expressions.

      <label for="name">Name (required): </label>
      <input type="text" name="name" id="name" required aria-required="true">

About The Author