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
| 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-selectedaria-labeledbyaria-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)
