More accessible in HTML Form

image taken from https://alistapart.com/article/prettyaccessibleforms

Hi, today I’m going to share how to make our form more accessible, which we usually forget to write in our code. Lets jump to the implementation.

Inside the codepen, try clicking the label for Not Accessible and Accessible. If you notice, when you click accessible form, the input will be autofocus and user will be able to start typing. Meanwhile for not accessible form, user will have to click second time to the input then will be able to start type.

The key points here is:

1. For every <input> try to associate with <label> .
2. Inside <label> put an attribute for and the value will be anything you like but must be the same id to that <input> .

Below is the same code in codepen:

Non Accessible
There is no id and for in this example.

<div class="border p-3">
    <div class="alert alert-warning">This is <b>not accessible</b> form</div>
    
    <form>
      <div class="form-group">
        <label>Title:   (click here)</label>
        <input type="text" class="form-control" placeholder="Enter title">
      </div>

      <div class="form-group">
        <label>Body:  (click here) </label>
        <textarea class="form-control" placeholder="Enter any message"></textarea>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

Accessible
Notice the bold text.

<div class="border p-3">
    <div class="alert alert-info">This is <b>accessible</b> form</div>
    
    <form>
      <div class="form-group">
        <label for="title">Title: (click here) </label>
        <input type="text" class="form-control" id="title" placeholder="Enter title">
      </div>

      <div class="form-group">
        <label for="body">Body:  (click here) </label>
        <textarea id="body" class="form-control" placeholder="Enter any message"></textarea>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

Thank you.