SlideShare uma empresa Scribd logo
1 de 45
Accessibility and Section 508 Compliance in 2009What you need to know. John Whalen, PhD Director, User Experience and Design, e.magination
Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
It’s the Law Section 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 workers 54,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 information Making purchases Coyne & 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…
Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
Most Common Accessibility Needs: Visual disabilities blindness low vision color blindness Hearing impairments deafness hard of hearing Aging-related conditions Physical disabilities motor disabilities speech disabilities Cognitive and neurological disabilities dyslexia and dyscalculia attention deficit disorder intellectual disabilities memory impairments
Assistive Technologies Alternative keyboards or switches Screen readers Speech recognition
Assistive Technologies Braille and refreshable Braille Screen magnifiers Tabbing through structural elements Voice browsers
Scenarios and Accessibility Solutions Online 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 Solutions Classroom 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)
Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
Core Principles – WCAG 2.0 Perceivable - 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 pages Try WebAIM’s WAVE: Web Accessibility Evaluation Tool http://wave.webaim.org/
Use the Web Accessibility Toolbar http://www.paciellogroup.com/resources/wat-ie-about.html Check HTML Resize screen Disable CSS Review image tags Check color Review tables
1. Perceivable: Best contrast / color checkers Contrast Analyzer v2 http://www.paciellogroup.com/resources/contrast-analyser.html tool for determining if foreground & background color combinations provide good color visibility Vischeckhttp://www.vischeck.com/
2. Operable Try your site with no mouse Use Accessibility Toolbar to try site without pictures, without CSS Try site in small sizes, or with magnification turned on Try site using screen reader Accessible CAPTCHA?  Try simple math problem.
2. Operable: Screen Readers JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp NVDA - 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 - Multimedia National Center for Accessible Media http://ncam.wgbh.org/webaccess/tools/index.html
3. Understandable – test reading level http://juicystudio.com/services/readability.php#readweb Is your text at the right level?  Take a look at the last number – the grade level.
Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
Classics Use “good ‘ole” H1, H2, etc. Good for screen reader, good for SEO. Easier for mobile phone to display page Use CSS to format the tags visually Use CSS Keep text brief Use bulleted format
ALT Tags – Context is Crucial Source: http://www.webaim.org/techniques/alttext/
ALT Tags
Include table of content, skip links
Make tables simple, or make them accessible http://jimthatcher.com/webcourse9.htm
Many more suggestions Adobe 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
Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
WAI-ARIA ,[object Object],Great introductory article: http://dev.opera.com/articles/view/introduction-to-wai-aria/
WAI ARIA Create “live area” that captures changes (without screen refresh) Can set tab index to “-1” to allow focus when needed Allow 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 Drop http://devfiles.myopera.com/articles/735/example.html#kbdinstructions
Toolkits incorporating WAI-ARIA JQuery UI Yahoo! YUI Google Web Toolkit Dojo ASP.NET “Q2 2009” ExtJS?
Best practices Use XHTML when possible Apply ARIA role attribute when needed Set ARIA states and properties Support full keyboard navigation Make the visual UI match the browser states See also: http://www.alistapart.com/articles/waiaria
Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
How e.magination can help Accessibility Audit Training Coding Consulting: General Tables ARIA
Great Accessibility Resources http://www.w3.org/WAI/intro/aria http://www.w3.org/WAI/ http://www.456bereastreet.com/ http://www.paciellogroup.com/blog/ http://juicystudio.com/index.php http://webaim.org/
Thank you! John Whalen, PhD Director, User Experience Twitter: 		@johnwhalen Email: 		john.whalen@emagination.com LinkedIn: 	http://www.linkedin.com/in/johnwhalen

Mais conteúdo relacionado

Mais procurados

Sara Tabor: Testing For Accessibility - ARIA Ready For It?
Sara Tabor: Testing For Accessibility - ARIA Ready For It?Sara Tabor: Testing For Accessibility - ARIA Ready For It?
Sara Tabor: Testing For Accessibility - ARIA Ready For It?
Anna Royzman
 
