Website Accessibility Its not just a good idea, its the law

Website Accessibility Its not just a good idea,

its the law

Thursday, May 14th

David Minton @DH_DavidStephen Pashby @DH_Stephen

@DesignHammer

1

Overview

• Introduction

• What is accessibility

• Federal regulations

• Disabilities

• Automates accessibility testing

• Court cases

2

Introduction

3

DisclaimerLet’s get this out of the way first!

4

Disclaimer

We are not lawyers

• Don’t take any of this as legal advice

We won’t tell you how to fix your website

• But we will point you in the right direction

5

ScopeWhat we’ll cover and what we won’t.

6

What we will cover

• What is accessibility?

• Why should I bother?

• How can I test my site?

• How do I keep my site accessible?

7

What we won’t cover

• Legal responsibilities regarding accessibility

• How to make a website accessible

8

The what, where, and when: web accessibility

9

What is accessibility?It’s more than just screen readers.

10

What is accessibility?

“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.”

Web Accessibility Initiative (WAI)World Wide Web Consortium (W3C)

11

Why accessibility?Would you, could you, should you?

12

Why accessibility?“The web is not a barrier to people with disabilities, it is the solution. The web has the potential to revolutionize the day-to-day lives of millions of people with disabilities by increasing their ability to independently access information…and other aspects of life that most people take for granted.”

Center for Persons with Disabilities

13

Why accessibility?

• It is the right thing to do

• Attracts new/retains existing customers

• Generally leads to improved usability for all

• It’s the law (does it apply to you?)

14

Accessibility Principles (POUR)

Accessibility is more than checking off boxes.

15

Accessibility Principles

• Perceivable

• Operable

• Understandable

• Robust

16

Perceivable

• Users need to be aware of web content

17

Operable

• Users need to be able to navigate, find, and interact with web content

18

Understandable

• Users need to be able to comprehend all navigation, interaction, and content

19

Robust

• Enable users to choose technologies to meet their accessibility needs

20

Types of disabilitiesWe’re not all created equal.

21

Types of disabilities

• Visual

• Auditory

• Motor

• Cognitive

• Seizure

22

Visual disabilities

• Blindness

• Low vision

• Color-blindness

23

Auditory disabilities

• Deafness

• Hard of hearing

24

Motor impairments

• Inability to use a mouse

• Poor fine motor control

• Slow reaction time

25

Cognitive disabilities

• Learning disability

• ADD

26

Seizure Disorders

• Photoepileptic seizures

27

Significant federal regulations:

Section 508 & Title III

28

What is Section 508?

• Amendment to Rehabilitation Act of 1973

• Approved 1998

• Compliance by 2001

• Notice of proposed rule-making announced February 2015

29

http://en.wikipedia.org/wiki/1973_Rehabilitation_Act

http://en.wikipedia.org/wiki/1973_Rehabilitation_Act

Current status of 508

• Proposed Information and Communication Technology (ICT) Standards and Guidelines

• Would incorporate Web Content Accessibility Guidelines (WCAG) 2.0

• Currently under review

• When and how will it be authorized ???

30

Section 508 Resources

