The Web Content Accessibility Guidelines (WCAG) help developers, content writers, designers, and other web professionals create web experiences that everyone can use and enjoy. In this presentation, you'll get a basic understanding of what the WCAG technical standards are and why they're important.

1. the fundamentals of
accessible web design

2. What is web accessibility?
The Web Content Accessibility Guidelines (WCAG) are a
set of legal guidelines that cover many different disciplines,
including design, to help ensure that the web is usable and
accessible to everyone.
The WCAG have three levels of compliance:
01The Fundamentals of Accessible Web DesignBranding Brand
• A (lowest level of compliance)
• AA
• AAA (highest level of compliance)

3. Who benefits from web accessibility?
Everyone!
Most of all, it helps individuals with temporary or permanent
disabilities, including but not limited to:
• Blindness
• Low vision
• Deafness
• Hearing loss
• Cognitive limitations
• Limited movement
• Speech disabilities
• Photosensitivity
02The Fundamentals of Accessible Web DesignBranding Brand

4. Why web accessibility is important
It's part of the law and is enforced by the U.S. Department of
Justice (DOJ).
03The Fundamentals of Accessible Web DesignBranding Brand
State of web accessibility
in 2016:
State of web accessibility
in 2018:
State and local government
websites must adhere to
web accessibility guides.
All private websites must
adhere to Title III web
accessibility guides.
Resources: Americans with Disabilities Act (ADA) Title II Regulations
Americans with Disabilities Act (ADA) Title III Regulations
Section 508 of the Rehabilitation Act, §1194.22

5. Case study: Target
By not adhering to standards, disabled users are being
discriminated against, and legal action may be taken.
Resource: Cautionary Tale of Inaccessibility: Target
04The Fundamentals of Accessible Web DesignBranding Brand
NFB v. Target:
• National Federation of the Blind (NFB) notified Target its site
was not accessible to the blind and visually impaired.
• After no remedying action was taken after 7 months, NFB
brought a class-action lawsuit against Target.
• Target settled and paid damages of $6 million.

6. Designing for web accessibility
To meet the minimum WCAG compliance, designers should
focus on the following criteria:
05The Fundamentals of Accessible Web DesignBranding Brand
• Color
• Contrast
• Text
• User Location
• Focus states
• Labels & Fields
• Information Organization
• Playback
• Contingencies
Resource: Web Content Accessibility Guidelines Overview

7. •
•
•
•
Color
Do: Don't:
06The Fundamentals of Accessible Web DesignBranding Brand
Link or Link >
Name (required)
Link
*Name
Color should not be used as the only visual means of
conveying information, indicating an action, prompting a
response, or distinguishing a visual element.
There should be additional visual cues for any element
where you would only use color to indicate that it is
interactive.

8. Contrast
07The Fundamentals of Accessible Web DesignBranding Brand
The contrast ratio between text and a text’s background
should be at least 4.5:1. If your font is at least 24px or 19px
bold, the minimum drops to 3:1.
Resources: Color Safe
WebAIM

9. Text
08The Fundamentals of Accessible Web DesignBranding Brand
Images of text should not be used unless they are for pure
decoration and non-essential to the user.
Line spacing (i.e., leading) must be at least 1.5 within
paragraphs, and paragraph spacing is at least 1.5x larger
than the line spacing.
Text should not be all caps nor should it be justified (i.e.,
aligned to both right and left margins).

10. • Using breadcrumbs
• Providing a site map
• Indicating current location within navigation bars
User location
09The Fundamentals of Accessible Web DesignBranding Brand
Users need to understand where they are within a website
at all times. Acceptable ways of adhering to this guideline
include:

11. • Gives users navigating via keyboard feedback that an
element is selected
• Gives users visual feedback as to what element they are
currently manipulating
Focus
The Fundamentals of Accessible Web DesignBranding Brand
Elements, such as form fields, should have a focus state that:
10

12. Labels & fields
The Fundamentals of Accessible Web DesignBranding Brand
All fields should have a permanent label outside of the
input that does not disappear as well as clearly defined
boundaries.
Error states should be defined with a symbol and text
explaining what the error is. Suggestions for how to fix the
error should be given to the user in text form.
11

13. Information organization
The Fundamentals of Accessible Web DesignBranding Brand
Use headers to organize and group related information.
Reading order should match the visual order.
12

14. Playback
The Fundamentals of Accessible Web DesignBranding Brand
No elements should autoplay and those with playback
should have a mechanism to stop or pause. This applies to
video and audio content as well as image carousels.
Banner carousels should not automatically rotate. They
should instead utilize arrow controls.
13

15. Contingencies
14The Fundamentals of Accessible Web DesignBranding Brand
Prior to submitting a form, provide a review page where
users can review and edit any input they have provided.
Following a form submission, provide a confirmation page
and instructions on making any additional changes to the
information provided.

16. Next steps
15The Fundamentals of Accessible Web DesignBranding Brand
WCAG's recommendations help make the web more
perceivable, operable, understandable, and robust—or to put
it simply, accessible.
Contact us for assistance in making your digital experiences
more accessible.

17. About Branding Brand
16The Fundamentals of Accessible Web DesignBranding Brand
Branding Brand is the retail industry's largest mobile
commerce platform, powering shopping experiences for
over 200 enterprise brands.
In addition to being named a Gartner “Cool Vendor” of
apps, we were also named a 2016 Forrester Wave Leader
in “Mobile Commerce and Engagement Platforms.”
Visit us at blog.brandingbrand.com.