Understanding Web Accessibility

UNDERSTANDING WEB
ACCESSIBILITY

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

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

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)

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

 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

 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

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

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

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

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.

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.

Some people use mouse stick to
tap and navigate sites via
keyboard.
Think about the effort it takes to
navigate the website.
response time

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.
response time

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.
response time

Sip and puff device can interpret
users breath patterns to navigate
the web
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.

Eye tracking software follows the
movement of the eye and allows
the person to navigate websites.
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.

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

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

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

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

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

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

Do not rely on color to carry out
meaning

Do not use color to emphasize required
fields in forms

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

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

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)

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

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.

 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

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

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.

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

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

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

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

Understanding Web Accessibility

More Related Content

What's hot

Viewers also liked

Similar to Understanding Web Accessibility

Recently uploaded

Understanding Web Accessibility