Making Accessible Content Easy and Part of Your Work

Cynthia Ng
@TheRealArty
March 10, 2016

chipmunk eating rice nanand. (2008). Lunch! https://www.flickr.com/photos/nanand/2289384036/ CC BY-NC 2.0

What is Web Accessibility?

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

Types of Disabilities

  • visual
  • auditory
  • physical/motor
  • touch
  • learning

Why Should You Care?

icon of 10 people, one of which is coloured in Statistics Canada. (2013). https://twitter.com/StatCan_eng/statuses/407940135729508352

Disability > Minority*

* Based on the 2006 Canada census percentage of total population ages 15-64 with a disability, and the percentage of total population of minorities.

Policy & Legislation

Canadian Human Rights Act

At JIBC

Accommodation of Students with Disabilities (Policy 3209)

Getting Buy-in

gov.uk screenshot
screenshot of U.S. Department of the Interior website homepage Source: Sutton, Marcy. (2015). US Department of the Interior. Showcasing Accessible Websites

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. http://www.uxbooth.com/articles/the-complete-beginners-guide-to-universal-design/ 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.educause.edu/ero/article/universal-design-digital-environment-transforming-institution

Benefits Simplified

  • findable
  • accessible
  • usable
  • shareable
  • efficient
  • collaborative

Approach to Accessibility

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

Designing for Assistive Technology

Assistive Technology

  • screen readers
  • text-to-speech
  • screen magnifiers
  • joysticks
  • mobile devices
  • keyboards
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
table with over 30 android devices animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/ CC-BY-ND 3.0
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

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.
7 principles of universal design The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/

Universal Design Summarized

  • equitable
  • flexible
  • simple
  • intuitive
  • low effort
  • approachable
  • usable
example wheelchair ramp marziarh. (2012). Robson Square. https://www.flickr.com/photos/maziarh/7216119402/ CC BY-NC-ND 2.0

Content Guidelines

General Writing

  • use consistent language
  • write out acronyms the first time you use them
  • be clear and concise

Headings

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

Using Styles

styles portion of Microsoft Word ribbon styles drop down in Word for Mac WebAIM. (2014). Microsoft Word. http://webaim.org/techniques/word/
© WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use.

Changing Styles

styles context menu

Font Face, Size, & Colour

  • Font Face: Arial, Verdana, a Sans-Serif font

Serif vs. Sans-Serif Font

word cats used to display the serifs in a font with sans-serif font for comparison Carlton R. (2015). Challenge Bingo FAQ! Post #49. http://www.sweetshoppecommunity.com/forum/showthread.php?p=1062723008.
Reuse as per Sweet Shopped Designs Terms of Use

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

Tables

example table formatted with both row header and column header

Basic Tables in HTML

  • = table row
  • = table header
  • = table cell
    
    
      // more rows with data
    
    Date February 5 //more dates
    Time 1pm //more times

    Links

    Click here
    vs.
    Justice Institute of British Columbia

    Math

    Simple Arithmetic: 2 + 3 = 5

    Complex: MathML

    Media

    Images

    Alternative Text: alt=""

    red panda griangrafanna. (2006). Red Panda Pensive. https://www.flickr.com/photos/rh_photographic_art/12831639683/ CC BY-NC 2.0
    Inserting Images in Word
    choosing the format picture option in Word put alt text in description not title field WebAIM. (2014). Microsoft Word. http://webaim.org/techniques/word/
    © WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use.
    Inserting Images in WordPress
    image information editor box in WordPress
    alt text decision flow chart Alexander, Dey. (2014). Text alternatives for images: a decision tree.
    bar graph example

    Audio

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

    Video with Captions Example

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

    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

    More on Audio/Video

    • Text Alternate not needed if already explained in text.
    • No autoplay
    • Have controls
    • Avoid flashing

    Resource

    Queen's University’s Video Captions and Audio Transcripts Guide

    Media Summarized

    • Images: alt text
    • Audio: transcript
    • Video: transcript, captions, descriptive audio

    Creating Documents

    example paste from word icon in editor bar

    Assessing Accessibility of Content

    Checking Accessibility in Microsoft Office

    in Word, go to Info, check for issues, check accessibility in PowerPoint, go to Info, check for issues, check accessibility WebAIM. (2014). Microsoft Word. http://webaim.org/techniques/word/
    © WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use.
    WebAIM. (2014). PowerPoint Accessibility. http://webaim.org/techniques/powerpoint/
    © WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use.

    PDF Accessibility

    in Word, go to File, Save as Adobe PDF if available Adobe Acrobat has accessibility reporting options under Tools menu WebAIM. (2014). PDF Accessibility: Converting Documents to PDF. http://webaim.org/techniques/acrobat/converting
    © WebAIM. Used under full credit, at no cost allowance as per the 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

    Basic PDF Text-Readability

    PDf page with some text highlighted

    Online Assessment Tools

    Need Help? Just Ask

    Resources

    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 the Disability Counsellor, (604) 528-5884, disability@jibc.ca, as early as possible in the term. Student services will verify your disability and determine reasonable accommodations for this course.
    Modified version of: Center for Instructional Development & Distance Education, University of Pittsburgh. (2015). Accessibility Resources For Faculty. http://www.cidde.pitt.edu/accessibility/

    Examples

    Take Away

    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

    Thanks!