WEB SITE ACCESSIBILITY

Mike BarlowLead Application Architect - dbITpro

TCF Information Technology Professional Conference 2012

Why is Accessibility Important?• Up to 20% of people are affected by

some form of disability• A significant portion of people with

disabilities can benefit from web sites specifically designed to be more accessible 

• In the US alone, there are currently estimated 52 million who have cognitive, visual, hearing or physical disabilities which affect their ability to use computers and the Internet

What is Web Site Accessibility?• Making the web usable by everyone

whatever their ability or disability • A Web Site is accessible if it can be used

as effectively by people with disabilities as by those without

• A properly designed Web Site should be accessible to all no matter what their disability

What types of disability?

• Visual Impairments• Color Perceptions• Visual Acuteness

• Motor/Mobility Impairments• Inability to use the hands• Tremors• Muscle slowness

• Auditory Impairments• Deafness

What types of disability?

• Seizures• Photo epileptic seizures

• Cognitive Impairments• Developmental disabilities• Learning disabilities• Cognitive disabilities

So What?

• Web Accessibility and “So What”• What does it mean

Assistive Technology

• Different meanings in different aspects• Augmentative Communication• Hearing Aids• Wheel Chairs• Prosthetics

Assistive Technology

• Assistive Technology for access to information• Screen Readers• JAWS• Window Eyes• Voice Over• Braille Displays• Pointing Devices• Alternative Keyboards• Speech Recognition

Equal Access

Why is Accessibility Important?• Increasing accessibility will:• Increase sales• Increase audience reach• Improve search engine listings• Ensure your site complies with disability

discrimination law

Discrimination?• Employment discrimination, lack of

access to education materials, reading

• Paying higher prices (online stores)• Lack of access to social communities

– accessing twitter/facebook/IM to find out about updates and friends/family.

• Inability to access information on preparing for emergencies

Discrimination – So What?• Department of Transportation

Regulation Issued in 2008• Allowing that Airlines are NOT

required to provide Accessible Websites.

• HOWEVER…• If the Website is NOT Accessible they

MUST give you the price of the flight available on the Website at the time of the call.

• No Call Center Fee charged.

Discrimination – So What?• UUL Studies identified several

Airlines which would not comply with the regulation even when they were informed of the regulation!

• Would not provide the lower fee (it was 1/3 less)

• Would not waive the Call Center Fee

Discrimination – So What?• Similar studies were performed on

Employment Discrimination• Online Employment Applications• 32 Attempted Application

Submissions• 24 Submitted• 9 Without assistance by non disabled

users• ~ 28% Success Rate

Disability Discrimination Law?• Over the years many companies have

been litigated against and have had rulings made against them

• 2000 Applicability of the ADA to Private Internet Sites• http://commdocs.house.gov/committees/

judiciary/hju65010.000/hju65010_0f.htm

Disability Discrimination Law?• April 2010 Achieving ADA in the

Digital Age• http://judiciary.house.gov/hearings/printers/

111th/111-95_56070.PDF

• http://judiciary.house.gov/hearings/pdf/Richert100422.pdf

• 2004 Spitzer vs Ramada.com and Priceline.com

Disability Discrimination Law?• 2004 Gumson and Access Now vs.

Southwest Airlineshttp://caselaw.lp.findlaw.com/data2/circs/11th/0216163p.pdf

• 2008 National Federation of the Blind (NFB) vs Target http://webaim.org/blog/target-lawsuit-settled

Disability Discrimination Law?• Target developed their “Online Assistive Technology

Guidelines” and was certified by NFB as compliant with these guidelines

• Target paid NFB $90,000 for the certification and first year of monitoring and then $40,000 per year thereafter

• Target’s web developers received at least one day of accessibility training

• Target paid damages of $6,000,000 to the class action claimants

• Target paid $20,000 to the California Center for the Blind

Disability Discrimination Law?• More articles are available on the

“WebAIM – Web Accessibility in Mind” site

• http://www.webaim.org/articles/laws/usa/idea.php

What does it mean?

• Guidelines• Section 508 • of the Rehabilitation Act of 1973• http://www.section508.gov/

• Guidelines have not been updated since 1999

• Dec 2011 – Draft of new Standards• http://www.access-board.gov/sec508/

refresh/draft-rule.htm

What does it mean?

• Guidelines• Web Content Accessibility Guidelines• World Wide Web Consortium (aka W3C)• http://www.w3.org/• http://www.w3.org/WAI/

• Accessible Rich Internet Applications (WAI-ARIA)• http://www.w3.org/TR/wai-aria/

Section 508• Section 508 is a part of the

Rehabilitation Act of 1973 relating to accessibility standards applied to Electronic Information Technology (EIT) used by the Federal government

• Lists 16 separate items which must be met to be in compliance

• http://www.section508.gov/• http://www.webaim.org/standards/508/

checklist

508 Checklist (Cont.)

• Text equivalents for non-text elements• Equivalent alternatives for any

multimedia presentation• Don't rely only on color to indicate

differences• Must be usable without stylesheets• Client-side and server-side image

maps• Identify row and column headers for

data tables

508 Checklist (Cont.)

• Title frames to facilitate identification and navigation

• Avoid screen changes on pages between 2Hz and 55 Hz

• Use text only pages when necessary• Provide text notification when using

scripting languages• Provide a link to any

applet/plug-in/application required

508 Checklist (Cont.)

• Design forms which can be used by assistive technology

• Skip repetitive navigation links• Provide alternatives for timed

responses

508 Checklist (Script)