• Section 508 Standards Guide(http://www.section508.gov/section-508-standards-guide)

• About the ICT Refresh(http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh)

• Web Content Accessibility Guidelines (WCAG) 2.0(http://www.w3.org/TR/WCAG20/)

31

http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh




http://www.w3.org/TR/WCAG20/

http://www.w3.org/TR/WCAG20/

Section 508Standards Guide

What exactly do I need to do?

32

Section 508 Standards

• Only 16 paragraphs specific to websites

• Has not been updated in years

• Some refer to obsolete techniques

• Some very specific, some vague

• Many open to interpretation

33

Section 508 § 1194.22 (a)

“A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).”

Web-based intranet & internet information & applications.Section 508 Standards Guide

34

Section 508 § 1194.22 (a)

• Pass: All images have a relevant and helpful text alternative for users who can’t see them.

• Fail: Images either don’t have alternative text, or the text is not a useful alternative for users who can’t see them.

35

Section 508 § 1194.22 (a)

36

alt="group of people working at conference table"

Section 508 § 1194.22 (b)

“Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.”


37

Section 508 § 1194.22 (b)

• Pass: Video has synchronized captions, audio has written transcripts.

• Fail: Video lack synchronized (or any) captions, audio lacks written transcripts.

38

Section 508 § 1194.22 (b)

• SEO Tip: Transcripts provide additional content for search engines to index.

• Usability Tip: Transcripts allow able users to find audio and video content by site search, and relevant sections by on page search.

39

Section 508 § 1194.22 (c)

“Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.”


40

Section 508 § 1194.22 (c)

• Pass: Any meaning conveyed through color can also be understood through alternate methods.

• Fail: User must rely on color to determine meaning.

41

Section 508 § 1194.22 (c)

• SEO Tip: Search engines can’t infer meaning by color either.

42

Section 508 § 1194.22 (d)

“Documents shall be organized so they are readable without requiring an associated style sheet.”


43

Section 508 § 1194.22 (d)

• Pass: All content must be available and understandable, even if less attractive.

• Fail: Content is missing, or reordered to the point that it loses meaning.

44

Section 508 § 1194.22 (e)

“Redundant text links shall be provided for each active region of a server-side image map.”


45

Section 508 § 1194.22 (f)

“Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.”


46

Section 508 § 1194.22 (e+f)

• Pass: Uses client side image maps with redundant text links.

• Fail: Doesn’t use client side image maps with redundant text links.

47

Section 508 § 1194.22 (g)

“Row and column headers shall be identified for data tables.”


48

Section 508 § 1194.22 (g)

• Pass: Data tables use appropriate <th> elements, layout tables do not.

• Fail: Data tables do not use appropriate <th> elements, and/or layout tables use inappropriate <th> elements.

49

Section 508 § 1194.22 (h)

“Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.”


50

Section 508 § 1194.22 (h)

• Pass: Data table cells are associated with the appropriate header.

• Fail: Data table cells are not associated with the appropriate header.

51

Section 508 § 1194.22 (i)

“Frames shall be titled with text that facilitates frame identification and navigation.”


52

Section 508 § 1194.22 (i)

• Pass: All frames have meaningful titles.

• Fail: Frames are either missing titles, or titles are inadequate.

53

Section 508 § 1194.22 (j)

“Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.”


54

Section 508 § 1194.22 (j)

• Pass: No element flickers with a frequency between 2 Hz and 55 Hz.

• Fail: Elements flickers with a frequency between 2 Hz and 55 Hz.

55

Section 508 § 1194.22 (k)

“A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.”


56

Section 508 § 1194.22 (k)

• Pass: Text only content is equivalent and provides advantage over primary version.

• Fail: Text only content is not equivalent, or up-to-date.

57

Section 508 § 1194.22 (l)

“When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.”


58

Section 508 § 1194.22 (l)

• Pass: All content and suitable functionality of script available to users of assistive technology, and keyboard only users.

• Fail: Content and functionality not available to users of assistive technology, or requires mouse input.

59

Section 508 § 1194.22 (m)

“When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).”


60

Section 508 § 1194.22 (m)

• Pass: Link to download app or plug-in; which when installed passes all previous requirements.

• Fail: Download link missing, or if installed does not allow for accessible content.

61

Section 508 § 1194.22 (n)

“When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.”


62

Section 508 § 1194.22 (n)

• Pass: Form fields have label attributes; form does not interfere with assistive technology or require mouse input.

• Fail: Form fields not labeled; form can’t be navigated with keyboard or assistive technology such as screen reader.

63

Section 508 § 1194.22 (o)

“A method shall be provided that permits users to skip repetitive navigation links.”


64

Section 508 § 1194.22 (o)

• Pass: User is able to skip repetitive lists of links, such as navigation.

• Fail: User can’t skip repetitive lists of links, such as navigation.

65

Section 508 § 1194.22 (p)

“When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.”


66

Section 508 § 1194.22 (p)

• Pass: User can control how much time they need to complete a task.

• Fail: User must complete a task within a set time limit.

67

What is Title III?

• Americans with Disabilities Act of 1990

• “No individual shall be discriminated against on the basis of disability in the full and equal enjoyment of the goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation by any person who owns, leases (or leases to), or operates a place of public accommodation.”

68

Automated accessibility compliance testing

69

Automated testing

“Accessibility testers are like spelling and grammar checkers, for your website. If you are a competent writer they can help you find errors and make improvements. If you run one on foreign language text, you’ll clear all of the errors, but will likely wind up with gibberish.”

David MintonDesignHammer

70

Testing expectations

• Pass

• Conditional Pass (manual check)

• Fail

• False positives and negatives

71

Adequate image alt text?

• No images: Pass

• Alt text: Conditional Pass (manual check)

• Image without alt test: Fail

• Decorative image without alt text: False Fail

• Decorative image with unnecessary alt text: False Pass

72

Types of software

• SaaS hosted

• Browser plug-in

• Desktop application

73

Samples

• SaaS hosted: Cynthia Sayshttp://www.cynthiasays.com

