Accessibility Improvement: WCAG Compliance with Input Labels

[FlashPanther]

Hello,
I am currently working with tom-select and I've noticed something that could be improved in terms of web accessibility. According to the Web Content Accessibility Guidelines (WCAG), every input element in a form must be associated with a label to ensure better accessibility, especially for people using screen readers.
(https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html)

However, it appears that tom-select may not fully adhere to this guideline, which can make some form elements less accessible to users with specific needs. This could also impact the compliance of websites using tom-select with international web accessibility standards.

I suggest adding a feature or an option to ensure that every input element generated by tom-select is automatically associated with a label. This could be done through explicit association via the label's for attribute or other methods recommended by the WCAG.

Incorporating this improvement would not only enhance the accessibility of projects using tom-select but also their compliance with international regulations, thus improving the user experience for everyone.

Thank you for considering this suggestion and for your work on this project. I look forward to seeing how this suggestion could be integrated into future updates of tom-select.

[JoackimPennerup]

What plugins are used in you scenario? The plugins modify some of the core behaviours for label-handling, so it would be good to know what to look for in the code. Maybe share an example on Codepen or JsFiddle.

[FlashPanther]

Thx for your comment

No plugins used for this scenario.
It's a symfony integration via Autocomplete UX

[JDCain]

I was able to duplicate the issue using one of the examples and adding a label.
Code:

<label for="select-beast" class="form-label">select beast</label>
<select id="select-beast" placeholder="Select a person..." autocomplete="off">
    <option value="">Select a person...</option>
    <option value="4">Thomas Edison</option>
    <option value="1">Nikola</option>
    <option value="3">Nikola Tesla</option>
    <option value="5">Arnold Schwarzenegger</option>
</select>

Rendered:

<label for="select-beast-ts-control" class="form-label" id="select-beast-ts-label">select beast</label>
<select id="select-beast" placeholder="Select a person..." autocomplete="off" tabindex="-1" class="tomselected ts-hidden-accessible">
    <option value="">Select a person...</option>
    <option value="4">Thomas Edison</option>
    <option value="1">Nikola</option>
    <option value="3">Nikola Tesla</option>
    <option value="5">Arnold Schwarzenegger</option>
</select>
<div class="ts-wrapper single">
  <div class="ts-control">
    <input type="text" autocomplete="off" size="1" tabindex="0" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="select-beast-ts-dropdown" id="select-beast-ts-control" aria-labelledby="select-beast-ts-label" placeholder="Select a person...">
  </div>
  <div class="ts-dropdown single" style="display: none;">
    <div role="listbox" tabindex="-1" class="ts-dropdown-content" id="select-beast-ts-dropdown" aria-labelledby="select-beast-ts-label"></div>
  </div>
</div>

Error from Ax Tools.

[n3storm]

We are interested in solving this.

We propose to include an option to rename label to track new element id.

label_track_new_id: true

[JoackimPennerup]

I guess a workaround would be to hide the select completely. It seems wrong to have both the select and the tom-select in the DOM when you base it on the former. Maybe set display:none on .tomselected?