Making Accessible Content Easy and Part of Your Work

Cynthia Ng
@TheRealArty
March 10, 2016

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

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

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.

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

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

Here’s a thought exercise, which I’ll give you a few moments to think about. Other than wheelchair users, what groups of people might need to use a ramp like this?

Other than wheelchair users, there are many other that find ramps useful or even necessary, such as:

parents with strollers,
seniors with mobility walkers, and
anything else with wheels.

Many places now call it an “access ramp” or just “ramp” to reflect its greater, universal application.

So the goal here is to make your web content accessible and usable for your whole audience, without trying to specifically accommodate for one group. Hopefully, as I go through some guidelines and suggestions, it will occur to you what groups of people might benefit other than people with disabilities.

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

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

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

Next is font size. 12 point or higher is recommended for the body text. For headers, you will simply want to increase it relative to your body text. So if you use a 12 pt body text size, header 3 might be 14 pt, header 2 16 pt, and header 1 18pt. 2 pts is a small gap though, and the bigger the difference, the easier it is to spot the differences between headers when reading text. Consider using bold and italics to differentiate headers too.

For font colour, I recommend black since the background will almost always be white. I do say default is another choice, because in some cases, such as links, you may want to leave it as the standard blue colour. The most important thing is that there is a high contrast between the background and your chosen colours, and that you avoid relying on font colour to relay your message. I'll talk about how to check colour contrast later on.

Again, you may not have a choice in an online system, but if you notice any issues, let the appropriate person or department know.

Tables

example table formatted with both row header and column header

Basic Tables in HTML

<table>
<tr> = table row
<th> = table header
<td> = table cell


<table>
  <tr>
    <th>Date</th>
    <td>February 5</th>
    //more dates
  </tr>
  <tr>
    <th>Time</th>
    <td>1pm</th>
    //more times
  </tr>
  // more rows with data
</table>

Just to give you an idea of how it works in HTML, tables have four main elements. The table tag tells the browser this is a table. TR says this is a table row, TH that it is a table cell that is also a table header, and finally, TD which says it is a table cell. You may see the use of other tags within a table, which are necessary for more complex tables, but we'll stick with a basic example here.

So a basic table might look something like this. We start with an opening table tag, then the first row. Inside the first row, we have a row header followed by the data. Similarly, in the second row, we specify our row header and data, and then we would have more rows similar to this to list all the headers and data. Finally, we close the table at the end.

Please note that this is the structure when the table headers are all in the leftmost column. If you have column headers all in the top row, then the headers would all be listed in the first row instead.

Links

Click here
vs.
Justice Institute of British Columbia

Math

Simple Arithmetic: 2 + 3 = 5

Complex: MathML

Media

Images

Alternative Text: alt=""

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

Alexander, Dey. (2014). Text alternatives for images: a decision tree.

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

There is also the option of descriptive audio. For those who are not familiar with descriptive audio, it is an additional audio track that is added to a video to describe what is happening. Here is an example: ...

Transcript: Suddenly, a hooded figure springs out and zaps R2 with a gun. R2 stops dead in his tracks, his metal body crawling with electrical current. His lights go out and he keels forward.

While descriptive audio is ideal for visually impaired people watching videos, it is generally very costly to make, so it is not usually offered unless it has already been produced.

Alternatively, sometime you will find the description included in the transcript or an alternate version of the captions. You would then simply have two options for captions for people to choose from: one with and one without descriptions.

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

One of the most common difficulties with documents is how accessible they are.

When in an online environment, if you can put the information online in text format, that is a lot better than having people open a separate document. This allows people to avoid having another program open.

Many systems even have a “Paste from Word” option, which will keep much of the formatting when copying from Word, but remove all the extra invisible code that is specific to Word that may cause problems viewing or editing content. In some editors, such as WordPress, there is no special paste from Word button but will do the same process automatically.

If you have to post documents, consider following the same guidelines we have covered before posting.

For lecture notes, it’s a good idea to post the PowerPoint with notes in the notes sections.

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

What about the cases where you didn’t make the PDF? You might be posting someone else’s document, such as a copy of a journal article. While you can use the “Accessibility Checker” in Adobe Acrobat if you have it, it can be a lot of work to correct all the possible issues. You may also be in a situation where you do not have Acrobat handy.

At the most basic, check that the PDF is text-readable. The easiest way to check is to try selecting text and copy/pasting it elsewhere. Did you get text? Is the text understandable? If the answer is no, the PDF should be run through OCR. Acrobat has this feature built-in, but there are many other options.

You will still want to have the DRS improve the accessibility of the PDF beyond basic text readability, but if someone needs the document right away and it’s short, it might be enough.

Online Assessment Tools

WAVE
Color Filter
Vischeck
Color Contrast Checker
For more, W3C Web Accessibility Tools list

There are numerous tools to help you check online content. Just a couple of examples, include:

WAVE - online web accessibility evaluation tool, of which there is a Firefox plugin version. The online tool allows you to give it a webpage address, but the advantage of the browser plugin is that it can give you different views of the webpage you're looking at, including pages where you need a login. The views include seeing text-only, or outline view, showing only headers.
Color Filter - will simulate what a webpage looks like to people with different types of colourblindness.
Similarly, Vischeck will allow you to upload images or allow you to enter a web address to simulate colour blindness.
There are also a number of colour contrast checkers as well, which will check the contrast ratio between your text and the background colour on a webpage.
These are only a few examples. You can take a look at the w3c tools list for more, including screen emulators, and more code-based accessibility checkers.

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!

Contact

Cynthia Ng
@TheRealArty
about.me/cynthiang

Making Accessible Content Easy and Part of Your Work

What is Web Accessibility?

Types of Disabilities

Why Should You Care?

Disability > Minority*

Policy & Legislation

Canadian Human Rights Act

At JIBC

Getting Buy-in

Benefits

Benefits Simplified

Approach to Accessibility

Designing for Assistive Technology

Assistive Technology

Universal Design

Universal Design Summarized

Content Guidelines

General Writing

Headings

Using Styles

Changing Styles

Font Face, Size, & Colour

Serif vs. Sans-Serif Font

Font Face, Size, & Colour

Tables

Basic Tables in HTML

Links

Math

Media

Images

Inserting Images in Word

Inserting Images in WordPress

Audio

Video with Captions Example

Descriptive Video Example

More on Audio/Video

Resource

Media Summarized

Creating Documents

Assessing Accessibility of Content

Checking Accessibility in Microsoft Office

PDF Accessibility

Basic PDF Text-Readability

Online Assessment Tools

Need Help? Just Ask

Resources

Accessibility Statement

Examples

Take Away

Thanks!

Contact