This presentation will help you understand: - The legal requirements behind Web Accessibility - How do people with disabilities use the web and what assistive technologies they use - How good usability makes up for better accessibility and improves site’ SEO - Financial benefits of having an accessible website

1. UNDERSTANDING WEB
ACCESSIBILITY

2. This presentation will help you
understand:
 The legal requirements behind Web Accessibility
 How do people with disabilities use the web and what assistive
technologies they use
 How good usability makes up for better accessibility and improves
site’ SEO
 Financial benefits of having an accessible website

3. Benefits of an accessible website
 Expand potential market share (1.3 million Ontarians with disabilities
+ seniors and people with cognitive problems)
 Increases findability with search engine optimization (SEO)
 Focuses on better website usability
 Increases positive company image
 Eliminates potentially high legal expenses

4. Purpose and legislature
 The goal of web accessibility is
to provide a better access to
information for people with
disabilities.
 The government of Ontario has
embarked on the road to make
Ontario a fully accessible
province. The new regulations
are outlined in the
Accessibility for Ontarians With
Disabilities Act (AODA)

5. Web Accessibility guidelines
 The actual guidelines are outlined in the
Web Content Accessibility Guidelines 2.0 (WCAG 2.0)
 These are established by the
Accessibility Initiative of the World Wide Web Consortium (W3C)
 There are three levels of accessibility
Level A,
Level AA
Level AAA

6.  Government of Ontario and the Legislative Assembly
 January 1, 2012
New internet and intranet websites must conform with WCAG 2.0
Level AA other than Captions (Live), and Audio Descriptions (Pre-
recorded)
 January 1, 2016
All internet websites and web content must conform with WCAG 2.0
Level AA, other than Captions (Live), and Audio Descriptions (Pre-
recorded).
 January 1, 2020
All internet and intranet websites and web content must conform with
WCAG 2.0 Level AA
AODA - timelines to meet the
requirements

7.  Public sector organizations, businesses and non-profit
organizations (50+ staff)
 January 1, 2014
All new websites must conform with Web Content Accessibility
Guidelines, Level A
 January 1, 2021
All websites must conform with Web Content Accessibility Guidelines,
Level A A
other than Captions (Live)
and Audio Descriptions (Pre-recorded)
AODA - timelines to meet the
requirements

8. Who are the people with
disabilities?
Unless we understand how
people with disabilities navigate
websites and what assistive
technologies they use, we
cannot build accessible
websites.
There are four main groups of
disabilities:
visual
audio
motor
cognitive

9. Visually impaired use screen
magnifying software or screen
readers such as Jaws.
Screen readers read websites in a
linear order - from top to bottom, left
to right. Remember this when
building the information structure of
the website.
Blind, low vision, color-blind

10. Braille devices allow blind users
read websites.
Just like search engines, screen
readers and Braille devices can
only interpret written text.
Provide alt text for all non-text
elements. This is one of the main
accessibility requirements that will
also improve your site’s SEO.
Blind, low vision, color-blind

11. Deaf or hard-of-hearing
Users can read text but require
captions and transcript to
interpret audio and video
content.
Always provide transcription for
video and audio content.
Transcriptions add keyword-rich
content to your site which improves
your SEO.

12. Limited fine motor skills, slow
response time
Trackball mouse is used by
people with shaky hands or
arthritis.
These can be people with
disabilities but also many seniors.

13. Some people use mouse stick to
tap and navigate sites via
keyboard.
Think about the effort it takes to
navigate the website.
Limited fine motor skills, slow
response time

14. Head wand works in a similar
way and again, requires
enormous effort to tap through
the website.
Websites must be keyboard
accessible. Aim for a minimum
amount of clicks required to get to
information.
Limited fine motor skills, slow
response time

15. If a person can move only the
head he can tap on a switch
placed to the side of the head.
The switch connects to a software
that navigates the site.
Limited fine motor skills, slow
response time

16. Sip and puff device can interpret
users breath patterns to navigate
the web
Limited fine motor skills, slow
response time
Keep in mind that common tasks
take disabled users longer to
complete for. Make sure they are
able extend the time limit e.g. when
filling-out forms.

17. Eye tracking software follows the
movement of the eye and allows
the person to navigate websites.
Limited fine motor skills, slow
response time
In the past, people with disabilities
depended on others to read them a
paper of fill out an application.
Assistive technologies give them
great independence.

18. Learning disabilities, distractibility,
inability to remember or focus
 Good usability is paramount for
web accessibility
 People who have problems
