Embed Size (px)
Citation preview
WEB SITE ACCESSIBILITY
Mike BarlowLead Application Architect - dbITpro
TCF – Trenton Computer Festival 2012
WORKSHOP
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/
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 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/chec
klist
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 Guidelineshttp://www.w3.org/TR/WCAG20/
• W3C’s Web Accessibility Initiativehttp://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” attributeOR
• 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 (Cont.)
• A Simple Table
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 (Cont.)
• A More Complex Table
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.)
The page now looks like below
When the user first comes to the page and hit’s the “Tab” key to go to the first link
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 (Cont.)
<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>
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=ChXz41GuDxNm-7TcWyCl_w2&t=632495684475122400" width="0" height="0" style="border-width: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.NETNot 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-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 – • [email protected]
