Make Your Website Accessible for All Users

Usability ≠ Accessibility.
an intro to web accessibility for agencies.
April 30, 2016
Authored by Kate Horowitz
k8horowitz at gmail dot com
Public version 2

1.  What is accessibility?
2.  Accessibility vs. usability
3.  Business case
4.  Implementation
5.  Accessible project strategy
6.  Checklist
7.  Questions?
8.  Appendix
Agenda

Accessibility refers to the degree to
which a product, place, service, or
website can be accessed & utilized by
its users.
Accessibility:

In practice, accessibility is the web’s
response to users’ disabilities and
impairments.

There are 4 types of physical
impairments that affect online
access & behavior:
Visual Auditory Motor Cognitive
Difficulty reading small
fonts, distinguishing
similar colors, or inability
to see at all.
Inability to hear audio
of videos, or to
understand auditory
cues.
Difficulty using a mouse,
or tapping a finite area
on a touch screen.
Inability to understand.
Causes may be age
related, browsing in a
non-native language,
cognitive disabilities, or
just being distracted.

Kate is a Product Manager. She is in her
mid twenties and healthy, but she has very
bad vision that can sometimes affect her
work. Kate uses visual accessibility
features on her mac while at work.
•  Kate spends half to most of her day in
front of a computer screen.
•  Kate shops online about once a week.
•  Kate increases the font on every web
page she visits, and often has to find
an alternate website if the current
page’s text size cannot be increased.
•  Kate is a vision impaired user.
Kate.

But physical impairments aren’t the only
things excluding users.

Infrastructure impairments can
also affect online access &
behavior.
Connection Old equipment Mobile–only Cost
Low bandwidth means
difficultly downloading
media content.
Older browsers break
some code; old
monitors are harder to
read.
Mobile users experience
high latency, smaller
screen size, and slower
processors.
Some users turn off
resource-taxing web
features for lower
connection charges.

Mobile–only
It will soon be outdated to call
mobile-only access an infrastructure
impairment.

If you’re already following
mobile-ﬁrst principles, this may
already be untrue.

In fact, pre<y soon we might start
thinking of desktop-only users as
impaired, tethered to machines that
cannot make use of geo-loca>on
features, touch, or beacons.
Update:

Ludwick is an entrepreneur from Limpopo
who invented DryBath, a waterless
bathing product that provides a sanitation
option to those without fresh water.
DryBath also prevents diseases such as
Trachoma, which affects 350 million each
year.
•  Inventor of DryBath
•  Wrote a patent and a 40 page business
plan on his cell phone.
•  Only internet access was a Nokia 6234
cell phone connected to wireless at an
internet café.
•  See his TED talk here.
•  Ludwick is a mobile-only user.
Ludwick.

“Everyone operates under some kind
of duress that degrades their
performance.”
Source: A Web for Everyone ( 2013)

The deficit between user and system
capability.
Disability:

Is it the responsibility of the system, not
the user, to bridge that deficit.

Usability and accessibility often overlap,
but they are not the same thing.

Device-centric. Device agnostic.
Accessibility.Usability.

The focus on system extensibility
to a wide variety of devices is the
key difference between accessibility
and usability.

Some companies, especially financial
companies, are required by law to
comply with accessibility guidelines.

But there are strong business cases for
making your project accessible, even if
you’re not required to.

There are many direct
financial benefits:
•  Interoperable code for devices and new technology can reduce
tech maintenance costs
•  Broader user reach
•  Higher SEO *
•  Reduce support costs by providing more users with online info,
which is cheaper than call center or email support
•  Reduce legal risk and avoid costly legal fees down the road
* Source: Article by Liam McGee (August 6, 2009)
http://www.communis.co.uk/blog/2009-08-06-seo-and-accessibility-overlap

1 in 4U.S. adults aged 16 to 64 have
a dexterity (motor) difficulty or
impairment.
1 in 4U.S. adults aged 16 to 64
have a visual difficulty or
impairment
1 in 5U.S. adults aged 16 to 64
have a hearing difficulty or
impairment.
Key stats
Source: Study commissioned by Microsoft, conducted by Forrester Research, Inc., 2003

31%Of U.S. adults access the internet
primarily on a mobile device.
Key stats
Source: Study by Pew Research, 2012,
http://www.pewinternet.org/2012/06/26/cell-internet-use-2012

62%Of U.S. adults, aged 16 to 64, are
likely or very likely to benefit from
the use of accessible technology.
Key stats
Source: Study commissioned by Microsoft, conducted by Forrester Research, Inc., 2003

