Making Accessible Content Easy and Part of Your Work

Presented for the University of Pittsburgh's Destination Diversity series. Full write up: http://wp.me/pHQ83-X9
--
Accessibility is important, and legislation tells us we need to create content that is accessible, but how? Come learn about ways to make your digital and online content accessible that can easily integrate into your workflow. We will discuss both web content and documents, including PDFs.

Transcript

1. MAKING ACCESSIBLE
   CONTENT EASY AND
   PART OF YOUR WORK
   February 5, 2015
   Cynthia Ng
   @TheRealArty
   

   View Slide

2. WHAT IS WEB ACCESSIBILITY?
   

   View Slide

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

   View Slide

4. TYPES OF DISABILITIES
   visual
   auditory
   physical/motor
   touch
   learning
   

   View Slide

5. WHY SHOULD YOU CARE?
   

   View Slide

6. Brault, Matthew W. (2012). Americans With Disabilities: 2010 Household Economic Studies. http://www.census.gov/prod/2012pubs/p70-131.pdf
   

   View Slide

7. DISABILITY > MINORITY*
   * Based on 2010 US census , and the
   percentage of total population with a disability percentage of total population of minorities.
   

   View Slide

8. POLICY & LEGISLATION
   

   View Slide

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

   View Slide

10. THE AMERICANS WITH DISABILITIES ACT
    

    View Slide

11. AT PITT EDU
    Disabilities Resources and Services policies
    

    View Slide

12. GETTING BUY-IN
    

    View Slide

13. View Slide

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

    View Slide

15. BENEFITS SIMPLIFIED
    findable
    accessible
    usable
    shareable
    efficient
    collaborative
    

    View Slide

16. APPROACH TO ACCESSIBILITY
    

    View Slide

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

    View Slide

18. DESIGNING FOR ASSISTIVE TECHNOLOGY
    

    View Slide

19. ASSISTIVE TECHNOLOGY
    screen readers
    text-to-speech
    screen magnifiers
    joysticks
    mobile devices
    keyboards
    

    View Slide

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

    View Slide

21. animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/CC-BY-ND 3.0
    

    View Slide

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

    View Slide

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

    View Slide

24. The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
    

    View Slide

25. UNIVERSAL DESIGN SUMMARIZED
    equitable
    flexible
    simple
    intuitive
    low effort
    approachable
    usable
    

    View Slide

26. marziarh. (2012). Robson Square. https://www.flickr.com/photos/maziarh/7216119402/CC BY-NC-ND 2.0
    

    View Slide

27. CONTENT GUIDELINES
    

    View Slide

28. GENERAL WRITING
    use consistent language
    write out acronyms the first time you use them
    be clear and concise
    

    View Slide

29. HEADINGS
    Header 1 (Title): Making Content Accessible
    Header 2 (Topic): Creating Documents
    Header 3 (Subtopic): Using Headers
    Header 2 (Topic): Creating Media
    

    View Slide

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

    View Slide

31. CHANGING STYLES
    

    View Slide

32. FONT FACE, SIZE, & COLOUR
    Font Face: Arial, Verdana, a Sans-Serif font
    

    View Slide

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

    View Slide

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

    View Slide

35. TABLES
    

    View Slide

36. BASIC TABLES IN HTML
    
    = table row
    = table header
    = table cell
    
    
    Date
    February 5
    //more dates
    
    
    Time
    1pm
    //more times
    
    // more rows with data
    
    

    View Slide

37. LINKS
    vs.
    Click here
    University of Pittsburgh
    

    View Slide

38. MATH
    Simple Arithmetic: 2 + 3 = 5
    Complex: MathML
    

    View Slide

39. MEDIA
    

    View Slide

40. IMAGES
    Alternative Text: alt=""
    

    View Slide

41. griangrafanna. (2006). Red Panda Pensive. https://www.flickr.com/photos/rh_photographic_art/12831639683/CC BY-NC 2.0
    

    View Slide

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

    View Slide

43. INSERTING IMAGES IN WORDPRESS
    

    View Slide

44. 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/
    

    View Slide

45. View Slide

46. AUDIO
    Woman: You should give an example.
    Man: Very well. (clears throat) This is the best example I can think
    of.
    

    View Slide

47. VIDEO WITH CAPTIONS EXAMPLE
    LabofOrnithology. (2012). Birds-of-Paradise Project Introduction. https://www.youtube.com/watch?v=YTR21os8gTA
    

    View Slide

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

    View Slide

49. MORE ON AUDIO/VIDEO
    Text Alternate not needed if already explained in text.
    No autoplay
    Have controls
    Avoid flashing
    

    View Slide

50. RESOURCE
    Penn State’s Video Captions and Audio Transcripts Guide
    

    View Slide

51. MEDIA SUMMARIZED
    Images: alt text
    Audio: transcript
    Video: transcript, captions, descriptive audio
    

    View Slide

52. CREATING DOCUMENTS
    

    View Slide

53. ASSESSING ACCESSIBILITY OF CONTENT
    

    View Slide

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

    View Slide

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

    View Slide

56. BASIC PDF TEXT-READABILITY
    

    View Slide

57. ONLINE ASSESSMENT TOOLS
    For more,
    WAVE
    Color Filter
    Vischeck
    Color Contrast Checker
    W3C Web Accessibility Tools list
    

    View Slide

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

    View Slide

59. 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, drsrecep@pitt.edu, (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.
    

    View Slide

60. EXAMPLES
    Penn State University Libraries Web Accessibility Statement
    Toronto Public Library Accessibility Policy
    University of Oxford Accessibility Statement
    

    View Slide

61. TAKE AWAY
    

    View Slide

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

    View Slide

63. THANKS!
    CONTACT
    Cynthia Ng
    @TheRealArty
    about.me/cynthiang
    

    View Slide