More accessible in HTML Form

image taken from

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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
azrizhaziq

azrizhaziq

More from Medium

How to style dl, dt, and dd HTML tags

Accessibility checks and best practices for Web Development

Block, Inline & Inline-block. What’s the difference?

Block elements