Mike Barlow Lead Application Architect - dbITpro TCF – Trenton Computer Festival 2012.

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&amp;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]

Questions?

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