Question

If you create a buttonset of radio/checkbox inputs using jQueryUI, you must use explicit labels. This means you must associate a label by ID to an input.

If you want to use multiple identical buttonsets on the same page, this means you can’t just use the same code for every buttonset, because ID’s must be unique in a document.

Most browsers will accept non-unique ID’s, but I’d rather not be forced to break web standards, and obviously there is no guarentee that browsers will continue to support non-unique ID’s in the future.

I could generate unique ID’s for every situation, but that complicates code and adds the problem of guarenteeing the ID’s are indeed unique.

What is the best way to deal with multiple identical buttonsets?

This demonstrates the issue: http://jsfiddle.net/C3NyV/1/

In my particular situation, the buttonset is generated by a plugin created using the Widget factory. I don’t know if this helps with a solution for this particular problem.

Answer 1

Regardless of jQuery UI you should be matching all input’s id attributes to a label with the for attribute for accessibility reasons. When a screen reader encounters an input field it looks for a matching label using this criteria.

Instead of generating a unique identifier I would recommend using something more semantic to differentiate between the different sets. It may be more work but it’ll be more standard, accessible, and maintainable code.