Grid Example 1: E-mail List with Row and Column Navigation

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

E-mail 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 grid controls
Up Arrow: Move focus to previous e-mail message.
Down Arrow: Move focus to next mail message.
Left Arrow: Move focus one column to the left.
Right Arrow: Move focus one column to the right.
Space Bar: Selects of unselects the e-mail message

ARIA Roles and Properties used

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 6.0+
Mozilla Firefox 3.0 (for ARIA markup support)

ARIA Examples