“The findings in this study show that the
majority of [U.S.] working-age adults
are likely to benefit from the use of
accessible technology.”
Source: Study commissioned by Microsoft,
conducted by Forrester Research, Inc., 2003

So how do we turn this information into
practical, actionable tasks that result in an
accessible product?

Guidelines define what needs to be
done to make the product as accessible
to as many users as possible.
Guideline:

Guidelines come from two places:
W3C-WAI (“Web Accessibility Initiative”)
and Governments.

This is what a guideline looks like.

Guidelines are organized in 2 key ways:

Accessibility guidelines are organized by:
1. Product.
2. Principle.

What are you making? A website? A
content management system? An
application, such as a multi-player game?
Product:

Type of product Which includes things like…
Website •  text, images, and sounds
•  code or markup that defines structure, presentation, etc.
Rich Internet Applications •  dynamic content
•  advanced user interface controls developed with Ajax, JavaScript, etc.
Authoring tool •  Content Management Systems (CMS)
•  WYSIWYG editors
•  sites that let users add content, such as blogs, wikis, and social
networking sites
User agent •  browsers
•  media players
•  assistive software
Something interactive with lots
of gestures
•  scrolling behaviors that could be performed with a scroll wheel or a
finger swipe

Type of product Should follow these guidelines…
Website WCAG
“Web Content Accessibility Guidelines”
Rich Internet Applications ARIA
“Accessible Rich Internet Applications Suite”
Authoring tool ATAG
“Authoring Tool Accessibility Guidelines”
User agent UUAG
“User Agent Accessibility Guidelines”
Something interactive with lots
of gestures
Indie UI
“Independent user interface”

It’s important to know that on it’s own,
WCAG ≠ Accessibility.

What is the end goal?
Principle:

Each Guideline document has a slightly
different set of principles.

Let’s take a look at the 4 Principles that
WCAG Guidelines follow.

Principle Which includes things like…
Perceivable •  Provide text alternatives for non-text content.
•  Provide captions and other alternatives for multimedia.
•  Create content that can be presented in different ways,
•  including by assistive technologies, without losing meaning.
•  Make it easier for users to see and hear content.
Operable •  Make all functionality available from a keyboard.
•  Give users enough time to read and use content.
•  Do not use content that causes seizures.
•  Help users navigate and find content.
Understandable •  Make text readable and understandable.
•  Make content appear and operate in predictable ways.
•  Help users avoid and correct mistakes.
Robust •  Maximize compatibility with current and future user tools.

These Principles provide context for the
end goal of each Guideline.

Anatomy of a
Guideline.
Implementation

Guidelines are merely goals.
Success Criteria are the instructions.

Actionable, measurable, testable.
Success Criteria:

Success criteria contain:
1. Conformance Level.
2. Sufficient Techniques.
3. Advisory Techniques.

”Double A”
More difficult to pull off,
but much more accessible.
Almost identical to Section
508, and other
government standards,
and is the most common
level to build for.
AA.
“Level A”
Basic, easy stuff you can
do to try to make your site
more easily accessible for
all users.
A.
“Triple A”
Is a royal pain in the ass
even more difficult to pull
off, but provides the most
accessible user experience
of all. Your “normal” users
might start to notice
accessible features, which
they probably didn’t notice
in levels A or AA.
AAA.
Conformance Levels:

“Double A”
“Audio description is
provided for all
prerecorded video content
in synchronized media.”
AA.
“Level A”
“Captions are provided for
all prerecorded audio
content in synchronized
media, except when the
media is a media
alternative for text and is
clearly labeled as such.”
A.
“Triple A”
“Sign language
interpretation is provided
for all prerecorded audio
content in synchronized
media.”
AAA.
Guideline 1.2: Time-based Media

Defines implementation tactics that will
meet this Success Criterion.
Sufficient technique:

Preferred tactics that meet and exceed
the Success Criterion, and deliver a
better user experience.
Advisory technique:

Lets look at the difference between
sufficient and advisory techniques, using
alt text as an example.

“Picture of a student.”
“A postgraduate engineering student
working in the new electron microscope
lab.”

Ideally, the alt text evocatively describes
the content of the image to provide the
user with meaningful context.

It’s vital that the team understands the
spirit of the Guidelines to ensure
quality.