• Allow for keyboard only usage• Do not disrupt/disable accessibility

features• Clearly identify the current on screen

focus• Provide information about UI elements

to AT (Assistive Technology)

508 Checklist (Cont.)

• Consistency for use of images as controls

• Do not override user selected contrast and color selections

• Allow for non animated versions of animated objects

• No flashing/blinking text

Additional Standards

• W3C’s Web Accessibility Initiativehttp://www.w3.org/WAI/

• Web Content Accessibility Guidelineshttp://www.w3.org/WAI/intro/wcag

Web Content Accessibility

• Principles• Perceivable• Operable• Understandable• Robust

• Guidelines• Success Criteria• Sufficient and Advisory Techniques

Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

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

Technique – <img src=“Logo.gif” alt=“Corporate Logo” />

Operable

User interface components and navigation must be operable.

Guideline - Keyboard Accessible: Make all functionality available from a keyboard

Technique – <button accesskey=“s” tabindex=“3”>

<u>S</u>ave</button>

Understandable

Information and the operation of user interface must be understandable.

Guideline - Readable: Make text content readable and understandable.

Technique – <acronym title="North Atlantic Treaty Organization">NATO</acronym><abbr title="Cascading Style Sheets" >CSS</abbr>

Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Guideline - Compatible: Maximize compatibility with current and future user agents, including assistive technologies (Semantic Web Site)

Technique – <h1>My Page Heading</h1>

Real World Accessibility

• In the last 10 years, on average, 10%-20% of Federal Websites examined are in compliance with Section 508

• Universal Usability Laboratory – • Evaluated 100 Federal Homepages

Real World Accessibility

• Out of 100 Federal Homepages• Human Inspection• 96% Violated Section 508

• Automated Tools Inspection• 92% Violated Section 508

Real World Accessibility

• Of the 100 Federal web sites examined• 58% - Have an accessibility statement• 42% - Say they are “508 compliant”• 22% - Statement describing accessibility

features• 3% - Statement describing tools used to

test for accessibility• 2% - Describe process used to develop or

ensure accessibility compliance• 2% - Describe how often the site is checked

for compliance

Real World Accessibility

<ul><li>

<a href="#" >1</a><div style="display: none; ">

<h3>West Wing Week</h3><img src="/www_hero_fixed123.jpg“

alt="West Wing Week“title="West Wing Week">

</div></li>

Real World Accessibility

<ul><li>

<a href="#" title="West Wing Week">1</a><div style="display: none; ">

<h3>West Wing Week</h3><img src="/www_hero_fixed123.jpg“

alt="West Wing Week“title="West Wing Week">

</div></li>

Is My Site Accessible?

Validators• Web Accessibility Evaluation Tool• http://wave.webaim.org

• WAVE Toolbar for Firefox• http://wave.webaim.org/toolbar

• Web Developer Extension• http://chrispederick.com/work/web-develope

r

• Total Validator• http://www.totalvalidator.com/index.html

Is My Site Accessible?

• 508 Toolbar (for M.S. I-E)• http://www.rampweb.com/Accessibility_Re

sources/Section508/download.asp

Making a Web Site Accessible

• 508 Checklist• http://www.webaim.org/standards/508/checklist

• Best Practice Example Code• http://www.section508.gov/SSA_BestPractices/def

ault.htm

• Color Contrast Checker• http://www.webaim.org/resources/contrastchecke

r

• Navigation Skipper aid• http://www.webaim.org/techniques/skipna

v

Making a Web Site Accessible

• Web Accessibility Initiative• http://www.w3.org/WAI/

• WCAG20 Quickref• http://www.w3.org/WAI/WCAG20/quickref

• WCAG - Techniques• http://www.w3.org/TR/WCAG20-TECHS

• WCAG - Guidelines• http://www.w3.org/TR/WCAG20

Making a Web Site Accessible

• Building Web Sites Using Web Standards • http://msdn.microsoft.com/en-us/library/aa47904

3.aspx

• Accessibility Support in ASP.NET• http://msdn.microsoft.com/en-us/library/ms22800

4(VS.80).aspx

• Creating an Accessible Web App• http://msdn.microsoft.com/en-us/library/3has1x3

0(VS.80).aspx

Making a Web Site Accessible

• Check Accessibility of Web Pages(using Visual Web Developer)• http://msdn.microsoft.com/en-us/library/m

s247244(VS.80).aspx

• ASP.NET Controls and Accessibility • http://msdn.microsoft.com/en-us/libr

ary/ms227996(VS.80).aspx

Good Reading• Web Accessibility In Mind• http://www.webaim.org

• http://www.webaim.org/articles

• Accessibility Myths• http://htmlhelp.com/design/accessibility/

myths.html• http://www.techsoup.org/learningcenter/access/

archives/page9994.cfm• http://www.webcredible.co.uk/user-friendly-

resources/web-accessibility/myths.shtml• http://www.csszengarden.com/

Compliance Testing

• Just because a site passes accessibility checks does NOT mean the page is useable

• The only true test is the user test• Having an individual whose primary

vehicle for accessing the internet and websites with their screen reader is the best and most accurate test available

• Usability is the goal and usability by the user is the ultimate test

Accessibility is NOT Expensive• Hire a proper front end developer• Start from Scratch• Clean Compliant Code• Ease of Maintenance• Better for SEO• Avoid Legal Issues

Contact…

• My Web Site – • www.mwbarlow.com

• This presentation• www.mwbarlow.com/Lectures

• E-Mail – • barlowm@gmail.com

Questions?

http://www.youtube.com/watch?v=-IWBT4Tk3t0