Getting Down and Dirty with Accessibility and Usability workshop at TCUK12


Published on

Transcript and extra notes available at
Workshop at Technical Communication UK 2012 conference, Newcastle, UK.

Published in: Technology
1 Comment
  • OFS builds enterprise class mobile apps for companies to equip their workforce with the latest ipad, iphone, Android, Blackberry and Windows mobile technologies.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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 CC-BY-SA-3.0
  4. 2. Application
  5. 3. Enlightenment CC BY-NC-SA 3.0
  6. BAD Demo• The Before-and-After Demo
  7. Good examples of accessible websites•• galerie.html
  8. <alt>••• the-case-missing-alt-attribute/• Remember <alt=””>
  9. <title>• 2010/11/using-the-html-title-attribute/
  10. <longdesc>• Just do it, but...• 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•• <tabindex>
  14. Color• Remember that color and color contrast and alternate indicators play together.• Never use color as your only delimiter.• technical/colour_contrast/ colour.html
  15. LabelsSource of images:
  16. Link text“Click here”“Read more”
  17. Plain Language•• US: Center for Plain Language• US: Plain Language in the Federal government quickreference/checklist.cfm• UK: Plain Language Commission
  18. “How to WriteClearly” in 23 languages• index_en.htm – leads to info about accessibility• index_en.htm – go to the link for “How to write clearly”. It takes you to the EU bookshop• INTERSHOP.enfinity/WFS/EU- Bookshop-Site/en_GB/-/EUR/ ViewPublication-Start? PublicationKey=HC3010536
  19. Text Size• 2011/10/07/16-pixels-body-copy-anything- less-costly-mistake/•
  20. Tables•• Screen readers read tables from left to right, from row to row.• <summary>, <th>, <scope>• How-to: creating-accessible-data-tables/  &  http://  (with a football pools example!)
  21. Captioning
  22. Video• Keyboard-accessible YouTube controls: http:// youtube-controls/• JW Player:• Easy YouTube Player: youtube/docs/index.html• Accessible Media Player: 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)• aria-document-landmark-roles/• screen-readers-and-aria-landmark-roles/• 2010/10/using-wai-aria-landmark-roles/
  25. Testing and Evaluation• WAVE• Color Contrast and more studio-accessibility-too/• Fireeyes worldspace-fireeyes• Functional Accessibility Evaluator• Web Developer Extension• Web Accessibility Toolbar for IE wat-ie-about.html• W3C WAI Tool List
  26. Screen reader testing• Learn: testing/• Plan: articles/accessibility/screen-reader-test- plan.php• More at learning-how-to-use-and-test-with.html
  27. StandardsW3C WAI: Accessibility Code of Practice BS8878 (UK):
  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 WCAG20/• How to Meet WCAG 2.0: A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques.
  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. screen-reader/• Just Ask: Integrating Accessibility Throughout Design: (+ print)• Sign up for the discussion list at WebAIM
  31. Learn-more resources• Opera Web Standards Curriculum in association with Yahoo! Developer Network:• Web Standards Projects InterACT (site/book) http://• U of MN Newsletter: Typography, information architecture, usability, accessibility, maintained by @laura_carlson webdev_listserv.html• Accessibility for Web Writers series at 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 informative
  33. When universal designprocesses fail to include,consult with, and listen to thepeople we are actuallydesigning for, we also fail todesign effectively. – Lisa Herrod
  35. Thank you for listening! Questions?@kmdk / @stcaccesshttp://www.mardahl.dk
  36. EXTRA
  37. Mobile• Opera Mobile Emulator mobile• (older models)
  38. User diversity• Test with real people!• involve.html• personas-to-teach-accessibility/
  39. I W eb AI M .o rg
  42. Twitter+ Resources• @RogerJohansson +• @webaxe +• @silviapfeiffer (all about <video>)• @MarcoInEnglish / @MarcoZehe + (Firefox)• @jared_w_smith + (with discussion list, too!)• @iheni + (mobile)• @stevefaulkner + (ARIA, HTML5)• @dugboticus +• @AccessifyForum +
  43. Coding resources• Yahoo! accessibility code library: http://• Accessibility topics at Web Standards Sherpa: reviews/by-topic/accessibility• Mozilla ARIA resources: https://