LittleBigTable
LittleBigTable copied to clipboard
Associate `label` and `input` tags together via `for` and `id` attributes for accessibility
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.