Exercise 1: Setup ChromeVox

1. Chang School with ARIA (see description of ARIA enhancements)
2. Chang School without ARIA

Exercise 2: Apply static ARIA

1. Open landmarks.html in you browser, and navigate with ChromeVox
2. Open landmarks.html in a text editor, apply missing landmarks, tabindex=0, aria-required="true", aria-label, aria-describedby, and navigate with Chromevox

Exercise 3: Apply dynamic ARIA

1. Browse through the jQuery and Mootools ARIA Widgets with ChromeVox

   Standalone jQuery-UI Widgets

   • Accordion
   • Auto Complete
   • Carousel
   • Date Picker
   • Modal Dialog
   • Menubar
   • Progressbar
   • Slider
   • Tab Panel
   • Tooltips
   • Treemenu

   Standalone MooTools Widgets

   • Accordion
   • Auto Complete
   • Button
   • Checkboxes
   • Data Grid
   • Date Picker
   • Modal Dialog
   • Draggable/Reorder-able List
   • Dropdown Menu
   • Radio Buttons
   • Slider
   • Spin Button
   • Tab Panel
   • Tooltips
   • Tree Menu

   Open Ajax Accessibility Examples

   • Treeview: ARIA CSS Selectors
   • Treeview: Using aria-owns
   • Treeview: Simple
   • ToolTips
   • Toolbar using inline images for visual state
   • Tab Panel: Accordian using ARIA CSS selectors
   • Tab Panel
   • Spinbutton using IMG elements for buttons
   • Slider
   • Radio Buttons
   • Menubar
   • Live Region: RSS Feed
   • Drag and Drop
   • Date Picker
   • Checkbox group using background images for visual state
   • Alert example using a modal ARIA dialog box
   • Alert role example using an ARIA alert box
   
   See the full list od Widgets from the Open Ajax Alliance

   Fluid Infusion Components

   • User Interface Options
   • HTML5 Video Player
   • Image Reorderer
   • Layout Reorderer
   • Pager
   • Uploader
   • Progress Bar
   • Renderer
   • Inline Editor
   • Metadata Editor
   See the full list of Fluid Infusion Components
2. Implement the following widgets:
   • Add the jQuery datepicker to the landmarks.html template to create a "date of birth" field following the Last Name field.
   • Add the jQuery jCarousel to the photo_gallery.html template to create a community photo gallery.
   • Add the Mootools tabPanel to the networking.html template, that has a tab for each of the links in the Networking side menu box.
   • If you've complete the above, choose any one of the other jQuery, MooTools, or OAA widgets and implement it in the mychoice.html template.