Mike barlow lead application architect db itpro
1 / 52

Web Site Accessibility - PowerPoint PPT Presentation

  • Uploaded on

Mike Barlow Lead Application Architect - db ITpro. Web Site Accessibility. TCF Information Technology Professional Conference 2012. Why is Accessibility Important?. Up to 20% of people are affected by some form of disability

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Web Site Accessibility' - zeal

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Mike barlow lead application architect db itpro

Mike Barlow

Lead Application Architect - dbITpro

Web Site Accessibility

TCF Information Technology Professional Conference 2012

Why is accessibility important
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
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
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 disability1
What types of disability?

  • Seizures

    • Photo epileptic seizures

  • Cognitive Impairments

    • Developmental disabilities

    • Learning disabilities

    • Cognitive disabilities

So what
So What?

  • Web Accessibility and “So What”

  • What does it mean

Assistive technology
Assistive Technology

  • Different meanings in different aspects

    • Augmentative Communication

    • Hearing Aids

    • Wheel Chairs

    • Prosthetics

Assistive technology1
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 important1
Why is Accessibility Important?

  • Increasing accessibility will:

    • Increase sales

    • Increase audience reach

    • Improve search engine listings

    • Ensure your site complies with disability discrimination law


  • 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
Discrimination – So What?

  • Department of Transportation Regulation Issued in 2008

  • Allowing that Airlines are NOT required to provide Accessible Websites.


  • 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 what1
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 what2
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
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 law1
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 law2
Disability Discrimination Law?

  • 2004 Gumson and Access Now vs. Southwest Airlines


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

Disability discrimination law3
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 law4
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
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 mean1
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

  • 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
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 cont1
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 cont2
508 Checklist (Cont.)

  • Design forms which can be used by assistive technology

  • Skip repetitive navigation links

  • Provide alternatives for timed responses

508 checklist script
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 cont3
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
Additional Standards

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

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

Web content accessibility
Web Content Accessibility

  • Principles

    • Perceivable

    • Operable

    • Understandable

    • Robust

  • Guidelines

  • Success Criteria

  • Sufficient and Advisory Techniques


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 –

<imgsrc=“Logo.gif” alt=“Corporate Logo” />


User interface components and navigation must be operable.

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

Technique –

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




Information and the operation of user interface must be understandable.

Guideline - Readable: Make text content readable and understandable.

Technique –


title="North Atlantic Treaty Organization">


<abbr title="Cascading Style Sheets" >CSS</abbr>


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
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 accessibility1
Real World Accessibility

  • Out of 100 Federal Homepages

  • Human Inspection

    • 96% Violated Section 508

  • Automated Tools Inspection

    • 92% Violated Section 508

Real world accessibility2
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 accessibility3
Real World Accessibility



<a href="#" >1</a>

<div style="display: none; ">

<h3>West Wing Week</h3>


alt="West Wing Week“

title="West Wing Week">



Real world accessibility4
Real World Accessibility



<a href="#" title="West Wing Week">1</a>

<div style="display: none; ">

<h3>West Wing Week</h3>


alt="West Wing Week“

title="West Wing Week">



Is my site accessible
Is My Site Accessible?


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

  • Total Validator

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

Is my site accessible1
Is My Site Accessible?

  • 508 Toolbar (for M.S. I-E)

    • http://www.rampweb.com/Accessibility_Resources/Section508/download.asp

Making a web site accessible
Making a Web Site Accessible

  • 508 Checklist

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

  • Best Practice Example Code

    • http://www.section508.gov/SSA_BestPractices/default.htm

  • Color Contrast Checker

    • http://www.webaim.org/resources/contrastchecker

  • Navigation Skipper aid

    • http://www.webaim.org/techniques/skipnav

Making a web site accessible1
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 accessible2
Making a Web Site Accessible

  • Building Web Sites Using Web Standards

    • http://msdn.microsoft.com/en-us/library/aa479043.aspx

  • Accessibility Support in ASP.NET

    • http://msdn.microsoft.com/en-us/library/ms228004(VS.80).aspx

  • Creating an Accessible Web App

    • http://msdn.microsoft.com/en-us/library/3has1x30(VS.80).aspx

Making a web site accessible3
Making a Web Site Accessible

  • Check Accessibility of Web Pages(using Visual Web Developer)

    • http://msdn.microsoft.com/en-us/library/ms247244(VS.80).aspx

  • ASP.NET Controls and Accessibility

    • http://msdn.microsoft.com/en-us/library/ms227996(VS.80).aspx

Good reading
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
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
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


  • My Web Site –

  • www.mwbarlow.com

  • This presentation

  • www.mwbarlow.com/Lectures

  • E-Mail –

  • [email protected]