Accessibility
Standards Document
Guideline
Success Criterion
(A)
Success Criterion
(AA)
Sufficient
Techniques
Advisory
Techniques
Sufficient
Techniques
Advisory
Techniques
Success Criterion
(AAA)
Sufficient
Techniques
Advisory
Techniques
Principle 1 Principle 2
Guideline
Success Criterion
(A)
Success Criterion
(AA)
Sufficient
Techniques
Advisory
Techniques
Sufficient
Techniques
Advisory
Techniques
Success Criterion
(AAA)
Sufficient
Techniques
Advisory
Techniques
Guideline
Success Criterion
(A)
Success Criterion
(AA)
Sufficient
Techniques
Advisory
Techniques
Sufficient
Techniques
Advisory
Techniques
Success Criterion
(AAA)
Sufficient
Techniques
Advisory
Techniques
Anatomy of an Accessibility Guidelines document.

Technical
approaches.
Implementation:

There are 3 common technical
approaches to meeting accessible
Success Criteria.

3 common approaches to Accessibility:
1. Accommodation.
2. Equivalent Use.
3. Universal Design.

Creating a separate, accessible version
of the site, similar to creating a mobile-
only site version.
Accommodation:

”Separate but equal“ is wrong.
Accommodation:

Same product, with alternative
presentations of the same information.
Equivalent use:

One site, same content, works for
everyone.
Universal design:

There are multiple approaches to
meeting Success Criteria; some provide
higher user value than others.

“You’ve convinced me. But how do I
make my project accessible?”

Recommendation.
Determine which accessibility
conformance level, if any, you are
required to meet.
Conformance audit. Design.
Development.Quality assurance. Content strategy.

Identify business goals & target
users and recommend an accessible
strategy for them.
required to meet.
Design.
Recommendation.Conformance audit.

strategy for them.
Craft a solution that includes
accessible visual design and
interactions.
required to meet.
Recommendation. Design.Conformance audit.

strategy for them.
interactions.
Involve Content Strategy in all
aspects of copywriting, from
marketing to metadata, to ensure
accessibility requirements are met.
required to meet.
Development.Quality assurance.
Recommendation. Design.
Content strategy.
Conformance audit.

strategy for them.
interactions.
Ensure that code is semantically
structured and includes accessibility
attributes.
required to meet.
Quality assurance.
Development. Content strategy.
Conformance audit.

Development.
Test with assistive devices and
common accessibility software to
ensure a positive user experience.
Quality assurance. Content strategy.
Conformance audit.
strategy for them.
interactions.
Ensure that code is semantically
structured and includes accessibility
attributes.
required to meet.

The earlier we understand accessibility
requirements, the easier and cheaper
they are to implement.

When accessibility is incorporated from
the beginning of a project, it is often a
small percentage of the overall
project cost.

Use the following checklist at the
beginning of a project to see if you will
have accessibility requirements.

Does this sound like your
client? 1/3
q Is the client a financial institution?
q Is the client currently mandated by law to meet an accessible
standard?
q Is this client subject to broader legislation about discrimination or
equal opportunity?
q Might this client be subject to legal or policy changes in the
future?
q Does this client have a corporate policy that includes
accessibility?

client? 2/3
q Is the client a government agency?
q Might they do business with a government via this site?
q Does the client receive government funding?
q Is the client an educational institution?
q Is the client a non-profit that might accept government funding
in the future?

client? 3/3
q Does good PR rely on inclusivity for this client?
q Does this client promise to provide equal opportunities?
q Will many of their users be positively affected by accessibility?
q Does this client plan on using this site for a long time? (greater
than 2 years) Often, coding for accessibility means your site can
more easily keep up with browser updates and newer technology.
q Does their content heavily rely on inaccessible formats (i.e. video)
to relay information?

If you said “yes” to any of the checklist
items, there is a good chance that your
client requires an accessible product.

If you didn’t say yes to any, can you
confidently say “yes” to this:
q  Does the client understand and accept the
risks of failing to provide an accessible website?

Resources:
• Web Accessibility Initiative Homepage.
• WCAG 2.0
• Understanding the Four Principles of Accessibility.
• Understanding Levels of Conformance.
• Essential Components of Web Accessibility.
• “A Web for Everyone: Designing Accessible User
Experiences.” [book]
• Accessibility Confluence Space. [internal wiki]
• “The user is drunk“ Hupspot.com review. [blog + video]

Referenced documents:
• “The Wide Range of Abilities and it’s Impact on Computer
Technology.” A Research Report Commissioned by Microsoft
Corporation and Conducted by Forrester Research, Inc. 2003.
[PDF]
• “SEO and Accessibility Overlap.” Article by Liam McGee. August
6, 2009. [Web article]
• “Cell Internet Use 2012.” Study by Pew Research. 2012. [PDF]
• “Accessible Information and Communication Technologies:
Benefits to Business and Society.” OneVoice for Accessible ICT.
2009-2010. [PDF]

