Skip to content

Associate label and input tags together via for and id attributes for accessibility #6

@adamjohnson

Description

@adamjohnson

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions