Getting Down and Dirty with Accessibility and Usability workshop at TCUK12

7,858 views
7,386 views

Published on

Transcript and extra notes available at http://www.mardahl.dk/2012/11/02/getting-down-and-dirty-with-accessibility-usability-tcuk12-workshop/
Workshop at Technical Communication UK 2012 conference, Newcastle, UK.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • OFS builds enterprise class mobile apps for companies to equip their workforce with the latest ipad, iphone, Android, Blackberry and Windows mobile technologies.
    Visit:www.ofsmobile.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,858
On SlideShare
0
From Embeds
0
Number of Embeds
1,681
Actions
Shares
0
Downloads
20
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Getting Down and Dirty with Accessibility and Usability workshop at TCUK12

  1. Getting Down andDirty with Accessibilityand Usability Karen Mardahl 2 October 2012 #TCUK12
  2. Today’s workshop
  3. 1. ToolkitDolev at http://commons.wikimedia.org/wiki/File:Carpentry_hand_tools.jpg CC-BY-SA-3.0
  4. 2. Application
  5. 3. Enlightenment http://www.flickr.com/photos/kmardahl/4237843259/ CC BY-NC-SA 3.0
  6. BAD Demo• The Before-and-After Demo http://www.w3.org/WAI/demos/bad/
  7. Good examples of accessible websites• http://terrillthompson.com/blog/229• http://www.accessiweb.org/index.php/ galerie.html
  8. <alt>• http://dev.w3.org/html5/alt-techniques/• http://webaim.org/techniques/alttext/• http://www.joedolson.com/articles/2012/06/ the-case-missing-alt-attribute/• Remember <alt=””>
  9. <title>• http://www.paciellogroup.com/blog/ 2010/11/using-the-html-title-attribute/
  10. <longdesc>• Just do it, but...• http://webaim.org/techniques/images/ longdesc• Tables...
  11. Headings and Structure• Logical!• Skip to main content links (blind & keyboard users)• Sequence and patterns (non-linear navigation - reading order)• Style guides (for consistency)• ARIA
  12. Lists: <ol> <ul> <li>& CSS styling
  13. Keyboard-only access• Do it with a keyboard• http://webaim.org/techniques/keyboard/• <tabindex>
  14. Color• Remember that color and color contrast and alternate indicators play together.• Never use color as your only delimiter.• http://www.snook.ca/ technical/colour_contrast/ colour.html
  15. LabelsSource of images: http://www.youtube.com/watch?v=T5OClvFL8I8
  16. Link text“Click here”“Read more”
  17. Plain Language• http://www.designtoread.com/• US: Center for Plain Language http://centerforplainlanguage.org/• US: Plain Language in the Federal government http://www.plainlanguage.gov/ http://www.plainlanguage.gov/howto/ quickreference/checklist.cfm• UK: Plain Language Commission http://www.clearest.co.uk/
  18. “How to WriteClearly” in 23 languages• http://ec.europa.eu/ipg/ index_en.htm – leads to info about accessibility• http://ec.europa.eu/translation/ index_en.htm – go to the link for “How to write clearly”. It takes you to the EU bookshop• http://bookshop.europa.eu/is-bin/ INTERSHOP.enfinity/WFS/EU- Bookshop-Site/en_GB/-/EUR/ ViewPublication-Start? PublicationKey=HC3010536
  19. Text Size• http://www.smashingmagazine.com/ 2011/10/07/16-pixels-body-copy-anything- less-costly-mistake/• http://www.zeldman.com/
  20. Tables• http://webaim.org/techniques/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!)
  21. http://www.slideshare.net/kmardahl/technical-communication-and-inclusion-5347819 Captioning
  22. Video• 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• And no <autoplay>!
  23. <autoplay=”autoplay”>
  24. ARIA• ARIA (application, banner, complementary, contentinfo, form, main, navigation, search)• http://www.nomensa.com/blog/2010/wai- aria-document-landmark-roles/• http://www.nomensa.com/blog/2010/ screen-readers-and-aria-landmark-roles/• http://www.paciellogroup.com/blog/ 2010/10/using-wai-aria-landmark-roles/
  25. Testing and Evaluation• 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
  26. 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.dk/2011/04/ learning-how-to-use-and-test-with.html
  27. StandardsW3C WAI: http://www.w3.org/WAI/Web Accessibility Code of Practice BS8878 (UK):http://www.access8878.com
  28. 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.
  29. WCAG 2.0• 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/
  30. 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)• Sign up for the discussion list at WebAIM http://webaim.org/community/
  31. 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• Accessibility for Web Writers series at http://www.4syllables.com.au/2010/09/accessibility-web- writers-part-1/
  32. 10 Principles• Be equitable • Be preventative• Be flexible • Be tolerant• Be simple and • Be effortless intuitive • Be accommodating• Be perceptible • Be consistent• Be informativehttp://www.sandiwassmer.co.uk/resources/the-ten-principles-of-inclusive-web-design/
  33. 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
  34. http://www.flickr.com/photos/ottoman42/5026107/
  35. Thank you for listening! Questions?@kmdk / @stcaccesshttp://www.mardahl.dkhttp://about.me/kmdk
  36. EXTRA
  37. Mobile• Opera Mobile Emulator http://www.opera.com/developer/tools/ mobile• http://ready.mobi/ (older models)
  38. User diversity• Test with real people!• http://www.uiaccess.com/accessucd/ involve.html• http://alistairduggin.co.uk/blog/using- personas-to-teach-accessibility/
  39. I W eb AI M .o rg
  40. webaim.org/resources/designers
  41. throup.org.uk/infographic
  42. Twitter+ Resources• @RogerJohansson + 456bereastreet.com• @webaxe + webaxe.org• @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
  43. Coding 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

×