Week 3

Accessibility Why it matters and where to start

What we’ll cover today

Pre-reading for today introduced you to the topic of Online Accessibility and the POUR Principles.

Today we’ll talk about:• AODA & the law

• Disabilities to consider

• POUR

• WCAG 2.0

• Conclusions

Ontario, Canada and beyond

AODAThe Accessibility for Ontarians with Disabilities Act (AODA) aims to make Ontario accessible to people with disabilities in key areas of daily living by 2025.

This Act has legal implications and requires legal compliance now and in the future. It can be enforced through Human Rights complaints.

Similar guidelines existing at a Federal level within Canada, the US and many other countries.

Consider the numbers…

More than 1.85 million people in Ontario (4.4 million people in Canada) have a disability - that’s 15%! This number is on the rise as our population ages.

In the US among working age adults:

• 25% of computer users had visual difficulty or impairment

• 24% of computer users have a dexterity difficulty or impairment

• 20% of computer users have a hearing difficulty or impairment

http://switchedonmedia.com.au/blog/screen-readers-and-assistive-technology-5-ways-to-improve-web-accessibility/

The principle of equal access for all

“Accessibility is about much more than ramps and automatic doors.

How we receive and process the information around us determines, in large part, the extent to which we are able to participate in the world in which we live.“Madeleine Meilleur, Minister of Community and Social Services and Minister Responsible for Accessibility

The principle of equal access for all

As Graphic Designers we strive to make our work easy to use and navigate by everyone.

The principle of equal access for all

…but who is everyone?

How do we ensure people can consume, interact with and enjoy the items we design and produce?

The principle of equal access for all

You may have heard the increasingly popular idea of “mobile first,” meaning to design for mobile screens then adapt for larger screen size.

The principle of equal access for all

Now, consider the idea of “accessible first” as a way to go further:

Simple and flexible design that focuses on key tasks.

…then code to standards to allow that to happen on any screen and device.

Disabilities to consider

1. Visual: Blindness, low vision, color-blindness

2. Hearing: Deafness and hard-of-hearing

3. Motor: Inability to use a mouse, slow response time, limited fine motor control

4. Cognitive: Learning disabilities, distractibility, inability to remember or focus on large amounts of information

Video: Keeping Web Accessibility In Mind

Watch the video >

Note: the video is from the perspective of an American postsecondary institution.

Think about your potential customers using the following

devices…

Sip-and-puff system for navigationTrackballs (keyboard alternative)

Screen magnifier Screen reader

How can you ensure everyone can access

and understand your work?

The POUR Principles

1. Perceivable

2. Operable

3. Understandable

4. Robust

Perceivable

People need to be able to input the information into their brain so that they can process it. If the information cannot get into the brain, it is inaccessible.

• Sight

• range of vision: low vision to fully blind

• colour blind users

• Hearing

• range of hearing ability: hearing impaired to deaf

• Touch

• consider a blind-deaf user (braille)

Bottom line: Content (text, video, graphics) must be transformable.

How can designers make a site more perceivable?

Example:CNIB

Built in high contract view

Operable

Not everyone uses a standard keyboard and mouse to access the web. Some people simply prefer to use the alternative technologies.

• Content that is accessible to the keyboard is operable by any other assistive device

• Video play, animations must be controllable

• What happens when someone makes a mistake? How to they get back on track?

How can designers make a site more operable?

Example:CNIB

Keyboard navigable

Understandable

Understandability can be just as big a barrier to accessibility as any of the more technical issues.

• Is the content easy to read and understand? (headings, jargon…)

• Follow usability principles:

• “Can most people figure it out and accomplish a goal, without it being more trouble then it’s worth?”

• Allow for multiple ways to consume information (text, video, images…)

How can designers make a site more understandable?

Example:Apple Watch

Multiple ways to consume information

Robust

People can be using different browsers, devices, operating systems, settings, add-ons… but all expect the web to work. Allow for choice.

• Users should be allowed to choose their own technologies to access web content.

• However, this does not mean you need to support Netscape 1.0…

• Current model is to design for a spec or standard instead of a certain browser - eg. design to HTML5 and CSS3, then decide what features you want to support on older browsers

How can designers make a site more robust?

Example:Government of Canada

Responsive, flexible, works on all devices

POUR and WCAG 2.0

POUR forms the backbone of WCAG 2.0, an internationally accepted standard for web accessibility.

What is WCAG 2.0?

• Purpose: make life easier for people with disabilities

• Goal: make the web a solution not a barrier

• Guidelines: the 4 POUR principles

• Method: provides techniques to aid designers and developers meet the guidelines

A, AA and AAA

Government of Ontario Public sector organizations, businesses and non-profit organizations (50+ staff)

Level A

2014: New public websites and web content must conform with WCAG 2.0 Level A

Level AA

2016: All public websites and web content must conform with WCAG 2.0 Level AA

2020: All public and internal websites and web content must conform with WCAG 2.0 Level AA

2020: All public websites and web content posted after 2012, must conform with WCAG 2.0 Level AA

Fringe benefits…

Usability:

• speeds up load times and site performance

• improves the mobile experience

• makes content clearer and easier to digest

Profit:

• wider audience or consumer base

• aging population - a huge future market!

• makes pages more “searchable”

Avoid legal issues:

• avoids lawsuits and/or bad press

Conclusions

Accessibility is no longer an option. It’s a necessity.

And, it’s the right thing to do.

As designers, see this as

an opportunity to produce better work.

Conclusions

• Bottom line: Accessibility first. Making information and ideas available to everyone is the defining goal of graphic design – and has been from the beginning.

• Run a tests on a page or site. Load the Wave tool bar on Chrome or Firefox.

• Start with the simple fixes. When adapting existing content some accessibility barriers will be simple to fix, while others will be more complex.

• Opportunities: Understanding accessibility can open employment doors! Consider the implications of the 2021 deadline for Ontario.

Further reading…

• I’ve only touched on the basics

• For further reading about the overall concept, I recommend “A Web for Everyone”

• I have a digital copy if anyone would like to have a look, or check out the book's site

• To learn the technical aspects, start with webaim.org

References

• http://webaim.org/articles/pour

• http://www.mcss.gov.on.ca/en/mcss/publications/accessON/accessible_websites/toc.aspx

• http://www.mcss.gov.on.ca/en/mcss/publications/accessON/accessible_websites/make.aspx

• http://rgd-accessibledesign.com/wp-content/uploads/2014/07/RGD_AccessAbility_Handbook.pdf

• http://wave.webaim.org/

• http://rosenfeldmedia.com/books/a-web-for-everyone

• http://rosenfeldmedia.com/app/uploads/2014/11/AccessibleUX-Personas-Overview1.pdf?3e1f2f

• http://webaim.org/resources/designers/

• http://powazek.com/posts/2583