Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Deck of Cards
idcomponent_details
Card
idusage
defaulttrue
labelUsage

Usage

Selecting a single item

Radio buttons

An example of a radio button results list with nothing selected.

An example of a radio button results list with a single item selected.

Quick summary of features:
  • Used when only a single item is allowed to be chosen or returned.
  • Radio buttons to the left provide additional visual cues as to the interaction (suggesting only one option may be chosen).
  • The entire result row is clickable making for a larger click-target. Clicking the row also checks the radio button for accessibilityradio button and its label are clickable.
  • Other clickable items, such as an inquiry or lookup, may be included in the row.

Action buttons

An example of a results list where, rather than options being selected, actions may be performed on the results via button groups.

Quick summary of features:
  • Used when actions need to be performed on results. Most commonly found in collection tables after results have been added.
  • Contain a button or a button group to the far right. Button groups should feature the primary action as one button, and all other actions in the dropdown.
  • May use an icon button or a link (such as Delete) in place of a button or button group if that is the only action.

Links

A set of results with the primary action being a link to the result itself.

Quick summary of features:
  • Useful in search results cases where the goal is to query something then navigate to a found result (i.e., search results).
  • Table footer <tfoot> contains the total number of search results, which should describe the name of the table (e.g., "Search results, 3 results found"). This can be done using id and aria-describedby.
  • May contain popovers and tooltips in the results row.

Selecting multiple items

Checkboxes

A result table with three options, none of them selected.

A result table with three options, two of which are selected via checkboxes.

Quick summary of features:
  • Used when building a collection, or when multiple results are to be returned at a given time.
  • Checkboxes to the left provide additional visual cues as to the interaction (suggesting multiple options may be selected).
  • The entire result row is clickable making for a larger click-target. Clicking the row also checks the checkbox for accessibilitycheckbox and its label are clickable.
  • Other clickable items, such as an inquiry or lookup, may be included in the row.
Card
iddemos
labelDemos

Demos

Selecting a single item

Radio buttons

Code Block
linenumberstrue
languagexml
firstline0
<table id="single_radio" class="table table-hover">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="radio" id="r01" name="single_radio" value="" /></td>
            <td><label for="r01">Alfred Hitchcock</label></td>
            <td>123 Twilight Zone, Apartment 0</td>
            <td>(800) 555-1212</td>
        </tr>
        <tr>
            <td><input type="radio" id="r02" name="single_radio" value="" /></td>
            <td><label for="r02">Lurch</label></td>
            <td>Adams Family House</td>
            <td>(222) 666-3131</td>
        </tr>
        <tr>
            <td><input type="radio" id="r03" name="single_radio" value="" /></td>
            <td><label for="r03">Slimer</label></td>
            <td>Any hotel around New York</td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" class="text-right">
                <button type="button" class="btn btn-primary">Continue</button>
            </td>
        </tr>
    </tfoot>
</table>

 

Action buttons

Code Block
linenumberstrue
languagexml
firstline0
<table id="single_action" class="table table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="r21">Alfred Hitchcock</td>
            <td>123 Twilight Zone, Apartment 0</td>
            <td>(800) 555-1212</td>
            <td class="text-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-sm" aria-describedby="r21">Open</button>
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">More options...</span>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td id="r22">Lurch</td>
            <td>Adams Family House</td>
            <td>(222) 666-3131</td>
            <td class="text-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-sm" aria-describedby="r22">Open</button>
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">More options...</span>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td id="r23">Slimer</td>
            <td>Any hotel around New York</td>
            <td></td>
            <td class="text-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-sm" aria-describedby="r23">Open</button>
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">More options...</span>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

 

Links

Code Block
linenumberstrue
languagexml
firstline0
<table id="single_result" class="table table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#">Alfred Hitchcock</a></td>
            <td>123 Twilight Zone, Apartment 0</td>
            <td>(800) 555-1212</td>
        </tr>
        <tr>
            <td><a href="#">Lurch</a></td>
            <td>Adams Family House</td>
            <td>(222) 666-3131</td>
        </tr>
        <tr>
            <td><a href="#">Slimer</a></td>
            <td>Any hotel around New York</td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" tabindex="0"><strong>3</strong> results found.</td>
        </tr>
    </tfoot>
</table>

 

Selecting multiple items

Checkboxes

Code Block
linenumberstrue
languagexml
firstline0
<table id="multi_checkbox" class="table table-hover">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="r31" name="multi_checkbox" value="" /></td>
            <td><label for="r31">Alfred Hitchcock</label></td>
            <td>123 Twilight Zone, Apartment 0</td>
            <td>(800) 555-1212</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="r32" name="multi_checkbox" value="" /></td>
            <td><label for="r32">Lurch</label></td>
            <td>Adams Family House</td>
            <td>(222) 666-3131</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="r33" name="multi_checkbox" value="" /></td>
            <td><label for="r33">Slimer</label></td>
            <td>Any hotel around New York</td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" class="text-right">
                <button type="button" class="btn btn-primary">Continue</button>
            </td>
        </tr>
    </tfoot>
</table>

 

View examples of search/lookup results on JSFiddle

Card
idaccessibility
labelAccessibility Considerations
nextAfter0
Section

Accessibility Considerations

Tables

As with all tables, proper markup will help considerably in how the data within them are read. Consider your markup and make sure it's semantic and valid. Avoid using nested tables.

Forms (radio buttons and checkboxes)

Despite our results being in a table, proper use of labels and id's should be used. In our examples, we're putting the primary piece of result data (i.e., a name or a document number) as the label for the radio button or checkbox. The row itself should be aria-describedby or aria-labeledby the same id to tie everything together.

We use JavaScript to listen for row clicks which also check or uncheck the respective control. Because this is a visual/sighted action, default keyboard navigability and control to interact with radio buttons, checkboxes, links and buttons should be maintained. For example, once the user Tab's into the radio button group or checkbox group, using the keyboards arrow keys should move the selection (with radio buttons) and the spacebar should check or uncheck checkboxes (with checkbox groups).

Popovers

Popovers here should adhere to the same accessibility considerations found for popovers in the Help and Messaging specification document. The use of ARIA should be used along with an indication that the popover is open or closed. Additionally, focus should be sent to the popover content once it's displayed. Closing the popover should return focus back to the initiating element.

Accessibility Resources:

As always, use valid, semantic, proper HTML markup to optimize accessibility and usability tables and results list.

W3 HTML Validator
WebAim WAVE 

Card
idkeyboard-shortcuts
labelKeyboard Shortcuts

Keyboard Shortcuts

Default and inherent keyboard functionality should be maintained for both table navigation, tabular data navigation, and form navigation and manipulation. No scripting should interfere with this inherent and commonly understood behavior.

Card
idcomponent_discussion
titleResearch and Discussion
labelResearch & Discussion

Research and Discussion

None at this time.