Household Insurance Sector Spotlight webinar April 2014
Household Insurance Sector Spotlight webinar April 2014Household Insurance Sector Spotlight webinar April 2014
Household Insurance Sector Spotlight webinar April 2014
AbilityNet
 
Megan McKeever - design
Megan McKeever - designMegan McKeever - design
Megan McKeever - design
mmm5014
 

Mais procurados (19)

User interface design for people with special needs
User interface design for people with special needsUser interface design for people with special needs
User interface design for people with special needs
 
Designing Inclusive Experiences to Maximize Reach and Satisfaction
Designing Inclusive Experiences to Maximize Reach and SatisfactionDesigning Inclusive Experiences to Maximize Reach and Satisfaction
Designing Inclusive Experiences to Maximize Reach and Satisfaction
 
Sara Tabor: Testing For Accessibility - ARIA Ready For It?
Sara Tabor: Testing For Accessibility - ARIA Ready For It?Sara Tabor: Testing For Accessibility - ARIA Ready For It?
Sara Tabor: Testing For Accessibility - ARIA Ready For It?
 
Basics of creating accessible code for websites
Basics of creating accessible code for websitesBasics of creating accessible code for websites
Basics of creating accessible code for websites
 
A11y presentation-2017
A11y presentation-2017A11y presentation-2017
A11y presentation-2017
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
Summary Guidelines
Summary GuidelinesSummary Guidelines
Summary Guidelines
 
Household Insurance Sector Spotlight webinar April 2014
Household Insurance Sector Spotlight webinar April 2014Household Insurance Sector Spotlight webinar April 2014
Household Insurance Sector Spotlight webinar April 2014
 
Automated-Accessibility-Testing
Automated-Accessibility-TestingAutomated-Accessibility-Testing
Automated-Accessibility-Testing
 
Accessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early designAccessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early design
 
The Business Case for Accessibility, AbilityNet Webinar 28 Nov 2013
The Business Case for Accessibility, AbilityNet Webinar 28 Nov 2013The Business Case for Accessibility, AbilityNet Webinar 28 Nov 2013
The Business Case for Accessibility, AbilityNet Webinar 28 Nov 2013
 
Web accessibility webinar 53017
Web accessibility webinar 53017Web accessibility webinar 53017
Web accessibility webinar 53017
 
Week 4 - tablet app design
Week 4 - tablet app designWeek 4 - tablet app design
Week 4 - tablet app design
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibility
 
Megan McKeever - design
Megan McKeever - designMegan McKeever - design
Megan McKeever - design
 
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
 
Accessible Design Presentation
Accessible Design PresentationAccessible Design Presentation
Accessible Design Presentation
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
 

Semelhante a Accessibility And 508 Compliance In 2009

Getting Started With Web Accessibility
Getting Started With Web AccessibilityGetting Started With Web Accessibility
Getting Started With Web Accessibility
Sean Yo
 

Semelhante a Accessibility And 508 Compliance In 2009 (20)

corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design Heuristics
 
eLearning & Accessibility
eLearning & AccessibilityeLearning & Accessibility
eLearning & Accessibility
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?
 
Getting Started With Web Accessibility
Getting Started With Web AccessibilityGetting Started With Web Accessibility
Getting Started With Web Accessibility
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
 
Accessibility, SEO and Joomla
Accessibility, SEO and Joomla Accessibility, SEO and Joomla
Accessibility, SEO and Joomla
 
Accessibility, SEO and Joomla
Accessibility, SEO and JoomlaAccessibility, SEO and Joomla
Accessibility, SEO and Joomla
 
Common misconceptions-on-a11y
Common misconceptions-on-a11yCommon misconceptions-on-a11y
Common misconceptions-on-a11y
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
Web Accessibility Audit_ Ensuring Inclusivity Online.pptxWeb Accessibility Audit_ Ensuring Inclusivity Online.pptx
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
 
