Greasy Fork

The form elements are not associated with the labels. This makes them less accessible and for unimpaired users it means they can't toggle the checkbox by clicking on the label text. :)

This is very easy to solve, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Text_labels_and_names#form_elements_must_be_labeled

DevTools in web browsers can also warn about this, for example Chrome does so in the issues tab or the Lighthouse tool and Firefox in its accessibility tab (Shift+F12): https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/ https://developer.chrome.com/docs/devtools/issues https://developer.chrome.com/docs/lighthouse/overview

The form elements are not associated with the labels. This makes them less accessible and for unimpaired users it means they can't toggle the checkbox by clicking on the label text. :)

This is very easy to solve, see:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label
https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Text_labels_and_names#form_elements_must_be_labeled

DevTools in web browsers can also warn about this, for example Chrome does so in the issues tab or the Lighthouse tool and Firefox in its accessibility tab (Shift+F12):
https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/
https://developer.chrome.com/docs/devtools/issues
https://developer.chrome.com/docs/lighthouse/overview

Thanks. Oddly enough the radio buttons (that show up if there's more than one option per vendor) and the textbox were already associated as child elements of their respective label but not the checkboxes. Then again, my earliest draft of the script which was most prone to mistakes included only the checkboxes.

Just posted an update where the input elements for the checkboxes are wrapped inside their associated label too.