Transcript Web Site Accessibility - Mike Barlow's Web Home

WEB SITE ACCESSIBILITY
WORKSHOP
Mike Barlow
Lead Application Architect - dbITpro
TCF – Trenton Computer Festival 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
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
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>
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/draftrule.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 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
• Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG20/
• W3C’s Web Accessibility Initiative
http://www.w3.org/WAI/
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>
Accessible Images
Accessible Images
(Cont.)
• Every image needs an HTML attribute containing a
description of the image
• Microsoft ASP.NET controls for images use a different
methodology
Accessible Images
(Cont.)
Example:
HTML:
<img src=“Products.gif” alt=“Image of the products” />
ASP.NET:
<asp:Image ImageUrl=“Products.gif”
AlternateText=“Image of the products”
runat=“server” />
Accessible Images
(Cont.)
• If the image has no useful information to convey, use
an empty alt text attribute (again except for ASP.NET)
Accessible Images
(Cont.)
Example:
HTML:
<img src=“spacer.gif” alt=“” />
ASP.NET:
<asp:Image ImageUrl=“spacer.gif”
GenerateEmptyAlternateText=“true”
runat=“server” />
Accessible Images
(Cont.)
• If the image represents something complicated then
the alt attribute cannot be used
• In this case use HTML “longdesc” attribute
OR
• DescriptionURL if using ASP.NET
• This attribute accepts a relative or absolute URI
• Provide a textual description of the meaning behind
the image
Accessible Images
(Cont.)
Example:
HTML:
<img src=”OrgChart.gif” alt=“Company Organization Chart”
longdesc=“/ OrgChartDescription.html” />
ASP.NET:
<asp:Image ImageUrl=“OrgChart.gif”
AlternateText=“Company Organization Chart”
DescriptionUrl=“/OrgChartDescription.aspx”
Runat=“Server” />
Accessible Tables
Accessible Tables
(Cont.)
• Presenting information in HTML tables, if not done
right, can create accessibility problems.
• In order to make tables accessible to persons who are
using screen readers, you need to always use the
proper tags to mark the column and row headings.
• A table heading should always be marked with the
<th> tag and the scope, headers, and axis attributes.
• The <th> tag is used to mark the column headings.
Accessible Tables
(Cont.)
• The scope attribute can be used to indicate whether a
table heading is a column heading or a row heading
(scope=“row” or scope=“col”)
• The headers attribute enables you to mark each cell
with its associated headings
• The axis attribute enables you to categorize a table
heading
Accessible Tables
• A Simple Table
(Cont.)
Accessible Tables
(Cont.)
<table summary="Number of apples and oranges produced" >
<thead>
<tr>
<th scope="col">Numbers</th>
<th scope="col">Apples</th>
<th scope="col">Oranges</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Produced</th>
<td>101</td>
<td>333</td>
</tr>
<tr>
<th scope="row">Sold</th>
<td>97</td>
<td>293</td>
</tr>
</tbody>
</table>
Accessible Tables
• A More Complex Table
(Cont.)
Accessible Tables
(Cont.)
<table summary="The protein, carbohydrates and fat intake for breakfast and lunch on Monday.">
<thead>
<tr>
<th colspan="4" id="h1">Monday</th>
</tr>
<tr>
<th id="h2">Meal</th>
<th id="h3">Protein</th>
<th id="h4">Carbohydrates</th>
<th id="h5">Fat</th>
</tr>
</thead>
<tbody>
<tr>
<th id="h6">Breakfast</th>
<td headers="h1 h6 h3">10g</td>
<td headers="h1 h6 h4">15g</td>
<td headers="h1 h6 h5">9g</td>
</tr>
<tr>
<th id="h7">Lunch</th>
<td headers="h1 h7 h3">15g</td>
<td headers="h1 h7 h4">30g</td>
<td headers="h1 h7 h5">12g</td>
</tr>
</tbody>
</table>
Accessible Navigation
Accessible Navigation
(Cont.)
Accessible Navigation
(Cont.)
When the user first comes to the page
and hit’s the “Tab” key to go to the first link
The page now looks like below
Accessible Navigation
(Cont.)
<style>
#skip a, #skip a:hover, #skip a:visited {
position:absolute;
left:0; top:-500px;
width:1px; height:1px;
overflow:hidden;
}
#skip a:active, #skip a:focus {
position:static;
width:auto;
height:auto;
}
</style>
Accessible Navigation
(Cont.)
<div id="skip">
<a href="#content">Skip to Main Content</a>
</div>
Accessible Navigation
(Cont.)
• Skip Navigation links have been integrated into
several of the standard ASP.NET 2.0 controls
• In particular, the Menu, TreeView,
SiteMapPath, Wizard, and CreateUserWizard
controls all support Skip Navigation links
Accessible Navigation
<asp:Menu id="Menu1" Runat="server">
<Items>
<asp:MenuItem Text="Home"
NavigateUrl="Home.aspx" />
<asp:MenuItem Text="Products"
NavigateUrl="Products.aspx" />
<asp:MenuItem Text="Services"
NavigateUrl="Services.aspx" />
<asp:MenuItem Text="About"
NavigateUrl="About.aspx" />
</Items>
</asp:Menu>
(Cont.)
Accessible Navigation
(Cont.)
If you view the source of the page, you'll see
that the following link appears at the top of
the menu.
<a href="#Menu1_SkipLink">
<img alt="Skip Navigation Links"
src="/WebResource.axd?d=ChXz41GuDxNm7TcWyCl_w2&amp;t=632495684475122400"
width="0" height="0" style="borderwidth:0px;" />
</a>
Accessible Forms
Accessible Forms
(Cont.)
• Screen readers have a difficult time associating
form fields with their corresponding labels
• HTML Label tag allows screen readers to associate
fields with their labels
Accessible Forms
(Cont.)
Example:
HTML:
<table><tr>
<td><label for="txtFirstName“ >
First Name:
</label></td>
<td><input name="txtFirstName"
type="text"
id="txtFirstName" /></td>
</tr> </table>
Accessible Forms
(Cont.)
Example:
ASP:
<table><tr>
<td><asp:Label
AssociatedControlID="txtFirstName“
runat="server">First Name:</asp:Label></td>
<td><asp:TextBox
ID="txtFirstName"
runat="server" />
</td>
</tr> </table>
Accessible Forms
(Cont.)
• CheckBox, RadioButton, CheckBoxList, and
RadioButtonList controls use the Text attribute
to label the text of the control
Example:
HTML
<input id="ctl03" type="checkbox" name="ctl03" />
<label for="ctl03">Include Gift Wrap</label>
Accessible Forms
(Cont.)
Example:
ASP.NET
Not this:
<asp:CheckBox runat=“server”>Include Gift
Wrap</asp:CheckBox>
But this:
<asp:CheckBox runat=“server” Text=“Include Gift
Wrap” />
Accessible Forms
(Cont.)
• For large forms divide the form into multiple sections
by using <fieldset> and <legend> tags
• The <fieldset> tag subdivides the form into sections
and the <legend> tag labels the sections
Accessible Forms
(Cont.)
Example:
<form id="form1" runat="server">
<div>
<fieldset>
<legend>Contact Information</legend>
... form fields
</fieldset>
<fieldset>
<legend>Payment Information</legend> .
.. form fields
</fieldset>
</div>
</form>
Accessible Forms
(Cont.)
• When building a Web form, it is always a good
idea to include accesskey and tabindex
attributes for each of the form fields
• The accesskey attribute enables someone who
cannot use a mouse to navigate directly to any
form field
• The tabindex attribute enables you to control
the tabbing order of the form fields
Accessible Forms
(Cont.)
Example:
HTML:
<label for="txtFirstName“ accesskey="f“ >
<u>F</u>irst Name
</label>
<input type=“text” id="txtFirstName" tabindex="1" />
Accessible Forms
(Cont.)
Example:
ASP:
<asp:Label AssociatedControlID="txtLastName"
AccessKey="l" runat="server">
<u>L</u>ast Name
</asp:Label>
<asp:TextBox id="txtLastName"
TabIndex="2" Runat="server" />
Accessible Frames
Accessible Frames
(Cont.)
• Why is this provision necessary?
• What is the best method for identifying frames?
Accessible Frames
(Cont.)
<FRAMESET ROWS="20%, 70%, 10%“ >
<FRAME SRC="navlinks.html"
name="navlinks"
title="Navigation Links Frame“ >
<FRAME SRC="content.html"
name="contents_page"
title="Contents Frame“ >
<FRAME SRC="copyright.html"
name="copyright_info"
title="Copyright” >
</FRAMESET>
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
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
• 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 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/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 Accessible
• Check Accessibility of Web Pages
(using Visual Web Developer)
• http://msdn.microsoft.com/enus/library/ms247244(VS.80).aspx
• ASP.NET Controls and Accessibility
• http://msdn.microsoft.com/en-
us/library/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/pa
ge9994.cfm
• http://www.webcredible.co.uk/user-friendly-resources/webaccessibility/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 –
• [email protected]
Questions?
http://www.youtube.com/watch?v=-IWBT4Tk3t0