Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Task marked complete
Section
Column
width80%
Panel
bgColor#f6f6f6
titleBGColor#333333
borderStylesolid
titleModals
borderColor#cccccc
titleColorwhite

Purpose: Provides guidelines for displaying search results and lookup results lists as well as functionality within them.

Category: Search results, lookup results, lists, content

Related jiras: None

Process Phase:

  •  UXI JIRA Created (insert link above)
  •  Component Specification draft complete
  •  UXI code review complete
  •  Reconcile with UIM and KRAD existing designs
  •  Conduct user testing (if needed)
  •  Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  •  Reviewed with KAI
  •  Rice JIRA Created (in KULRICE Project)
  •  KRAD Implementation complete
  •  Component released (insert rice release version below)

Version: 1.0

 


Description

The Kuali suite of applications uses search and lookup results lists frequently. This document indicates how and where they are to be used, along with accessibility and market recommendations.

There are four (4) types of results lists, grouped into two (2) categories.

Selecting a single item

Result sets where a single item only is allowed to be selected. This group includes the following three (3) methods:

  • Radio buttons 

  • Action buttons

Selecting multiple items

Result sets where more than one item is allowed to be selected. This group includes the following one (1) method:

  • Checkboxes

 

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 accessibility.

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 accessibility.
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.