Presentation definitions : (1/3)
•  Accessibility refers to the degree to which a software
product, place, service, or website can be accessed and utilized
by it’s users.
•  Disability: The deficit between user and system capability.
(proposed definition.)
•  Guidelines define what needs to be done to make the
product as accessible to as many users as possible.
•  Success Criteria are the instructions for fulfilling a Guideline,
and they are actionable, measurable, testable.

Definitions: continued 2/3.
•  Sufficient Techniques define implementation tactics that
will meet a Success Criterion.
•  Advisory Techniques are preferred tactics that meet and
exceed the Success Criterion, and deliver a better user
experience.
•  Accommodation: Creating a separate, accessible version of
the site, similar to creating a mobile-only site version. In this
author’s opinion, accommodation is bad because it creates
separate, and likely not equal, experiences.

Definitions: continued 3/3.
•  Equivalent use describes one product that has alternative
presentations of the same information.
•  Universal Design: One site, same content, works for
everyone.

Assistive technology can be anything
from a braille display to reading glasses.
It’s just the extra things we use to get
stuff done.

Here are some examples of what it’s like
to rely on more advanced assistive
technology to access the internet.

Assistive tech demos:
•  In this refreshable braille display demo, Bruce explains how he
shops on Amazon.com. Length is 6:42. Link opens YouTube.
•  Tommy the blind film critic demos
how blind people use an iPhone. Length is 3 minutes. Link
opens YouTube.
•  Joel is quadriplegic, and he demos how he uses a mouth stylus
to type (really fast!) in this video. Length is 3 minutes. Link
opens YouTube.

•  Michelle has limited use of her arms, so she uses a trackpad
with her nose to create professional design work.
Check out how she does it in this video or
read about it in this blog post. Video length is 1:30, might play
an ad first. First link opens YouTube.
•  Here is a great screen reader demo. Length 9:30. Link opens
YouTube.
•  Here’s a quick blog post about common barriers for deaf web
users, such as videos and audio alerts. No video at this link.

•  Here are some personas that illustrate some other common
user impairments, and how it affects their online behavior. Link
opens a website.
•  Check out this chrome extension that allows you to view
websites the way color blind users see. Allows you to toggle
between 9 different types of colorblindness. If you can’t see,
you can listen to what it’s like to be color blind in this video. Ad
may play before video. Length is under 3 minutes. Link opens
YouTube.

•  Here is a humorous promotional video about a Video Relay
Service that includes in-browser video conferencing to an
interpreter that can “speak” sign language. This is less
common now that video phones are mainstream, but still very
much in use by the deaf community. Video is 1 minute 35
seconds, and does not have audio. Link opens YouTube.
•  If you cannot see the video at the link above,
this Wikipedia article can tell you a little more about Video
Relay services.

•  This video shows how Johann uses screen magnification
software. Length is 9 minutes. Link open YouTube.
•  One assistive feature that most of us are familiar with is
closed captioning, but here is a link to the Wikipedia article if
you are not familiar. You can also check out
this TEDx talk about how the legal focus on quantity, and not
quality, of captioning means that captioning is failing to serve
the deaf community. Video is 10 minutes. Link opens YouTube.

Graphics credits:
Translation icon designed by Lek Potharam.
Definition icon designed by Arthur Shlain.
Vision icon designed by Christian Tabacco.
Audio mute icon by Vania Platonov.

Graphics credits:
Router icon by Ilsur Aptukov.
Old computer icon by Evgeny Kiverin.
Brain icon by jessie_vp.
Mobile device icon by Mourad Mokrane.

Graphics credits:
Dollar sign icon by Yarden Gilboa.
Wheelchair user icon by José Campos.
Audit icon by Miroslav Koša.
Recommendation icon by iconsmind.com.

Graphics credits:
Design icon by Vijay Sekhar.
Quality assurance icon by useiconic.com.
Development icon by John Caserta.
Content strategy icon by hunotika.

Graphics credits:
Braille icon by Iconathon.
iPhone icon by Ross Sokolovski.
Gear icon by Reed Enger.

Make Your Website Accessible for All Users

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to Make Your Website Accessible for All Users

Similar to Make Your Website Accessible for All Users (20)

Recently uploaded

Recently uploaded (20)

Make Your Website Accessible for All Users

Editor's Notes