ARIA Information and Examples

These examples are from my presentation at the Penn State Web conference 2012. These are mockups of accessible components

Examples

Placeholder Text: This form examples shows an inaccessible followed by an accessible example of forms with placeholder text. NOTE: this example has been updated since the presentation to include the answer to the placeholder attribute question. Answer is, placeholder works with JAWS in Firefox, but IE still requires the workaround shown in the accessible example section. This behavior can be seen on the first DOB field.
Terms and Conditions: Showing the difference between behaviors of HTML label, aria-labelledby, and aria-labelled by with aria-describedby on a "terms and conditions" checkbox.
Bad table layout: BAD, BAD, Bad, way to layout form controls in a table; there are no labels read when tabbing through the form.
Good Table Layout: If you have to lay out controls in a table, and I'm not recommending it, here's the right way to go about it. uses aria-labelledby.
Reading a section of the page with a hotkey: Press the hotkey CTRL+SHIFT+S to hear the content of the "score" div; basically the only content in this rendering. Note: firefox and NVDA doesnot render this correctly.
Chat Example: Hear the crew of the Enterprise=D read Green Eggs and Ham. Hotkeys in this module include ALT+1 through ALT+0 to read the last 10 messages posted and CTRL+SHIFT+U to hear the list of logged in users (Firefox/NVDA will not render the user list hotkey correctly).

Questions, comments, thoughts. Let's keep the conversation going. You can find me:

Thanks for attending the presentation and for checking out the resources!