LittleBigTable icon indicating copy to clipboard operation
LittleBigTable copied to clipboard

Associate `label` and `input` tags together via `for` and `id` attributes for accessibility

Open adamjohnson opened this issue 4 years ago • 0 comments

In the complete example, the Search and Show inputs have labels, but they are not programmatically associated with their inputs via for and id attributes.

Right now the markup is like this:

<label class="label">Search</label>
...
<input class="input" type="text" placeholder="Start typing..." x-model="params.search" @keyup.debounce.350="doSearch()">

In order to associate the <label> with the <input>, for and id attributes need to be applied:

<label for="littleBigTable-search" class="label">Search</label>
...
<input id="littleBigTable-search" class="input" type="text" placeholder="Start typing..." x-model="params.search" @keyup.debounce.350="doSearch()">

Here's a great article on how to create accessible forms and another site with many examples of accessible form markup.

adamjohnson avatar Aug 16 '21 16:08 adamjohnson