• Browser plug-in: WAVE for Firefox/Chrome(http://wave.webaim.org)

• Desktop application: TotalValidator(https://www.totalvalidator.com)

74

http://www.cynthiasays.com/

http://www.cynthiasays.com/

https://addons.mozilla.org/en-US/firefox/addon/wave-toolbar/

https://addons.mozilla.org/en-US/firefox/addon/wave-toolbar/

https://www.totalvalidator.com/index.html

https://www.totalvalidator.com/index.html

Cynthia Says

75

Cynthia Says

Pros

• Provides feedback by requirement (e.g. Section 508 statute)

• Can test Section 508, WACG 2.0 A, WACG 2.0 AA, and WACG 2.0 AAA compliance

76

Cynthia Says

Cons

• Tests one page a time

• Cannot test password protected environments

77

WAVE plugin

78

WAVE plugin

Pros

• Free

• Displays webpage with embedded icons

• Can test password protected websites

79

WAVE plugin

Cons

• Tests one page a time

• Tests based on both Section 508 and WACG, can’t test 508 or WACG

80

TotalValidator

81

TotalValidatorPros

• Free basic version

• Provides line-by-line analysis of code

• Can test Section 508, WACG 2.0 A, WACG 2.0 AA, and WACG 2.0 AAA compliance

• Can crawl multiple pages on a site

82

TotalValidator

Cons

• Basic only tests one page a time

• Assumes user understands code

83

Which one for me?

• Do I need to test password protected site?

• Do I need to test more than one page?

• Do I need to test code, or only content?

• Do I need to maintain compliance or build a new site/fix an existing site?

84

Legislation,legal settlements,

and court decisions

85

Enforcement options

• Legislative action

• Justice Department settlement agreements

• Court cases

86

Federal legislation

• Federal agency websites covered by amendment to Rehabilitation Act 1973

• Most airline websites covered byamendment to Air Carrier Access Act 1986

87

Federal Agencies

• U. S. General Services Administration

• Rehabilitation Act of 1973

• Approved 1998

• Compliance by 2001

• Section 508 § 1194

88

Airline Industry

• Department of Transportation

• Amendment to Air Carrier Access Act 1986

• Approved November 2013

• Compliance by December 2015

• WCAG 2.0 Levels A and AA

89

DOJ agreements

• Ahold USA Inc and Peapod LLC

• National Museum of Crime & Punishment

90

http://www.crimemuseum.org/


Ahold USA, Inc.

• website: http://www.peapod.com

• Online grocery services

• For-profit, online only

• November 2014

• WCAG version 2.0 Level AA

• Penalties: $0

91

http://www.peapod.com


National Museum of Crime and Punishment

• website: http://www.crimemuseum.org

• For-profit museum, physical place

• January 2015

• WCAG version 2.0 Level AA

• Penalties: $0

92







Court cases

• National Federation of the Blind and Heidi Veins v. Scribd

• Melissa J Earll v. eBay

• Donald Cullen v. Netflix

• National Association of the Deaf v. Netflix

93

http://the-digital-reader.com/wp-content/uploads/2015/03/30-Opinion-denying-Motion-to-Dismiss.pdf






National Fed. of the Blind v. Scribd


• March 2015: US District Court for the District of Vermont denies motion to dismiss

• Title III of Americans with Disabilities Act

• Penalties: In progress

94





Earll v. eBay


• April 2015: US Ninth Circuit “Because eBay’s services are not connected to any ‘actual, physical place,’ eBay is not subject to the ADA.”


• Penalties: $0 (dismissal upheld)

95



Cullen v. Netflix


• April 2015: US Ninth Circuit “Because Netflix’s services are not connected to any ‘actual, physical place,’ Netflix is not subject to the ADA.”


• Penalties: $0 (dismissal upheld)

96



National Assoc. of the Deaf v. Netflix


• Oct. 2012: US District Court for Massachusetts rules that the ADA applies to web-only businesses


• Penalties: ~$800,000

97





Courts split on rulings

• Are web-only businesses places of “public accommodation” under Title III of Americans with Disabilities Act?

• Is the website a “public accommodation” only as an extension of businesses with actual, physical places?

• Does Title III even apply to websites at all?

98



Conclusion and resources

99

Conclusion

• No silver bullet to make sites accessible

• Accessibility is a never-ending process

• The legal landscape is in flux; look for new rulings and regulations in 2015!

100

Resources

• https://designhammer.com/blog/website-accessibility-its-not-just-good-idea-its-law

or

• http://bit.ly/dhaccess

101

https://designhammer.com/blog/website-accessibility-its-not-just-good-idea-its-law




http://bit.ly/dhaccess

http://bit.ly/dhaccess

Special thanks

102

David MintonStephen Pashby

Follow us!@DesignHammer

facebook.com/DesignHammerwww.designhammer.com

103

http://www.facebook.com/DesignHammer

http://www.facebook.com/DesignHammer

http://www.designhammer.com

http://www.designhammer.com

Website Accessibility Its not just a good idea, its the law

Internet

Transcript of Website Accessibility Its not just a good idea, its the law