This document provides an introduction to web accessibility for agencies. It begins with defining accessibility and the types of impairments it addresses. It discusses the differences between usability and accessibility, and notes that accessibility focuses on making products extensible to a variety of devices. The document then covers the business case for accessibility, how to implement accessibility, and provides a checklist to determine if a project requires an accessible approach. It emphasizes that accessibility is best incorporated from the start of a project.
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Make Your Website Accessible for All Users
1. Usability ≠ Accessibility.
an intro to web accessibility for agencies.
April 30, 2016
Authored by Kate Horowitz
k8horowitz at gmail dot com
Public version 2
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
6. 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.
7. 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.
9. 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.
11. 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.
12. “Everyone operates under some kind
of duress that degrades their
performance.”
Source: A Web for Everyone ( 2013)
24. Some companies, especially financial
companies, are required by law to
comply with accessibility guidelines.
25. But there are strong business cases for
making your project accessible, even if
you’re not required to.
26. 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
27. 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
28. 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
29. 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
30. “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
31. So how do we turn this information into
practical, actionable tasks that result in an
accessible product?
39. What are you making? A website? A
content management system? An
application, such as a multi-player game?
Product:
40. 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
41. 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”
46. Let’s take a look at the 4 Principles that
WCAG Guidelines follow.
47. 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.
58. ”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:
59. “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
86. Identify business goals & target
users and recommend an accessible
strategy for them.
Determine which accessibility
conformance level, if any, you are
required to meet.
Design.
Development.Quality assurance. Content strategy.
Recommendation.Conformance audit.
87. Identify business goals & target
users and recommend an accessible
strategy for them.
Craft a solution that includes
accessible visual design and
interactions.
Determine which accessibility
conformance level, if any, you are
required to meet.
Development.Quality assurance. Content strategy.
Recommendation. Design.Conformance audit.
88. Identify business goals & target
users and recommend an accessible
strategy for them.
Craft a solution that includes
accessible visual design and
interactions.
Involve Content Strategy in all
aspects of copywriting, from
marketing to metadata, to ensure
accessibility requirements are met.
Determine which accessibility
conformance level, if any, you are
required to meet.
Development.Quality assurance.
Recommendation. Design.
Content strategy.
Conformance audit.
89. Identify business goals & target
users and recommend an accessible
strategy for them.
Craft a solution that includes
accessible visual design and
interactions.
Ensure that code is semantically
structured and includes accessibility
attributes.
Involve Content Strategy in all
aspects of copywriting, from
marketing to metadata, to ensure
accessibility requirements are met.
Determine which accessibility
conformance level, if any, you are
required to meet.
Quality assurance.
Recommendation. Design.
Development. Content strategy.
Conformance audit.
90. Recommendation. Design.
Development.
Test with assistive devices and
common accessibility software to
ensure a positive user experience.
Quality assurance. Content strategy.
Conformance audit.
Identify business goals & target
users and recommend an accessible
strategy for them.
Craft a solution that includes
accessible visual design and
interactions.
Ensure that code is semantically
structured and includes accessibility
attributes.
Involve Content Strategy in all
aspects of copywriting, from
marketing to metadata, to ensure
accessibility requirements are met.
Determine which accessibility
conformance level, if any, you are
required to meet.
91. The earlier we understand accessibility
requirements, the easier and cheaper
they are to implement.
92. When accessibility is incorporated from
the beginning of a project, it is often a
small percentage of the overall
project cost.
94. Use the following checklist at the
beginning of a project to see if you will
have accessibility requirements.
95. 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?
96. Does this sound like your
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?
97. Does this sound like your
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?
98. If you said “yes” to any of the checklist
items, there is a good chance that your
client requires an accessible product.
99. 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?
103. 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]
104. 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]
106. 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.
107. 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.
108. 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.
110. Assistive technology can be anything
from a braille display to reading glasses.
It’s just the extra things we use to get
stuff done.
111. Here are some examples of what it’s like
to rely on more advanced assistive
technology to access the internet.
112. 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.
113. Assistive tech demos:
• 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.
114. Assistive tech demos:
• 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.
115. Assistive tech demos:
• 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.
116. Assistive tech demos:
• 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.
118. 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.
119. Graphics credits:
Router icon by Ilsur Aptukov.
Old computer icon by Evgeny Kiverin.
Brain icon by jessie_vp.
Mobile device icon by Mourad Mokrane.
120. 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.
121. Graphics credits:
Design icon by Vijay Sekhar.
Quality assurance icon by useiconic.com.
Development icon by John Caserta.
Content strategy icon by hunotika.
Note that not all of these users consider themselves disabled.
-- Different countries have different definitions of disabled
-- Some people just deal with their impairments but don’t consider them to be debilitating
-- Some people don’t want to disclose their disability
Cognitive and motor disabilities can both be worse on some days and trivial on others
-- Includes temporary conditions, like recovering from an injury
-- Mental illness
-- Side effects of medication
-- Simply being tired
-- Being drunk or buzzed
Regarding cost and mobile usage as infrastructure impairments, see this recent Wall Street Journal article about Google’s decision to modify sites in certain regions to reduce page weight: http://www.wsj.com/articles/google-modifies-websites-to-hasten-service-1432835838?mod=rss_Technology
Other access factors not listed here are remote access (i.e. having to walk into town for internet access) and censorship.
If you are Ludwick, or know Ludwick, sorry for using your image of Google. Please let me know if this one is okay.
These infrastructure impairments don't have anything to do with disability, but they have the same negative impact on the user's ability to access and utilize the system. So if accessibility addresses disability, we should broaden our definition to say that “Disability” is the deficit between the user’s capabilities to interact with the system, and the system’s capability to interact with that user.
An accessible product addresses any disability that may affect the user's ability to access and utilize your system.
An accessible product addresses any disability that may affect the user's ability to access and utilize your system.
A responsive site only bridges the gap for Mobile users.
Accessibility has to be a broader approach.
We can reasonably assume that a visually impaired user has done what they can to overcome their impairment. They are probably using using a screen-reader, magnification software, or personalized operating system settings, such as text magnification keystrokes and heightened contrast. We can also reasonably assume that they are proficient with these tools. The system must meet them halfway, however, and be flexible enough to interact properly with those personalized settings and assistive devices. For example, If certain content is not going to work well for mobile-only users, the system should degrade gracefully and offer alternative ways of consuming that content. (i.e. Videos are too large to load? Make sure there's another way to consume that info that can be loaded more easily.)
A good accessible product doesn't have to look different from any other product, but it must be built for flexibility so that it can work on a wide range of output devices.
Note that his monitor is not even on, yet this man is still interacting with the computer. This user’s interface is completely devoid of imagery, but is still very much a user interface for him.
Many of you have seen Stephen Hawking give presentations, assisted by a really cool personalized computer rig he has on his chair. This is not “accessibility.” This is a highly usable solution built for a very small audience, often 1 person. Accessibility is built for use by all, where adaptive technology is built to address use cases of a very small subset of users.
Accessibility is device agnostic, where usability techniques are often very device-centric.
Ask your client to consult with their company’s legal team to find out if they are required to meet ADA guidelines. It is important to note that the ADA was written before the web and doesn’t prescribe specific web requirements, so compliance with ADA is highly subjective and requires judicious applications of common accessibility tactics.
t
If your site isn’t mobile optimized, you aren’t serving these users. And mobile-optimized doesn’t mean “it looks good on a comp of an iphone.” It means that it works on a mobile device, isn’t loaded down with unnecessary JavaScript and other resource-taxing code that makes it hard to actually load on a mobile device.
This is a huge number. Most of the people encompassed in this statistic probably don’t think of themselves as using “accessible” features. I’ve seen a lot of people refer to “customizing” a computer to meet their specific needs.
Lots of people have put a lot of time into distilling actionable, measurable, and testable guidelines to help you create an accessible product.
These guidelines come from one of two places: the W3C-WAI, ("Web Accessibility Initiative") which is an international organization, or government guidelines. The US government guidelines are usually referred to as Section 508, which you may have heard of. Let's ignore the government guidelines for now, as there is currently an international push for all governments to stop creating separate guidelines and simply adopt the ones created and maintained by the W3C-WAI anyway.
Authoring tool:
software and services that "authors" (web developers, designers, writers, etc.) use to produce web content (static web pages, dynamic web applications, etc.).
Authoring tool:
software and services that "authors" (web developers, designers, writers, etc.) use to produce web content (static web pages, dynamic web applications, etc.).
This is a Guideline from WCAG 2.0.
This is a Guideline from WCAG 2.0.
These are Success Criteria for this WCAG 2.0 Guideline.
These are Success Criteria for this WCAG 2.0 Guideline.
Conformance levels are highlighted. Note that these are specific to Success Criteria, not the Guideline.
* Double A (AA) conformance is generally recognized as adhering to ADA and section 508 requirements.
Currently, there are no legally enforced accessibility standards in the US. However, the Federal Government requires all of its sites to conform to its own Section 508 standards. This standard is also generally recognized as being met if a web site conforms to the WCAG 2.0 Double A (which is inclusive of Level A and Level AA criterions.)
* Double A (AA) conformance is generally recognized as adhering to ADA and section 508 requirements.
Currently, there are no legally enforced accessibility standards in the US. However, the Federal Government requires all of its sites to conform to its own Section 508 standards. This standard is also generally recognized as being met if a web site conforms to the WCAG 2.0 Double A (which is inclusive of Level A and Level AA criterions.)
Although your project may technically fulfill the acceptance criteria, this alone should not be used as a measure of product quality. For example, an image with alt text would fulfill WCAG 2.0 Guideline 1.1. However, if that alt text was simply the file name of the image, the user experience sucks. Let's take the example of a non-sighted user using a screen reader. Imagine having to sit there and listen to a screen reader read off "1246972559_n.jpg." Or even just "pie_chart.jpg." What's the gist of the pie chart? What is the actual data there? Ideally, the alt text evocatively describes the content of the image to provide the user with meaningful context. While each of these scenarios will technically pass the Guideline's Success Criteria, it's important that testers understand the spirit of the Guidelines to ensure quality.
It stigmatizes. It never provides equal access. If you haven’t internalized this already, I probably can’t convince you within the span of this presentation, but I’m just going to leave with this: whenever possible, we do not settle for accessible accommodation.
We should ensure that we’ve done our research here, and not just rely on information from the client. Lawyers are not know for the technical savvy and may not understand how to interpret guidelines for a digital project. And since we as Huge are often pioneers of the digital frontier, it’s possible for us to end up with a project that has no legal precedent, but could still be subject to the ADA’s broad guidelines.
Work with your teammates in the strategy department and the Business Analyst department to draft an accessible strategy recommendation, if the client does not already have a digital strategy in place.
Make sure to involve design early in the process. I thought I know a lot about this until I spoke with designer Casey Britt, who pointed out a large number of very not-obvious ways that accessibility requirements can affect the design process.
Remember! CMS labels are copy, too! Beware of projects that include migrating large amounts of content to a new platform. If their previous platform was not accessible, chances are, there’s an entirely new project scope required to update older, inaccessible content.
This is something Huge does well. Make sure to talk to your project’s SA about accessibility requirements. If Huge is not doing the development work, make sure to work closely with your BA to accurately capture and document accessible requirements.
Testing for accessibility about doubles the QA work required. The best way to streamline this process is to schedule your project so that your BA can work alongside QA early in the process to ensure that your acceptance criteria will actually validate against accessibility guidelines.