using websites that are overly
complex or poorly organized
 Website must be logically
organized, easy to navigate,
written in simple language
 No objects flashing more than
3x per second as it can cause
epileptic seizures

19. The key web accessibility principles
Perceivable
Content is readable for assistive technologies
Graphics and images have alt text
Audio and video content is accompanied by transcript or captions
Operable
Website is keyboard accessible
It is easy to navigate
Users have enough time to read and use content
Does not cause seizures

20. Understandable
Structure is logical and follows linear order
Does not contain extraneous text
Robust
Website does not require specific technology and can be used by
assistive technologies
The key web accessibility principles

21. Perceivable
provide alt text for non-text elements
E.g. alt text for this image would
be:
“venus project by jacques
fresco”

22. When graphics contain useful
information have this info available in
text form
E.g. Use longdesc=http://www.website.com/graph_explanation
or describe the graphic as part of the content

23. Do not use alt text for decorative
images
E.g. This image has no meaning
so the alt text should be empty “
“ Our business promises the best
service you will find on the planet.
Our team is professionally trained to
offer excellent customer service
throughout the contract negotiation
process.
Customer satisfaction is our top
priority and is guaranteed, or your
money back.”

24. Do not rely on color to carry out
meaning

25. Do not use color to emphasize required
fields in forms

26. Accessible forms
 Screen readers read forms in linear order
 Form must be keyboard accessible
 Keep labels close to the fields
 Ask for minimum info – too much info means a lot of effort
 Help correct errors
 When offering options (radio buttons, checkboxes) keep them close
together

27. Use proper color contrast
Contrast ratio for normal-size text should be at least 4.5:1

28. Operable
 Website is keyboard accessible
 Users can increase font size and adjust color contrast
 Avoid splash pages and intro music
(interfere with screen readers)
 Content does not open in new window
(users can’t find way back)
 Content does not change without direct input
(avoid pop-up windows)

29. Understandable
 Website is logically organized
 Home page should confirm the company name and the purpose of
the website
 Website with extensive navigation allows for “skip to content”
 Menus have descriptive titles
 Internal pages have consistent layout

30. Website copy
 Main titles are in H1 heading, are
meaningful and contain keywords
 Subheadings are in H2 heading,
meaningful and contain keywords
 Content is further divided into blocks or
paragraphs constructed around a single
major idea
 Aim for 9th
grade reading skills
 Write clearly using short sentences
Using H1, H2, H3 …
headings helps on-site
SEO and allows users to
scan through the content
as screen readers can be
set to read headings only.
Simple language leads to
better usability and SEO.

31.  Avoid acronyms and abbreviations;
or explain them
 Avoid slang, industry jargon or
marketing fluff
 Use active voice, use positive terms
 Ensure that every word and
paragraph is necessary
 Give direct instructions
Simple writing helps people
with cognitive problems
better understand the
website. Clear language is
greatly appreciated by most
people.
Website copy

32. Notice the descriptive menu items, meaningful links and intro
paragraphs on this government website.

33. Links
 Avoid ‘click here’, ‘go’, ‘read more’ or
images as links as they do not make
sense out of context
 Create meaningful links within text
 Differentiate links
by color and underline
 Don’t place
more than 20 links on a page
 Use enough space between links
Users can have the screen
readers read only the links.
Therefore, links have to
make sense out of context.
Sufficient space, large font,
underlining make clicking on
the link easier.
Meaningful, keyword-rich
links also help your SEO.

34. Links

35. Let’s sum up the benefits of an
accessible website
 Expand potential market share. It is estimated that 20% of population
have some kind of disability. These are potential customers.
 Improve your positions in search results (SEO)
 Better website usability
 Positive company image
 Eliminate potentially high legal expenses
 And most importantly – it’s the right thing to do

36. Penalties for non-compliance with
AODA
Individuals or unincorporated organizations
Impact of
Contravention:
Major Moderate Minor
Major $2,000 $1,000 $500
Moderate $1,000 $500 $250
Minor $500 $250 $200
Corporations
Impact of
Contravention:
Major Moderate Minor
Major $15,000 $10,000 $5,000
Moderate $10,000 $5,000 $2,500
Minor $2,000 $1,000 $500

37. Tools and resources
 http://webaim.org/
 http://www.w3.org/WAI/
 http://wave.webaim.org/
 http://www.checkmycolours.com/
 http://juicystudio.com/services/luminositycontrastratio.php
#specify

38. Andrea Dubravsky
www.adwebcom.com
info@adwebcom.com
Phone: 289 428 1100