an accessible web - cdn.ymaws.com · 2018 spring conference nefma.org. 22. 4. design principles....

nefma.org2018 Spring Conference

An Accessible WebAccessibility & ADA Compliance

Jessica Holt-Carr Boston Interactive


Hello….

Jessica Holt-CarrUX DirectorBoston Interactive


Encompasses all aspects of the end-user's interaction with the company, its services, and its products.

USER EXPERIENCE


What do you think of when you hear

accessibility?


The degree to which a product, device, service, or environment is available to as many people as possible.

ACCESSIBILITY


A motor, visual, auditory, or cognitive condition that impairs, interferes with, or limits a person’s ability to engage in certain tasks or actions, daily activities, and interactions.

DISABILITY


AUDITORY Includes people with hearing loss, or who are completely deaf

360millionhave hearing loss


Is the term experts use to describe any kind of vision loss, weather it’s someone who cannot see at all or someone who has partial vision loss.

285 millionhave visual impairments worldwide

246 millionhave low vision

39 millionare blind

VISUAL


Is the partial or total loss of function of a body part, usually a limb or limbs, which affects the ability to use a mouse, and can result in a slow response time with limited fine motor control.

MOTOR


Includes autism, Down Syndrome, traumatic brain injury, and even dementia.

COGNITIVE

This impairment also includes less severe cognitive conditions including attention deficit disorder (ADD), dyslexia (reading disorder), dyscalculia (difficulty with math), and general learning disabilities.


15%Worldwide

19%In the US

How much of the population is affected?


(American’s with Disabilities Act) Introduced in 1990 which banned employment discrimination against those that are disabled and eliminated unnecessary physical barriers to commercial and government buildings.

ADA


Refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed, and edited, all users have equal access.

WEB ACCESSIBILITY


Time to Get in the Weeds


WHAT WE HEAR OUR CLIENTS SAY:

Is it ADA Compliant?

WHAT THAT REALLY MEANS

Do they follow the WCAG*? * Web Content Accessibility Guidelines


The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.

What’s WCAG?


Overview of Compliance Levels

AMinimum requirement

COLOR is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Asks audio and video caption

AAMINIMUM Contrast, AA rules + the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.

Indicates the highest level of accessibility the minimum requirement

AAA

ENHANCED Contrast with a contrast ratio of at least 7:1

nefma.org2018 Spring Conference22

4 Design Principles12 Guidelines to Keep in Mind

POUR


“Keep in mind that some users aren’t able to use a mouse.”


1.0 Perceivable


TEXT ALTERNATIVES:Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language

1.1Perceivable


TIME-BASED MEDIA:Provide alternatives for time-based media (i.e. videos)

Perceivable1.2


DISTINGUISHABLE:Make it easier for users to see and hear content including separating foreground and background

Perceivable1.3


ADAPTABLE:Create content that can be presented in different ways (for example simpler layout) without losing information or structure

Perceivable1.4


2.0 Operable

29


KEYBOARD ACCESSIBILE: Make all functionalities available from a keyboard

Operable2.1


ENOUGH TIME:Provide users enough time to read and use content

Operable2.2


SEIZURES:Do not design content in a way that is known to cause seizures

Operable2.3


NAVIGABLE:Provide ways to help users navigate, find content, and determine where they are

Operable2.4


3.0 Understandable

34


READABLE:Make text content readable and understandable

Understandable3.1


PREDICTABLE:Make web pages appear and operate in predictable ways

Understandable3.2


ABILITY TO GO BACK:Help users avoid and correct mistakes

Understandable3.3


4.0 Robust

38


MAXIMIZE COMPATABILITY:Ensure compatibility with new assistive technologies

Robust4.1


The Good, the Bad, & the Non-accessible

nefma.org2018 Spring ConferenceLOW-CONTRAST 1.74

nefma.org2018 Spring ConferenceLOW-CONTRAST 1.68


Why Should We Invest Our Time in Accessibility?


• World is becoming more connected

Everyone expects everything to be available

Internet is no longer a privilege its a necessity

Key Reasons


The Bottom Line

We’re helping our clients reach ~19% of potential users they weren’t reaching before.


Time to take things seriously


It’s Illegal

• Don’t get sued/get your website redesigned

• Target paid $6 million to settle a class-action suit brought on by the National Federation of the Blind and $4 million more to cover the plaintiffs’ attorney fees and other costs

• Since 2015, more than 240 businesses across the US have been sued in federal court over website inaccessibility


Key TakeawaysMake Accessibility a Habit


#1 Create text alternatives and captions for non-text media (videos and images)


#2 Allow users to traverse the page with only the keyboard


#3 Give users control over which features and content to load or change


#4 Design the page text with sufficient contrast


#5 Simplify your language to accommodate for cognitive issues


76

1st person to get their phone to say the words “Boston Interactive” using Voiceover out loud wins

CHALLENGE


Download our eBook: http://lp.bostoninteractive.com/accessibility-web-design

@JessHoltCarr

Email: [email protected]

an accessible web - cdn.ymaws.com · 2018 spring conference nefma.org. 22. 4. design principles....

Documents