User-Created Content
Maintaining accessibility and usability when you don't
control the content

Athena Yao
dreamwidth.org
What I'm not talking about

General Accessibility
What I'm not talking about

(things you write)
What I am talking about

Authoring Tools
What I am talking about
!

(things you write that let
other people write their own
things)
W3C Web Accessibility Initiative
Authoring Tool Accessibility
Guidelines (ATAG)
Principles
Principles
•

Make the right thing happen automatically
Principles
•

Make the right thing happen automatically

•

Teach the user as they create
Principles
•

Make the right thing happen automatically

•

Teach the user as they create

•

Help the user do the right t...
Not alt text
This is the title
Alt text
Exposed by http://
wave.webaim.org
What not to do

Examples in the alt
attribute
Foobar example
Foobr example
Foobr example
Foobr example
Foobr example
•

Label - filename

!

•

Description - alt text

Foobr example
Foobr example
Foobr example
Foobr example
Foobr example
Foobr example
Foobr example
•

Label - filename

!

•

Description - alt text

Foobr example
•

Label - filename alt text!

!

•

Description - alt text

Foobr example
•

Label - filename alt text

!

•

Description - alt text <$foobrAssetDescription>

Foobr example
•

Label - filename alt text

!

•

Description - alt text <$foobrAssetDescription>
unused

Foobr example
Foobr summary
•

Interface only sometimes prompts for alt

Foobr summary
•

Interface only sometimes prompts for alt

•

Unclear field labels

Foobr summary
•

Interface only sometimes prompts for alt

•

Unclear field labels

•

Biggest textbox not always useful

Foobr summary
•

Interface only sometimes prompts for alt

•

Unclear field labels

•

Biggest textbox not always useful

•

Alt should b...
•

Interface only sometimes prompts for alt

•

Unclear field labels

•

Biggest textbox not always useful

•

Alt should b...
•

Interface only sometimes prompts for alt

•

Unclear field labels

•

Biggest textbox not always useful

•

Alt should b...
•

Interface only sometimes prompts for alt

•

Unclear field labels

•

Biggest textbox not always useful

•

Alt should b...
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
example
Xyzzy
summary
Xyzzy
summary

•

Alt and caption
are identical
Xyzzy
summary

•

Alt and caption
are identical

•

Human factor:
visual result
unappealing to
site's userbase
Help your users

More examples in the
alt attribute
Dreamwidth
Only two fields.

Dreamwidth
Inline help

Dreamwidth
Link to more
information

Dreamwidth
Dreamwidth
Dreamwidth
Dreamwidth
Dreamwidth
Dreamwidth
Dreamwidth
Dreamwidth
Dreamwidth
Know Your Users
Know Your Users
•

How many options can they tolerate?
Know Your Users
•

How many options can they tolerate?

•

Are you enforcing or encouraging?
Know Your Users
•

How many options can they tolerate?

•

Are you enforcing or encouraging?

•

What kind of education ca...
Know Your Users
•

How many options can they tolerate?

•

Are you enforcing or encouraging?

•

What kind of education ca...
Know Your Users
•

How many options can they tolerate?

•

Are you enforcing or encouraging?

•

What kind of education ca...
Know Your Users
•

How many options can they tolerate?

•

Are you enforcing or encouraging?

•

What kind of education ca...
Silent Helping

Accessible embeds
and styles
Presentation:
Athena Yao
@afuna
http://fu.dreamwidth.org

Slides:
Deborah Kaplan
@deborah_gu
http://deborah.dreamwidth.org...
User Created Content: Maintain accessibility in content you don't control
User Created Content: Maintain accessibility in content you don't control
Upcoming SlideShare
Loading in …5
×

User Created Content: Maintain accessibility in content you don't control

1,236 views
1,099 views

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,236
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

User Created Content: Maintain accessibility in content you don't control

  1. 1. User-Created Content Maintaining accessibility and usability when you don't control the content Athena Yao dreamwidth.org
  2. 2. What I'm not talking about General Accessibility
  3. 3. What I'm not talking about (things you write)
  4. 4. What I am talking about Authoring Tools
  5. 5. What I am talking about ! (things you write that let other people write their own things)
  6. 6. W3C Web Accessibility Initiative Authoring Tool Accessibility Guidelines (ATAG)
  7. 7. Principles
  8. 8. Principles • Make the right thing happen automatically
  9. 9. Principles • Make the right thing happen automatically • Teach the user as they create
  10. 10. Principles • Make the right thing happen automatically • Teach the user as they create • Help the user do the right thing
  11. 11. Not alt text This is the title
  12. 12. Alt text Exposed by http:// wave.webaim.org
  13. 13. What not to do Examples in the alt attribute
  14. 14. Foobar example
  15. 15. Foobr example
  16. 16. Foobr example
  17. 17. Foobr example
  18. 18. Foobr example
  19. 19. • Label - filename ! • Description - alt text Foobr example
  20. 20. Foobr example
  21. 21. Foobr example
  22. 22. Foobr example
  23. 23. Foobr example
  24. 24. Foobr example
  25. 25. Foobr example
  26. 26. • Label - filename ! • Description - alt text Foobr example
  27. 27. • Label - filename alt text! ! • Description - alt text Foobr example
  28. 28. • Label - filename alt text ! • Description - alt text <$foobrAssetDescription> Foobr example
  29. 29. • Label - filename alt text ! • Description - alt text <$foobrAssetDescription> unused Foobr example
  30. 30. Foobr summary
  31. 31. • Interface only sometimes prompts for alt Foobr summary
  32. 32. • Interface only sometimes prompts for alt • Unclear field labels Foobr summary
  33. 33. • Interface only sometimes prompts for alt • Unclear field labels • Biggest textbox not always useful Foobr summary
  34. 34. • Interface only sometimes prompts for alt • Unclear field labels • Biggest textbox not always useful • Alt should be context-sensitive Foobr summary
  35. 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. 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. 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. 38. Xyzzy example
  39. 39. Xyzzy example
  40. 40. Xyzzy example
  41. 41. Xyzzy example
  42. 42. Xyzzy example
  43. 43. Xyzzy example
  44. 44. Xyzzy example
  45. 45. Xyzzy example
  46. 46. Xyzzy example
  47. 47. Xyzzy example
  48. 48. Xyzzy summary
  49. 49. Xyzzy summary • Alt and caption are identical
  50. 50. Xyzzy summary • Alt and caption are identical • Human factor: visual result unappealing to site's userbase
  51. 51. Help your users More examples in the alt attribute
  52. 52. Dreamwidth
  53. 53. Only two fields. Dreamwidth
  54. 54. Inline help Dreamwidth
  55. 55. Link to more information Dreamwidth
  56. 56. Dreamwidth
  57. 57. Dreamwidth
  58. 58. Dreamwidth
  59. 59. Dreamwidth
  60. 60. Dreamwidth
  61. 61. Dreamwidth
  62. 62. Dreamwidth
  63. 63. Dreamwidth
  64. 64. Know Your Users
  65. 65. Know Your Users • How many options can they tolerate?
  66. 66. Know Your Users • How many options can they tolerate? • Are you enforcing or encouraging?
  67. 67. Know Your Users • How many options can they tolerate? • Are you enforcing or encouraging? • What kind of education can you do?
  68. 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. 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. 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. 71. Silent Helping Accessible embeds and styles
  72. 72. 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?

×