Slide 1
Slide 1 text
MAKING ACCESSIBLE
CONTENT EASY AND
PART OF YOUR WORK
February 5, 2015
Cynthia Ng
@TheRealArty
Slide 2
Slide 2 text
WHAT IS WEB ACCESSIBILITY?
Slide 3
Slide 3 text
Web accessibility means that people
with disabilities can use the Web.
- W3C Web Accessibility Initiative (WAI)
W3C Web Accessibility Initiative. (2005). What is Web Accessibility. Introduction to Web Accessibility. http://www.w3.org/WAI/intro/accessibility.php
Slide 4
Slide 4 text
TYPES OF DISABILITIES
visual
auditory
physical/motor
touch
learning
Slide 5
Slide 5 text
WHY SHOULD YOU CARE?
Slide 6
Slide 6 text
Brault, Matthew W. (2012). Americans With Disabilities: 2010 Household Economic Studies. http://www.census.gov/prod/2012pubs/p70-131.pdf
Slide 7
Slide 7 text
DISABILITY > MINORITY*
* Based on 2010 US census , and the
percentage of total population with a disability percentage of total population of minorities.
Slide 8
Slide 8 text
POLICY & LEGISLATION
Slide 9
Slide 9 text
No otherwise qualified individual with a
disability shall [...] be excluded from [...]
any program or activity receiving
Federal financial assistance.
- Section 504
United States Department of Labor. (n.d.). Section 504, The Rehabilitation Act of 1973. http://www.dol.gov/oasam/regs/statutes/sec504.htm
Slide 10
Slide 10 text
THE AMERICANS WITH DISABILITIES ACT
Slide 11
Slide 11 text
AT PITT EDU
Disabilities Resources and Services policies
Slide 12
Slide 12 text
GETTING BUY-IN
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
BENEFITS
reflect institutional mission, leadership, and values
serve all users
make sound fiscal policy
add value to the institution
Sources: Maler, A. (2013). The Complete Beginner’s Guide to Universal Design. UX Booth. and
Rowland, C., Mariger, H., Siegel, P. M., & Whiting, J. (2010). Universal Design for the Digital Environment: Transforming the Institution. EDUCAUSE Review*, 45(6).
http://www.uxbooth.com/articles/the-complete-beginners-guide-to-universal-design/
http://www.educause.edu/ero/article/universal-design-digital-environment-transforming-institution
Slide 15
Slide 15 text
BENEFITS SIMPLIFIED
findable
accessible
usable
shareable
efficient
collaborative
Slide 16
Slide 16 text
APPROACH TO ACCESSIBILITY
Slide 17
Slide 17 text
Accessibility often gets pigeon-holed as
simply making sure there are no
barriers to access for screen readers or
other assistive technology, without
regard to usability.
- Whitney Quesenbery @whitneyq
Quesenbery, W. (2009). Usable Accessibility: Making Web Sites Work Well for People with Disabilities. UX Matters. http://www.uxmatters.com/mt/archives/2009/02/usable-
accessibility-making-web-sites-work-well-for-people-with-disabilities.php
Slide 18
Slide 18 text
DESIGNING FOR ASSISTIVE TECHNOLOGY
Slide 19
Slide 19 text
ASSISTIVE TECHNOLOGY
screen readers
text-to-speech
screen magnifiers
joysticks
mobile devices
keyboards
Slide 20
Slide 20 text
All Technology is Assistive Technology.
- Sara Hendren @ablerism
Hendron, S. (2013). All Technology is Assistive Technology: 6 dispositions for designers on disability. https://medium.com/thoughtful-design/a8b9a581eb62
Slide 21
Slide 21 text
animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/CC-BY-ND 3.0
Slide 22
Slide 22 text
There is no average or normal user.
- Sara Hendren @ablerism
Hendron, S. (2013). All Technology is Assistive Technology: 6 dispositions for designers on disability. https://medium.com/thoughtful-design/a8b9a581eb62
Slide 23
Slide 23 text
UNIVERSAL DESIGN
Universal design is the design of
products and environments to be
usable by all people, to the greatest
extent possible, without the need for
adaptation or specialized design.
- Ron Mace
Mace, R. (1998). Universal design in housing. Assistive Technology, 10(1), 21-28.
Slide 24
Slide 24 text
The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
Slide 25
Slide 25 text
UNIVERSAL DESIGN SUMMARIZED
equitable
flexible
simple
intuitive
low effort
approachable
usable
Slide 26
Slide 26 text
marziarh. (2012). Robson Square. https://www.flickr.com/photos/maziarh/7216119402/CC BY-NC-ND 2.0
Slide 27
Slide 27 text
CONTENT GUIDELINES
Slide 28
Slide 28 text
GENERAL WRITING
use consistent language
write out acronyms the first time you use them
be clear and concise
Slide 29
Slide 29 text
HEADINGS
Header 1 (Title): Making Content Accessible
Header 2 (Topic): Creating Documents
Header 3 (Subtopic): Using Headers
Header 2 (Topic): Creating Media
Slide 30
Slide 30 text
USING STYLES
WebAIM. (2014). Microsoft Word.
© WebAIM. Used under full credit, at no cost allowance as per the .
http://webaim.org/techniques/word/
WebAIM Copyright & Terms of Use
Slide 31
Slide 31 text
CHANGING STYLES
Slide 32
Slide 32 text
FONT FACE, SIZE, & COLOUR
Font Face: Arial, Verdana, a Sans-Serif font
Slide 33
Slide 33 text
SERIF VS. SANS-SERIF FONT
Carlton R. (2015). Challenge Bingo FAQ! Post #49. .
Reuse as per
http://www.sweetshoppecommunity.com/forum/showthread.php?p=1062723008
Sweet Shopped Designs Terms of Use
Slide 34
Slide 34 text
FONT FACE, SIZE, & COLOUR
Font Face: Arial, Verdana, a Sans-Serif font
Font Size: 12pt or higher
Body: 12 pt
Header 3: 14 pt
Header 2: 16 pt
Header 1: 18 pt
Also bold & italic for headers
Font Colour: black or default
Slide 35
Slide 35 text
TABLES
Slide 36
Slide 36 text
BASIC TABLES IN HTML
= table row
= table header
= table cell
// more rows with data
Date
February 5
//more dates
Time
1pm
//more times
Slide 37
Slide 37 text
LINKS
vs.
Click here
University of Pittsburgh
Slide 38
Slide 38 text
MATH
Simple Arithmetic: 2 + 3 = 5
Complex: MathML
Slide 39
Slide 39 text
MEDIA
Slide 40
Slide 40 text
IMAGES
Alternative Text: alt=""
Slide 41
Slide 41 text
griangrafanna. (2006). Red Panda Pensive. https://www.flickr.com/photos/rh_photographic_art/12831639683/CC BY-NC 2.0
Slide 42
Slide 42 text
INSERTING IMAGES IN WORD
WebAIM. (2014). Microsoft Word.
© WebAIM. Used under full credit, at no cost allowance as per the .
http://webaim.org/techniques/word/
WebAIM Copyright & Terms of Use
Slide 43
Slide 43 text
INSERTING IMAGES IN WORDPRESS
Slide 44
Slide 44 text
MrShuffleupagus. (2014). This is a picture I took of a friend's dog, Spike, and the face he makes whenever he's confused. http://www.4syllables.com.au/2010/12/text-
alternatives-decision-tree/
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
AUDIO
Woman: You should give an example.
Man: Very well. (clears throat) This is the best example I can think
of.
Slide 47
Slide 47 text
VIDEO WITH CAPTIONS EXAMPLE
LabofOrnithology. (2012). Birds-of-Paradise Project Introduction. https://www.youtube.com/watch?v=YTR21os8gTA
Slide 48
Slide 48 text
DESCRIPTIVE VIDEO EXAMPLE
Electrox3d. (2011). Star Wars for Blind People (Blu-ray audio track): description of a Jawa shooting R2!. http://www.youtube.com/watch?v=PCZqKxQME6o
Slide 49
Slide 49 text
MORE ON AUDIO/VIDEO
Text Alternate not needed if already explained in text.
No autoplay
Have controls
Avoid flashing
Slide 50
Slide 50 text
RESOURCE
Penn State’s Video Captions and Audio Transcripts Guide
Slide 51
Slide 51 text
MEDIA SUMMARIZED
Images: alt text
Audio: transcript
Video: transcript, captions, descriptive audio
Slide 52
Slide 52 text
CREATING DOCUMENTS
Slide 53
Slide 53 text
ASSESSING ACCESSIBILITY OF CONTENT
Slide 54
Slide 54 text
CHECKING ACCESSIBILITY IN MICROSOFT OFFICE
WebAIM. (2014). Microsoft Word.
© WebAIM. Used under full credit, at no cost allowance as per the .
http://webaim.org/techniques/word/
WebAIM Copyright & Terms of Use
WebAIM. (2014). PowerPoint Accessibility.
© WebAIM. Used under full credit, at no cost allowance as per the .
http://webaim.org/techniques/powerpoint/
WebAIM Copyright & Terms of Use
Slide 55
Slide 55 text
PDF ACCESSIBILITY
WebAIM. (2014). PDF Accessibility: Converting Documents to PDF.
© WebAIM. Used under full credit, at no cost allowance as per the .
http://webaim.org/techniques/acrobat/converting
WebAIM Copyright & Terms of Use
California State University, Long Beach. (2014). Making Existing PDFs Accessible.
http://www.csulb.edu/divisions/aa/academic_technology/itss/fits/accessibility/existingpdfs.html
Slide 56
Slide 56 text
BASIC PDF TEXT-READABILITY
Slide 57
Slide 57 text
ONLINE ASSESSMENT TOOLS
For more,
WAVE
Color Filter
Vischeck
Color Contrast Checker
W3C Web Accessibility Tools list
Slide 58
Slide 58 text
NEED HELP? JUST ASK
RESOURCES
includes making accessible Word, PDF,
PowerPoint content, and converting to PDF
DRS’ Information for Instructors
CIDDE's Accessibility Resources for Faculty
Faculty Knowledge Base's Accessibility Guidelines for
Blackboard
PittOnline Top 10 Best Practices
WebAIM Articles
Slide 59
Slide 59 text
ACCESSIBILITY STATEMENT
If you have a disability for which you
are or may be requesting an
accommodation, you are encouraged to
contact both your instructor and
Disability Resources and Services (DRS),
140 William Pitt Union, (412) 648-
7890, [email protected], (412)228-
5347 for P3 ASL users, as early as
possible in the term. DRS will verify
your disability and determine
reasonable accommodations for this
course.
Slide 60
Slide 60 text
EXAMPLES
Penn State University Libraries Web Accessibility Statement
Toronto Public Library Accessibility Policy
University of Oxford Accessibility Statement
Slide 61
Slide 61 text
TAKE AWAY
Slide 62
Slide 62 text
The power of the Web is in its
universality. Access by everyone
regardless of disability is an essential
aspect.
- Tim Berners-Lee @timbernerslee
World Wide Web Consortium. (1997). World Wide Web Consortium Launches International Program Office for Web Accessibility Initiative. http://www.w3.org/Press/IPO-
announce
Slide 63
Slide 63 text
THANKS!
CONTACT
Cynthia Ng
@TheRealArty
about.me/cynthiang