Grid Example 2: E-mail with Buttons in the Headers to Reorder List

Example

Example using in-line ARIA markup | HTML source with in-line ARIA
Example using ARIA markup from CLASS attribute information | HTML source of ARIA markup from CLASS attribute

Grade List Sorted by Date
Sel	Msg	Status	Att	Pri	From	Subject	Date	Size
	1	false	false	1	John Smith	Trip to Florida	2007-10-03	2K
	2	true	false	2	Fred Jones	Lunch on Friday	2007-12-03	1K
	3	true	true	3	Jane Johnson	Proposal for you to review	2007-16-03	12K
	4	false	true	4	Bill Smith	Information on weekend	2007-19-03	122K
	5	true	false	5	Skip Roland	Opportunity to participate	2007-20-03	4K

Keyboard Shortcuts

Tab: Move focus between web 2.0 widgets, links and form controls.
Up Arrow: Move focus to previous message
Down Arrow: Move focus to next message
Left Arrow: Move focus one column to the left.
Right Arrow: Move focus one column to the right.
Space Bar: When in message list, it selects or unselects the current message.
Space Bar: When the headers, it reorders the list of messages based on that column data.

ARIA Roles and Properties used

role="button"
role="grid"
role="group"
role="gridcell"
States and properties:
- aria-selected
- aria-labeledby
- aria-describedby

Note: The idrefs for labelledby and describedby are configurable by the user.

Compatible Browsers

Internet Explorer 7.0+
Mozilla Firefox 3.0 (for ARIA markup support)

ARIA Examples