Test your website for Web Accessibility
Test your website for  Web AccessibilityTest your website for  Web Accessibility
Test your website for Web Accessibility
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With Disabilities
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
S8746
S8746S8746
S8746
 
Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web Accessibility
 

Mais de Emagination ®

The governments online future in the age of persuasive design
The governments online future in the age of persuasive designThe governments online future in the age of persuasive design
The governments online future in the age of persuasive design
Emagination ®
 
Location based services: What you need to know
Location based services: What you need to knowLocation based services: What you need to know
Location based services: What you need to know
Emagination ®
 
10 Common Usability Mistakes
10 Common Usability Mistakes10 Common Usability Mistakes
10 Common Usability Mistakes
Emagination ®
 
Actionable Web Analytics For E Government
Actionable Web Analytics For E GovernmentActionable Web Analytics For E Government
Actionable Web Analytics For E Government
Emagination ®
 

Mais de Emagination ® (12)

Top 8 things you didn’t know SharePoint could do: Turbocharging your SharePoi...
Top 8 things you didn’t know SharePoint could do: Turbocharging your SharePoi...Top 8 things you didn’t know SharePoint could do: Turbocharging your SharePoi...
Top 8 things you didn’t know SharePoint could do: Turbocharging your SharePoi...
 
The governments online future in the age of persuasive design
The governments online future in the age of persuasive designThe governments online future in the age of persuasive design
The governments online future in the age of persuasive design
 
Location based services: What you need to know
Location based services: What you need to knowLocation based services: What you need to know
Location based services: What you need to know
 
The government's online future in the age of persuasive design
The government's online future in the age of persuasive designThe government's online future in the age of persuasive design
The government's online future in the age of persuasive design
 
Conversion Bliss: The Persuasive Design Checklist
Conversion Bliss: The Persuasive Design ChecklistConversion Bliss: The Persuasive Design Checklist
Conversion Bliss: The Persuasive Design Checklist
 
Persuasive Design: Putting It To Use
Persuasive Design: Putting It To UsePersuasive Design: Putting It To Use
Persuasive Design: Putting It To Use
 
10 Common Usability Mistakes
10 Common Usability Mistakes10 Common Usability Mistakes
10 Common Usability Mistakes
 
Actionable Web Analytics For E Government
Actionable Web Analytics For E GovernmentActionable Web Analytics For E Government
Actionable Web Analytics For E Government
 
The Science And Art Of Persuasive Design
The Science And Art Of Persuasive DesignThe Science And Art Of Persuasive Design
The Science And Art Of Persuasive Design
 
Getting Results From Social Networking
Getting Results From Social NetworkingGetting Results From Social Networking
Getting Results From Social Networking
 
6 Components Of Winning Web Redesign
6 Components Of Winning Web Redesign6 Components Of Winning Web Redesign
6 Components Of Winning Web Redesign
 
8 Critical Usability Tips Slideshare Post
8 Critical Usability Tips Slideshare Post8 Critical Usability Tips Slideshare Post
8 Critical Usability Tips Slideshare Post
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 

