Accessibility and Section 508 Compliance in 2009What you need to know.John Whalen, PhDDirector, User Experience and Design, e.magination

AgendaThinking 'accessibly’ … why would I care?What are the most common accessibility needs?Evaluating your site's compliance and accessibilityLatest best practices for ensuring complianceStandards for interactive applications

It’s the LawSection 508 of the Rehabilitation Act:All electronic and information technology used, procured, developed, or maintained by agencies and departments of the U.S. Government must be accessible to people with disabilities.Includes:120,000 Federal workers54,000,000 Americans

There’s a big audience out there…

And its getting older…

Disabilities truly make the Web difficult…Web users with disabilities are 3 times less likely to succeed than users without disabilities at:Searching for informationMaking purchasesCoyne & Nielsen (2001)

You don’t like lawsuits…

You like the benefits of accessible design…

You want the advantage of being a leader…

You want to support mobile devices…

You appreciate great SEO…

AgendaThinking 'accessibly’ … why would I care?What are the most common accessibility needs?Evaluating your site's compliance and accessibilityLatest best practices for ensuring complianceStandards for interactive applications

Most Common Accessibility Needs:Visual disabilitiesblindnesslow visioncolor blindnessHearing impairmentsdeafnesshard of hearingAging-related conditionsPhysical disabilitiesmotor disabilitiesspeech disabilitiesCognitive and neurological disabilitiesdyslexia and dyscalculiaattention deficit disorderintellectual disabilitiesmemory impairments

Assistive TechnologiesAlternative keyboards or switchesScreen readersSpeech recognition

Assistive TechnologiesBraille and refreshable BrailleScreen magnifiersTabbing through structural elementsVoice browsers

Scenarios and Accessibility SolutionsOnline shopper with color blindness (user control of style sheets)Reporter with repetitive stress injury (keyboard equivalents for mouse commands; access-key)Online student who is deaf (captioned audio portions of multimedia files)Accountant with blindness (appropriate markup of tables, alternative text, abbreviations, and acronyms; Braille display)

Scenarios and Accessibility SolutionsClassroom student with dyslexia (use of supplemental graphics; freezing animated graphics)Retiree with aging-related conditions, managing personal finances (magnification; avoiding pop-up windows)Supermarket assistant with cognitive disability (clear and simple language; consistent design)Teenager with deaf-blindness, seeking entertainment (user control of style sheets; accessible multimedia)

AgendaThinking 'accessibly’ … why would I care?What are the most common accessibility needs?Evaluating your site's compliance and accessibilityLatest best practices for ensuring complianceStandards for interactive applications

Core Principles – WCAG 2.0Perceivable - Information and user interface components must be presentable to users in ways they can perceiveThis means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)Operable - User interface components and navigation must be operableThis means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)Understandable - Information and the operation of user interface must be understandableThis means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

Overall check for your pagesTry WebAIM’s WAVE: Web Accessibility Evaluation Tool http://wave.webaim.org/

Use the Web Accessibility Toolbarhttp://www.paciellogroup.com/resources/wat-ie-about.htmlCheck HTMLResize screenDisable CSSReview image tagsCheck colorReview tables

1. Perceivable: Best contrast / color checkersContrast Analyzer v2 http://www.paciellogroup.com/resources/contrast-analyser.htmltool for determining if foreground & background color combinations provide good color visibilityVischeckhttp://www.vischeck.com/

2. OperableTry your site with no mouseUse Accessibility Toolbar to try site without pictures, without CSSTry site in small sizes, or with magnification turned onTry site using screen readerAccessible CAPTCHA? Try simple math problem.

2. Operable: Screen ReadersJAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.aspNVDA - new free screen reader: http://www.nvda-project.org/Comparison of Screen Readers: http://en.wikipedia.org/wiki/Comparison_of_screen_readers

3. Understandable: Creating Captions on the Web - MultimediaNational Center for Accessible Mediahttp://ncam.wgbh.org/webaccess/tools/index.html

3. Understandable – test reading levelhttp://juicystudio.com/services/readability.php#readwebIs your text at the right level? Take a look at the last number – the grade level.

AgendaThinking 'accessibly’ … why would I care?What are the most common accessibility needs?Evaluating your site's compliance and accessibilityLatest best practices for ensuring complianceStandards for interactive applications

ClassicsUse “good ‘ole” H1, H2, etc.Good for screen reader, good for SEO.Easier for mobile phone to display pageUse CSS to format the tags visuallyUse CSSKeep text briefUse bulleted format

ALT Tags – Context is CrucialSource: http://www.webaim.org/techniques/alttext/

ALT Tags

Include table of content, skip links

Make tables simple, or make them accessiblehttp://jimthatcher.com/webcourse9.htm

Many more suggestionsAdobe Acrobat: http://www.adobe.com/accessibility/products/reader/Adobe Flash:http://www.adobe.com/accessibility/products/flash/Java: http://www.ibm.com/developerworks/java/library/j-access/http://webaim.org/products/training/http://jimthatcher.com/webcourse1.htm

Latest Updates on Section 508/255

AgendaThinking 'accessibly’ … why would I care?What are the most common accessibility needs?Evaluating your site's compliance and accessibilityLatest best practices for ensuring complianceStandards for interactive applications

WAI-ARIAMaking sites with JavaScript and updates without screen refreshes accessibleGreat introductory article:http://dev.opera.com/articles/view/introduction-to-wai-aria/

Making sites with JavaScript and updates without screen refreshes accessible

WAI ARIACreate “live area” that captures changes (without screen refresh)Can set tab index to “-1” to allow focus when neededAllow keyboard control“What am I?”, State, Property[included in IE 8]Example: http://developer.yahoo.com/yui/examples/menu/menuwaiaria.html http://video.yahoo.com/watch/3608798/9955360

Accessible Drag and Drophttp://devfiles.myopera.com/articles/735/example.html#kbdinstructions

Toolkits incorporating WAI-ARIAJQuery UIYahoo! YUIGoogle Web ToolkitDojoASP.NET “Q2 2009”ExtJS?

Best practicesUse XHTML when possibleApply ARIA role attribute when neededSet ARIA states and propertiesSupport full keyboard navigationMake the visual UI match the browser statesSee also: http://www.alistapart.com/articles/waiaria

AgendaThinking 'accessibly’ … why would I care?What are the most common accessibility needs?Evaluating your site's compliance and accessibilityLatest best practices for ensuring complianceStandards for interactive applications

How e.magination can helpAccessibility AuditTrainingCoding Consulting:GeneralTablesARIA

Great Accessibility Resourceshttp://www.w3.org/WAI/intro/ariahttp://www.w3.org/WAI/http://www.456bereastreet.com/http://www.paciellogroup.com/blog/http://juicystudio.com/index.phphttp://webaim.org/

Thank you!John Whalen, PhDDirector, User ExperienceTwitter: @johnwhalenEmail: john.whalen@emagination.comLinkedIn: http://www.linkedin.com/in/johnwhalen