Widgets simply working for all
Let's think about the true spirit of a typical widget, for example a tablist: what is its purpose? It offers a list of items that are toggling the visibility of related containers. Only one item can be visible at a time, and if another one is activated, the previously active one gets deactivated automatically.
This sounds a lot like a group of radio buttons, does not it?
Tablist using radio buttons
<div class="tablist"> <fieldset> <legend>Tablist controls</legend> <input type="radio" name="tablist" value="dancing" id="dancing_label" checked /> <label for="dancing_label">Dancing</label> <input type="radio" name="tablist" value="soccer" id="soccer_label" /> <label for="soccer_label">Soccer</label> </fieldset> <div id="dancing_panel">...</div> <div id="soccer_panel" hidden>...</div> </div>
This is a huge improvement in every aspect, be it usability, accessibility, readability of code (and thus maintainability), or performance.
It is not always as easy as with tablists. But the approach of using standard HTML form controls to mimic modern control patterns can be applied to most requirements. In fact, this approach is the basic of most complex interactive code examples in this guide.
If you are really curious and want to learn more about this, skip ahead and read Interactive widgets.