Jon Gunderson

102 A & B, Frontier Airlines Center

Dynamic content and HTML5 technologies are rapidly become a standard part of web design. This session will provide an overview of how to use the Accessible Rich Internet Accessibility (ARIA) technologies and HTML5 to improve the accessibility of dynamic web content. The session will also cover the issues with some features of HTML5 that can cause accessibility problems. The session will also present Open Source tools for inspecting the accessibility of web resources and creating WCAG 2.0 compliance reports using the OpenAjax accessibility evaluation library. The session will encourage participation by using examples of existing websites to show HTML5 and ARIA is integrated in to dynamic web content designs to improve accessibility and will use the websites of participants to illustrate the accessibility inspection and evaluation capabilities of the Open Source evaluation tools. The session will include: 1. Using ARIA landmarks to improve document navigation 2. Complying with WCAG 2.0 form accessibility requirements 3. Dynamic pull down and fly out menu accessibility 4. Accessibility of hiding and showing content in tabs 5. Basics of making HTML/Javascript widgets accessible 6. Accessibility features of open source widget toolkits like JQuery and Dojo 7. Using Open Source tools to inspect and evaluate the accessibility of resources for WCAG 2.0 compliance 8. Discussion of what is the difference between accessible design and WCAG 2.0 compliance.

Notes:

WCAG 2.0

• Talks about entire process of filling out forms (3.3.3, 3.3.4)
• ARIA can help meet these guidelines
• 4.1.2 Name, Role, Value (when something changes, you have to let people know)
• Check out the techniques document

ARIA Landmarks

• Easiest thing that you can add that will drastically improve accessibility
• Won’t change layout or how things look
• Mark containers with a role
• All visible content must be in a landmark
• first thing you should to is sketch out and define areas for landmarks
• typically only one landmark per page
• Each main landmark has an H1 in it… really?
• If multiple main, use aria-labeledby
• Use navigation on element containing the list, not the list itself
• Don’t nest landmarks of the same type
• Content-info is the footer
• How do you wrap social media? Wrap as region and label.

University of Illinois Disability resources and education services

• disability.illinois.edu

HTML5 Elements are not directly mapped to these roles:

• Banner > Header
• Complementary > Aside
• Contentinfo > Footer
• Navigation > Nav
• Application > ? … <section role=”application”>
• Main > ? … <section role=”main”>
• Search > ? … <section role=”search”>

Headings in HTML5 are designed to be an outline (there are plugins that can show you)

Video:

• <track> can be used for captions/subtitles
• .vtt format ( similar to many of the others)

ARIA for HTML form controls

• Use required, not aria-required?  http://www.alistapart.com/articles/aria-and-progressive-enhancement/

Tools:

• Plugin for firefox: Will have to look up on his slides…