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