Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
I    W     eb       AI          M           .o             rg
webaim.org/resources/designers
throup.org.uk/infographic
“So long as a web-basedsystem is inaccessible, it  suffers from qualityproblems and we should focus on quality.”          ...
Structure and headings• Logical!• Skip to main content links (blind &  keyboard users)• Sequence and patterns (non-linear ...
Lists:   <ol>   <ul>    <li>& CSS styling
Do it with a keyboard
<alt=””>
LabelsSource of images: http://www.youtube.com/watch?v=T5OClvFL8I8
COLOR        8% ♂; 0.5-1% ♀
Tables• Screen readers read tables from left to  right, from row to row.• <summary>, <th>, <scope>• How-to: http://dev.ope...
Auto-play“Click here”/“Read more”
YouTube 4 All•   Keyboard-accessible YouTube controls: http://    simplyaccessible.com/article/keyboard-accessible-    you...
Screen reader testing• Learn: http://www.iheni.com/screen-reader-  testing/• Plan: http://www.spotlessinteractive.com/  ar...
Visual / Hearing    Motor   Cognition    (Aging)(Perceivable, Operable, Understandable, RobustDanish: Opfattelig, Anvendel...
People are different:    Test with real people!• http://www.uiaccess.com/accessucd/involve.html• http://alistairduggin.co....
http://www.flickr.com/photos/veeliam/5095362394/
http://www.flickr.com/photos/mjmonty/5087474397/
http://www.flickr.com/photos/mroche/5414095073/                                                 http://www.flickr.com/photos...
When universal designprocesses fail to include,consult with, and listen to thepeople we are actuallydesigning for, we also...
Evaluation Tools•   WAVE http://wave.webaim.org/•   Color Contrast and more https://addons.mozilla.org/da/firefox/addon/jui...
$€£¥?Bug cost chart from http://blogs.windriver.com/vxworks/device-management/
$€£¥?• Cost I: http://eclecti.ca/2011/05/the-cost-of-  accessibility/• Cost II: http://www.karlgroves.com/  2011/11/30/how...
WCAG 2 at a glance                     •   Perceivable                         •   Provide text alternatives for non-text ...
WCAG 2.0:Understanding and How-To  •   Understanding WCAG 2.0: A guide to      understanding and implementing Web Content ...
Resources• Yahoo! accessibility code library: http://  yaccessibilityblog.com/library/• Accessibility topics at Web Standa...
Learn-more resources•   What is a screen reader? Article from 2005 so    some product details are outdated. Read it for   ...
Learn-more resources•   Opera Web Standards Curriculum in association    with Yahoo! Developer Network: http://    www.ope...
Mobile resources“Mobile Matters Most”• For iOS app builders - discusses Apple  Interface Builder. http://mattgemmell.com/ ...
Twitter+ Resources•   @RogerJohansson + 456bereastreet.com•   @webaxe + webaxe.blogspot.com•   @silviapfeiffer (all about ...
10 Principles• Be equitable           • Be preventative• Be flexible             • Be tolerant• Be simple and          • Be...
http://www.flickr.com/photos/ottoman42/5026107/
Thank you for listening!     Questions?@kmdk / @stcaccesshttp://www.mardahl.dkhttp:/flavors.me/kmdk
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
Upcoming SlideShare
Loading in …5
×

Build Accessibly - Community Day 2012

5,406 views

Published on

Byg Tilgængeligt - Build Accessibly. My presentation for Community Day 2012 on 10 May 2012. Communityday.dk - for developers. Download file to get all the great tips and links in the notes.

Published in: Technology, Design
  • Be the first to comment

Build Accessibly - Community Day 2012

  1. 1. I W eb AI M .o rg
  2. 2. webaim.org/resources/designers
  3. 3. throup.org.uk/infographic
  4. 4. “So long as a web-basedsystem is inaccessible, it suffers from qualityproblems and we should focus on quality.” – Karl Groveshttp://www.karlgroves.com/2012/01/27/chasing-the-accessibility-business-case-conclusion/
  5. 5. Structure and headings• Logical!• Skip to main content links (blind & keyboard users)• Sequence and patterns (non-linear navigation - reading order)• Style guides (for consistency)• ARIA (application, banner, complementary, contentinfo, form, main, navigation, search)
  6. 6. Lists: <ol> <ul> <li>& CSS styling
  7. 7. Do it with a keyboard
  8. 8. <alt=””>
  9. 9. LabelsSource of images: http://www.youtube.com/watch?v=T5OClvFL8I8
  10. 10. COLOR 8% ♂; 0.5-1% ♀
  11. 11. Tables• Screen readers read tables from left to right, from row to row.• <summary>, <th>, <scope>• How-to: http://dev.opera.com/articles/view/ creating-accessible-data-tables/  &  http:// isolani.co.uk/articles/structuredTables.html  (with a football pools example!)
  12. 12. Auto-play“Click here”/“Read more”
  13. 13. YouTube 4 All• Keyboard-accessible YouTube controls: http:// simplyaccessible.com/article/keyboard-accessible- youtube-controls/• JW Player:  http://wac.osu.edu/• Easy YouTube Player: http://icant.co.uk/easy- youtube/docs/index.html• Accessible Media Player: http://www.nomensa.com/ services/accessibility-and-inclusive-design/ accessible-media-player
  14. 14. Screen reader testing• Learn: http://www.iheni.com/screen-reader- testing/• Plan: http://www.spotlessinteractive.com/ articles/accessibility/screen-reader-test- plan.php• More at http://webaxe.blogspot.com/ 2011/04/learning-how-to-use-and-test- with.html
  15. 15. Visual / Hearing Motor Cognition (Aging)(Perceivable, Operable, Understandable, RobustDanish: Opfattelig, Anvendelig, Forståelig, Robust)
  16. 16. People are different: Test with real people!• http://www.uiaccess.com/accessucd/involve.html• http://alistairduggin.co.uk/blog/using-personas-to- teach-accessibility/
  17. 17. http://www.flickr.com/photos/veeliam/5095362394/
  18. 18. http://www.flickr.com/photos/mjmonty/5087474397/
  19. 19. http://www.flickr.com/photos/mroche/5414095073/ http://www.flickr.com/photos/mroche/5414095073/
  20. 20. When universal designprocesses fail to include,consult with, and listen to thepeople we are actuallydesigning for, we also fail todesign effectively. – Lisa Herrod http://scenariogirl.com/inclusive-design/the-social-model-of-disability
  21. 21. Evaluation Tools• WAVE http://wave.webaim.org/• Color Contrast and more https://addons.mozilla.org/da/firefox/addon/juicy- studio-accessibility-too/• Fireeyes http://www.deque.com/products/worldspace-fireeyes/download- worldspace-fireeyes• Functional Accessibility Evaluator http://fae.cita.uiuc.edu/about/• Web Developer Extension http://chrispederick.com/work/web-developer/• Web Accessibility Toolbar for IE http://www.paciellogroup.com/resources/ wat-ie-about.html• W3C WAI Tool List http://www.w3.org/WAI/RC/tools/complete
  22. 22. $€£¥?Bug cost chart from http://blogs.windriver.com/vxworks/device-management/
  23. 23. $€£¥?• Cost I: http://eclecti.ca/2011/05/the-cost-of- accessibility/• Cost II: http://www.karlgroves.com/ 2011/11/30/how-expensive-is-accessibility/• For manager-types: http://openconcept.ca/ blog/mgifford/accessibility-tips-management• Case study: http://www.w3.org/WAI/bcase/ legal-and-general-case-study
  24. 24. WCAG 2 at a glance • Perceivable • Provide text alternatives for non-text content. • Provide captions and other alternatives for multimedia. • Create content that can be presented in different ways, • including by assistive technologies, without losing meaning. • Make it easier for users to see and hear content. • Operable • Make all functionality available from a keyboard. • Give users enough time to read and use content. • Do not use content that causes seizures. • Help users navigate and find content. • Understandable • Make text readable and understandable. • Make content appear and operate in predictable ways. • Help users avoid and correct mistakes. • Robust • Maximize compatibility with current and future user tools.
  25. 25. WCAG 2.0:Understanding and How-To • Understanding WCAG 2.0: A guide to understanding and implementing Web Content Accessibility Guidelines 2.0 http://www.w3.org/TR/UNDERSTANDING- WCAG20/ • How to Meet WCAG 2.0: A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques. http://www.w3.org/WAI/WCAG20/quickref/
  26. 26. Resources• Yahoo! accessibility code library: http:// yaccessibilityblog.com/library/• Accessibility topics at Web Standards Sherpa: http://webstandardssherpa.com/ reviews/by-topic/accessibility• Mozilla ARIA resources: https:// developer.mozilla.org/en/ARIA
  27. 27. Learn-more resources• What is a screen reader? Article from 2005 so some product details are outdated. Read it for what it is and how it works.  http:// www.nomensa.com/blog/2005/what-is-a-screen- reader/• Just Ask: Integrating Accessibility Throughout Design: http://www.uiaccess.com/accessucd/ (+ print)
  28. 28. Learn-more resources• Opera Web Standards Curriculum in association with Yahoo! Developer Network: http:// www.opera.com/company/education/curriculum/• Web Standards Projects InterACT (site/book) http://interact.webstandards.org/• U of MN Newsletter: Typography, information architecture, usability, accessibility, maintained by @laura_carlson http://www.d.umn.edu/itss/ training/online/webdesign/ webdev_listserv.html#subscribe
  29. 29. Mobile resources“Mobile Matters Most”• For iOS app builders - discusses Apple Interface Builder. http://mattgemmell.com/ 2010/12/19/accessibility-for-iphone-and- ipad-apps/ • Updates for Android developers: http:// android-developers.blogspot.com/2012/04/ accessibility-are-you-serving-all-your.html
  30. 30. Twitter+ Resources• @RogerJohansson + 456bereastreet.com• @webaxe + webaxe.blogspot.com• @silviapfeiffer (all about <video>)• @MarcoInEnglish / @MarcoZehe + marcozehe.de (Firefox)• @jared_w_smith + WebAIM.org (with discussion list, too!)• @iheni + iheni.com (mobile)• @stevefaulkner + paciellogroup.com/blog (ARIA, HTML5)• @dugboticus + alistairduggin.co.uk• @AccessifyForum + accessifyforum.com
  31. 31. 10 Principles• Be equitable • Be preventative• Be flexible • Be tolerant• Be simple and • Be effortless intuitive • Be accommodating• Be perceptible • Be consistent• Be informative http://www.copious.co.uk/10Principles.php
  32. 32. http://www.flickr.com/photos/ottoman42/5026107/
  33. 33. Thank you for listening! Questions?@kmdk / @stcaccesshttp://www.mardahl.dkhttp:/flavors.me/kmdk

×