Accessibility And 508 Compliance In 2009

  • 1. Accessibility and Section 508 Compliance in 2009What you need to know. John Whalen, PhD Director, User Experience and Design, e.magination
  • 2. Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
  • 3. It’s the Law Section 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 workers 54,000,000 Americans
  • 4. There’s a big audience out there…
  • 5. And its getting older…
  • 6. Disabilities truly make the Web difficult… Web users with disabilities are 3 times less likely to succeed than users without disabilities at: Searching for information Making purchases Coyne & Nielsen (2001)
  • 7. You don’t like lawsuits…
  • 8. You like the benefits of accessible design…
  • 9. You want the advantage of being a leader…
  • 10. You want to support mobile devices…
  • 12. Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
  • 13. Most Common Accessibility Needs: Visual disabilities blindness low vision color blindness Hearing impairments deafness hard of hearing Aging-related conditions Physical disabilities motor disabilities speech disabilities Cognitive and neurological disabilities dyslexia and dyscalculia attention deficit disorder intellectual disabilities memory impairments
  • 14. Assistive Technologies Alternative keyboards or switches Screen readers Speech recognition
  • 15. Assistive Technologies Braille and refreshable Braille Screen magnifiers Tabbing through structural elements Voice browsers
  • 16. Scenarios and Accessibility Solutions Online 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)
  • 17. Scenarios and Accessibility Solutions Classroom 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)
  • 18. Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
  • 19. Core Principles – WCAG 2.0 Perceivable - 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
  • 20. Overall check for your pages Try WebAIM’s WAVE: Web Accessibility Evaluation Tool http://wave.webaim.org/
  • 21.
  • 22. Use the Web Accessibility Toolbar http://www.paciellogroup.com/resources/wat-ie-about.html Check HTML Resize screen Disable CSS Review image tags Check color Review tables
  • 23. 1. Perceivable: Best contrast / color checkers Contrast Analyzer v2 http://www.paciellogroup.com/resources/contrast-analyser.html tool for determining if foreground & background color combinations provide good color visibility Vischeckhttp://www.vischeck.com/
  • 24. 2. Operable Try your site with no mouse Use Accessibility Toolbar to try site without pictures, without CSS Try site in small sizes, or with magnification turned on Try site using screen reader Accessible CAPTCHA? Try simple math problem.
  • 25. 2. Operable: Screen Readers JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp NVDA - new free screen reader: http://www.nvda-project.org/ Comparison of Screen Readers: http://en.wikipedia.org/wiki/Comparison_of_screen_readers
  • 26. 3. Understandable: Creating Captions on the Web - Multimedia National Center for Accessible Media http://ncam.wgbh.org/webaccess/tools/index.html
  • 27. 3. Understandable – test reading level http://juicystudio.com/services/readability.php#readweb Is your text at the right level? Take a look at the last number – the grade level.
  • 28. Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
  • 29. Classics Use “good ‘ole” H1, H2, etc. Good for screen reader, good for SEO. Easier for mobile phone to display page Use CSS to format the tags visually Use CSS Keep text brief Use bulleted format
  • 30. ALT Tags – Context is Crucial Source: http://www.webaim.org/techniques/alttext/
  • 32. Include table of content, skip links
  • 33. Make tables simple, or make them accessible http://jimthatcher.com/webcourse9.htm
  • 34. Many more suggestions Adobe 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
  • 35. Latest Updates on Section 508/255
  • 36. Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
  • 37.
  • 38. WAI ARIA Create “live area” that captures changes (without screen refresh) Can set tab index to “-1” to allow focus when needed Allow 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
  • 39. Accessible Drag and Drop http://devfiles.myopera.com/articles/735/example.html#kbdinstructions
  • 40. Toolkits incorporating WAI-ARIA JQuery UI Yahoo! YUI Google Web Toolkit Dojo ASP.NET “Q2 2009” ExtJS?
  • 41. Best practices Use XHTML when possible Apply ARIA role attribute when needed Set ARIA states and properties Support full keyboard navigation Make the visual UI match the browser states See also: http://www.alistapart.com/articles/waiaria
  • 42. Agenda Thinking 'accessibly’ … why would I care? What are the most common accessibility needs? Evaluating your site's compliance and accessibility Latest best practices for ensuring compliance Standards for interactive applications
  • 43. How e.magination can help Accessibility Audit Training Coding Consulting: General Tables ARIA
  • 44. Great Accessibility Resources http://www.w3.org/WAI/intro/aria http://www.w3.org/WAI/ http://www.456bereastreet.com/ http://www.paciellogroup.com/blog/ http://juicystudio.com/index.php http://webaim.org/
  • 45. Thank you! John Whalen, PhD Director, User Experience Twitter: @johnwhalen Email: john.whalen@emagination.com LinkedIn: http://www.linkedin.com/in/johnwhalen