the fundamentals ofaccessible web design

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)

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

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

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.

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

• •

• •

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.

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

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

• 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:

• 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

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

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

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

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.

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.

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.