Designing with Progressive Enhancement: Building the Web that Works for Everyone

Chapter Eighteen. List Builder

As web applications start to more closely mirror the features of their desktop application cousins, we increasingly encounter situations where native HTML has no precedent for a UI element. One such example is the list builder widget.

In its simplest form, a list builder widget groups a number of words or phrases within an editable area. Each entry is typically “boxed” with a border or background color to make the list easy to scan, edit, and delete; and since each entry is treated like an independent unit, richer interactions like multi-select, drag-and-drop, action buttons, and context menus can be added.

List builder interactions can be found in a variety of common web applications, including:

• Sites with tagging ...