Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Accessible Content Easy and Part of Your Work

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.

Cynthia "Arty" Ng

February 05, 2015
Tweet

More Decks by Cynthia "Arty" Ng

Other Decks in Technology

Transcript

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

    View full-size slide

  2. WHAT IS WEB ACCESSIBILITY?

    View full-size 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 full-size slide

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

    View full-size slide

  5. WHY SHOULD YOU CARE?

    View full-size slide

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

    View full-size 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 full-size slide

  8. POLICY & LEGISLATION

    View full-size 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 full-size slide

  10. THE AMERICANS WITH DISABILITIES ACT

    View full-size slide

  11. AT PITT EDU
    Disabilities Resources and Services policies

    View full-size slide

  12. GETTING BUY-IN

    View full-size slide

  13. 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 full-size slide

  14. BENEFITS SIMPLIFIED
    findable
    accessible
    usable
    shareable
    efficient
    collaborative

    View full-size slide

  15. APPROACH TO ACCESSIBILITY

    View full-size slide

  16. 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 full-size slide

  17. DESIGNING FOR ASSISTIVE TECHNOLOGY

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. CONTENT GUIDELINES

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. CHANGING STYLES

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. BASIC TABLES IN HTML

    = table row
    = table header
    = table cell


    Date
    February 5
    //more dates


    Time
    1pm
    //more times

    // more rows with data

    View full-size slide

  35. LINKS
    vs.
    Click here
    University of Pittsburgh

    View full-size slide

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

    View full-size slide

  37. IMAGES
    Alternative Text: alt=""

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

  40. INSERTING IMAGES IN WORDPRESS

    View full-size slide

  41. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. CREATING DOCUMENTS

    View full-size slide

  49. ASSESSING ACCESSIBILITY OF CONTENT

    View full-size slide

  50. 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 full-size slide

  51. 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 full-size slide

  52. BASIC PDF TEXT-READABILITY

    View full-size slide

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

    View full-size slide

  54. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  57. 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 full-size slide

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

    View full-size slide