New Accessibility Models: the Web Site of a Research Institute
Web Site Accessibility
description
Transcript of Web Site Accessibility
![Page 1: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/1.jpg)
WEB SITE ACCESSIBILITY
Mike BarlowLead Application Architect - dbITpro
TCF Information Technology Professional Conference 2012
![Page 2: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/2.jpg)
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
![Page 3: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/3.jpg)
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
![Page 4: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/4.jpg)
What types of disability?
• Visual Impairments• Color Perceptions• Visual Acuteness
• Motor/Mobility Impairments• Inability to use the hands• Tremors• Muscle slowness
• Auditory Impairments• Deafness
![Page 5: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/5.jpg)
What types of disability?
• Seizures• Photo epileptic seizures
• Cognitive Impairments• Developmental disabilities• Learning disabilities• Cognitive disabilities
![Page 6: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/6.jpg)
So What?
• Web Accessibility and “So What”• What does it mean
![Page 7: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/7.jpg)
Assistive Technology
• Different meanings in different aspects• Augmentative Communication• Hearing Aids• Wheel Chairs• Prosthetics
![Page 8: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/8.jpg)
Assistive Technology• Assistive Technology for access to
information• Screen Readers• JAWS• Window Eyes• Voice Over• Braille Displays• Pointing Devices• Alternative Keyboards• Speech Recognition
![Page 9: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/9.jpg)
Equal Access
![Page 10: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/10.jpg)
Why is Accessibility Important?• Increasing accessibility will:• Increase sales• Increase audience reach• Improve search engine listings• Ensure your site complies with disability
discrimination law
![Page 11: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/11.jpg)
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
![Page 12: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/12.jpg)
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.
![Page 13: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/13.jpg)
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
![Page 14: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/14.jpg)
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
![Page 15: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/15.jpg)
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
![Page 16: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/16.jpg)
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
![Page 17: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/17.jpg)
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
![Page 18: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/18.jpg)
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
![Page 19: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/19.jpg)
Disability Discrimination Law?• More articles are available on the
“WebAIM – Web Accessibility in Mind” site
• http://www.webaim.org/articles/laws/usa/idea.php
![Page 20: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/20.jpg)
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
![Page 21: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/21.jpg)
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/
![Page 22: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/22.jpg)
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
![Page 23: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/23.jpg)
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
![Page 24: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/24.jpg)
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
![Page 25: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/25.jpg)
508 Checklist (Cont.)
• Design forms which can be used by assistive technology
• Skip repetitive navigation links• Provide alternatives for timed
responses
![Page 26: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/26.jpg)
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)
![Page 27: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/27.jpg)
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
![Page 28: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/28.jpg)
Additional Standards
• W3C’s Web Accessibility Initiativehttp://www.w3.org/WAI/
• Web Content Accessibility Guidelineshttp://www.w3.org/WAI/intro/wcag
![Page 29: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/29.jpg)
Web Content Accessibility
• Principles• Perceivable• Operable• Understandable• Robust
• Guidelines• Success Criteria• Sufficient and Advisory Techniques
![Page 30: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/30.jpg)
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” />
![Page 31: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/31.jpg)
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>
![Page 32: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/32.jpg)
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>
![Page 33: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/33.jpg)
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>
![Page 34: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/34.jpg)
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
![Page 35: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/35.jpg)
Real World Accessibility
• Out of 100 Federal Homepages• Human Inspection• 96% Violated Section 508
• Automated Tools Inspection• 92% Violated Section 508
![Page 36: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/36.jpg)
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
![Page 37: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/37.jpg)
![Page 38: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/38.jpg)
![Page 39: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/39.jpg)
![Page 40: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/40.jpg)
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>
![Page 41: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/41.jpg)
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>
![Page 42: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/42.jpg)
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-developer
• Total Validator• http://www.totalvalidator.com/index.html
![Page 43: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/43.jpg)
Is My Site Accessible?
• 508 Toolbar (for M.S. I-E)• http://www.rampweb.com/Accessibility_Re
sources/Section508/download.asp
![Page 44: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/44.jpg)
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
![Page 45: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/45.jpg)
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
![Page 46: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/46.jpg)
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
![Page 47: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/47.jpg)
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
![Page 48: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/48.jpg)
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/
![Page 49: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/49.jpg)
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
![Page 50: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/50.jpg)
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
![Page 51: Web Site Accessibility](https://reader035.fdocuments.us/reader035/viewer/2022070105/56815e76550346895dccf827/html5/thumbnails/51.jpg)
Contact…
• My Web Site – • www.mwbarlow.com
• This presentation• www.mwbarlow.com/Lectures
• E-Mail – • [email protected]