Week 3 Lecture: Accessibility

1. Week 3
Accessibility Why it matters and where
to start

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

3. Ontario, Canada and beyond
AODA
The 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.

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

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

6. The principle of equal access for all
As Graphic Designers we
strive to make our work easy
to use and navigate by
everyone.

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

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

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

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

11. Video: Keeping Web
Accessibility In Mind
Watch the video >
Note: the video is from the
perspective of an American
postsecondary institution.

12. Think about your potential
customers using the
following devices…

13. Sip-and-puff system for navigationTrackballs (keyboard alternative)
Screen magnifier Screen reader

14. How can you ensure
everyone can access and
understand your work?

15. The POUR Principles
1. Perceivable
2. Operable
3. Understandable
4. Robust

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

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

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

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

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

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

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

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

24. Conclusions

25. Accessibility is no
longer an option.
It’s a necessity.
And, it’s the right thing to do.

26. As designers, see this as
an opportunity to
produce better work.

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

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

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