Social Media sites and Learning Management Systems rely on end-users, not web developers, to create the content at the heart of the site. How can we design our interfaces to encourage users to create usable, accessible content? Can we train our users without annoying them or driving them away? What tools can we give them to make it easier for them to create the best content? Whether we have professors using Moodle or Sakai to create coursework for students, or bloggers communicating on Diaspora, identi.ca, or Dreamwidth, we want it to be easy for our users to create content every bit as accessible and usable as we would create ourselves.

1. User-Created Content
Maintaining accessibility and usability when you don't
control the content
Athena Yao
dreamwidth.org

2. What I'm not talking about
General Accessibility

3. What I'm not talking about
(things you write)

4. What I am talking about
Authoring Tools

5. What I am talking about
!
(things you write that let
other people write their own
things)

6. W3C Web Accessibility Initiative
Authoring Tool Accessibility
Guidelines (ATAG)

7. Principles

8. Principles
•
Make the right thing happen automatically

9. Principles
•
Make the right thing happen automatically
•
Teach the user as they create

10. Principles
•
Make the right thing happen automatically
•
Teach the user as they create
•
Help the user do the right thing

11. Not alt text
This is the title

12. Alt text
Exposed by http://
wave.webaim.org

13. What not to do
Examples in the alt
attribute

14. Foobar example

15. Foobr example

16. Foobr example

17. Foobr example

18. Foobr example

19. •
Label - filename
!
•
Description - alt text
Foobr example

20. Foobr example

21. Foobr example

22. Foobr example

23. Foobr example

24. Foobr example

25. Foobr example

26. •
Label - filename
!
•
Description - alt text
Foobr example

27. •
Label - filename alt text!
!
•
Description - alt text
Foobr example

28. •
Label - filename alt text
!
•
Description - alt text <$foobrAssetDescription>
Foobr example

29. •
Label - filename alt text
!
•
Description - alt text <$foobrAssetDescription>
unused
Foobr example

30. Foobr summary

31. •
Interface only sometimes prompts for alt
Foobr summary

32. •
Interface only sometimes prompts for alt
•
Unclear field labels
Foobr summary

33. •
Interface only sometimes prompts for alt
•
Unclear field labels
•
Biggest textbox not always useful
Foobr summary

34. •
Interface only sometimes prompts for alt
•
Unclear field labels
•
Biggest textbox not always useful
•
Alt should be context-sensitive
Foobr summary

35. •
Interface only sometimes prompts for alt
•
Unclear field labels
•
Biggest textbox not always useful
•
Alt should be context-sensitive
•
Prepopulation is confusing
Foobr summary

36. •
Interface only sometimes prompts for alt
•
Unclear field labels
•
Biggest textbox not always useful
•
Alt should be context-sensitive
•
Prepopulation is confusing
•
Alt should be descriptive text or alt= "", never filename
Foobr summary

37. •
Interface only sometimes prompts for alt
•
Unclear field labels
•
Biggest textbox not always useful
•
Alt should be context-sensitive
•
Prepopulation is confusing
•
Alt should be descriptive text or alt= "", never filename
•
No help!
Foobr summary

38. Xyzzy
example

39. Xyzzy
example

40. Xyzzy
example

41. Xyzzy
example

42. Xyzzy
example

43. Xyzzy
example

44. Xyzzy
example

45. Xyzzy
example

46. Xyzzy
example

47. Xyzzy
example

48. Xyzzy
summary

49. Xyzzy
summary
•
Alt and caption
are identical

50. Xyzzy
summary
•
Alt and caption
are identical
•
Human factor:
visual result
unappealing to
site's userbase

51. Help your users
More examples in the
alt attribute

52. Dreamwidth

53. Only two fields.
Dreamwidth

54. Inline help
Dreamwidth

55. Link to more
information
Dreamwidth

56. Dreamwidth

57. Dreamwidth

58. Dreamwidth

59. Dreamwidth

60. Dreamwidth

61. Dreamwidth

62. Dreamwidth

63. Dreamwidth

64. Know Your Users

65. Know Your Users
•
How many options can they tolerate?

66. Know Your Users
•
How many options can they tolerate?
•
Are you enforcing or encouraging?

67. Know Your Users
•
How many options can they tolerate?
•
Are you enforcing or encouraging?
•
What kind of education can you do?

68. Know Your Users
•
How many options can they tolerate?
•
Are you enforcing or encouraging?
•
What kind of education can you do?
•
Do they already care about accessibility?

69. Know Your Users
•
How many options can they tolerate?
•
Are you enforcing or encouraging?
•
What kind of education can you do?
•
Do they already care about accessibility?
•
What visual effect is acceptable to your users?

70. Know Your Users
•
How many options can they tolerate?
•
Are you enforcing or encouraging?
•
What kind of education can you do?
•
Do they already care about accessibility?
•
What visual effect is acceptable to your users?
•
What level of hand coding can they do?

71. Silent Helping
Accessible embeds
and styles

74. Presentation:
Athena Yao
@afuna
http://fu.dreamwidth.org
Slides:
Deborah Kaplan
@deborah_gu
http://deborah.dreamwidth.org
Further resources:
•
Authoring Tool Accessibility Guidelines: http://
www.w3.org/WAI/intro/atag.php
•
Comparing Learning Management Systems: http://
weba.im/csun2013lms
•
Web Accessibility for the 21st century: https://
github.com/rahaeli/accessibility
Questions?