Introduction

1. Introduction • Hadi Rangin • IT Accessibility & Collaboration Coordinator • Disability Resources and Educational Services

2. Preview • Introduction into different types of disabilities • Functional vs. Technical Accessibility • Major accessibility issues • Live demo of selected sites • Resources

3. People with different types of disabilities • People with visual processing disabilities such as dyslexia • People with cognitive disabilities including those with strokes and traumatic brain injuries • People with hearing impairments that prevent them from accessing spoken audio content • People with motor impairments that limit their use of arms and hands • People with limited or low vision • People who are blind

4. different ways of perceiving and interacting with information. Blind users see one element at a time. Low-vision users who magnify the screen see just a bit of it at a time. Color-blind users cannot see information presented through color. Low-mobility users cannot use a mouse (blind users don’t either). Inexperienced users are easily disoriented and overwhelmed by page content.

5. Technical accessibility Is the coding practice according to the standard (WCAG)? Ensures assistive technologies can effectively interact with the application “Does a particular button in the user interface present itself in a way so that it can be understood by, and interacted using both visual and non-visual means?” Limitation: it does not take a holistic view of asking if the individual pieces of an application work together correctly and if the end user can actually perform the necessary functions with it.

6. Functional accessibility Can end user accomplish the necessary tasks to effectively use an application, regardless of how a particular feature is coded? “Can the user create a new document?” Functionally accessible if the task can be completed by various mode of interactions (mouse, keyboard & AT)

7. Functional vs. Technical Evaluation Accessible technique is required, but not sufficient. Usability with accessibility consideration both aspects are necessary in developing an accessible application.

8. Major accessibility issues (1) Mouse events found without any keyboard event handlers Lack of a visual indicator for focus Reading order that is not logical Tab order that is not logical for the application Form controls missing descriptive labels Web pages do not have descriptive titles Lack of ARIA landmarks Lack of logical and hierarchical heading structure Link texts don't identify the target of the link Color alone is used to convey application state or other information

9. Major accessibility issues (2) Text color contrast is too low or text appears over backgrounds that have too much visual complexity Web pages don't reflow to fit the window when text sizes are changed using browser font size and zooming controls onchangeevent triggers a automatic web page redirection or form submission Data tables missing proper heading markup to identify content of data cells Flash objects and other embedded application do not accept keyboard focus without a mouse click or trap the keyboard focus Informational images do not have descriptive alt text Audio content does not have transcripts Video with audio does not have captions . Use of inaccessible captchas

10. Types of ARIA landmarks: Banner Navigation Main Search Form Contentinfo Complementary Region (custome landmark)

11. Best Practices for ARIA Landmarks All content must be in landmarks Page must have a MAIN landmark Redundant landmark types must have a unique lable Headings must be properly nested within landmarks

12. Technical considerations Use div or span as container and not table Use aria-labelledby if there is a heading Use aria-label if the container doesn't have any heading Make sure nesting landmarks is logical Avoid excessive nesting landmarks; too many landmarks can be as bad as too few landmarks

13. Remember to do this for all applications • Consider accessibility throughout design & implementation processes • Define and use a consistent layout for all pages in your domain • Provide keyboard support for all controls. • Menus, etc. must operate similarly to mouse over event. • Provide programmatic indicators for application state and semantic association. • Heading structure, Error conditions, disabled controls, form labels, etc. • Provide a visual indicator of focus. • Do not rely on color alone to indicate focus. • Manage focus for widgets and error feedback. • Ensure that focus moves predictably and usefully. • Return focus to the control that spawned dialog boxes, etc.

14. Resources Accessible Rich Internet Applications (WAI-ARIA) 1.0 www.w3.org/TR/wai-aria/complete WAI-ARIA 1.0 Authoring Practices www.w3.org/TR/wai-aria-practices University of Illinois Web Best Practices (iCita) http://html.cita.illinois.edu Open Ajax Accessibility Alliance www.oaa-accessibility.org Open Ajax Examples http://oaa-accessibility.org/examples/ firebug: Extremely useful tool for evaluation and design! Web developers toolbar: Add-on for Firefox