The document discusses accessibility and usability in web design, emphasizing the importance of creating inclusive digital content. It offers various resources, techniques, and guidelines for implementing Web Content Accessibility Guidelines (WCAG) 2.0, as well as practical advice for keyboard navigation, color contrast, and clear language. Additionally, it highlights the need for user testing and provides links to tools and standards for evaluating web accessibility.

1. Getting Down and
Dirty with Accessibility
and Usability
Karen Mardahl
2 October 2012
#TCUK12

2. Today’s workshop

3. 1. Toolkit
Dolev 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. Labels
Source 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 Write
Clearly” 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. Standards
W3C 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 Project's 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 informative
http://www.sandiwassmer.co.uk/resources/the-ten-principles-of-inclusive-web-design/

33. When universal design
processes fail to include,
consult with, and listen to the
people we are actually
designing for, we also fail to
design 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 / @stcaccess
http://www.mardahl.dk
http://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

42. throup.org.uk/infographic

45. 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

46. 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