Transcript The Art of Accessible Web Design

`
Designing Accessible
Web Sites
Rick Hill, Webmaster
College of Engineering
`
Why are you here?
• Converting an existing site?
• Creating a new site?
• Create accessible web standards?
• Required knowledge for a project?
• Just curious?
• Other needs?
`
Who are you?
• Webmaster?
• Web designer?
• Web database programmer?
• Administrator?
• Researcher?
`
Who are you?
• How many sites do you work with?
• Use a GUI authoring tool or hand code?
• Use cascading style sheets (CSS)?
• Use validation tools?
• Accessibility experience?
`
Class Goals
• Define web accessibility
• Why is it important?
• Why should you do it?
• Identify the issues involved
• Explore design standards
• Discuss methods to create and maintain
accessible sites
• Identify resources
`
Accessibility Defined
• The qualities of a website that allow people to
use it even when they are working under
limiting conditions or constraints
•
•
•
Allows more people to use a site in more
situations
Provides web content to people with disabilities
Allows web content to be presented using
adaptive technology
`
Users Limitations
• Functional Limitations
•
•
•
•
Visually Impaired (includes color blindness)
Hearing Impaired
Mobility Impaired
Cognitively Impaired
•
•
Device Limitations
Browser Limitations
• Situational Limitations
`
Scope of Functional Disabilities
• The American Foundation for the Blind claims
•
•
•
10 million visually impaired in the US and over
900,00 computer users
A Harris Poll, June 2000, showed that 43% of
US adults with disabilities use the Internet
WHO reports 15% to 30% of the population
have functional limitations that can affect their
ability to use technology
According to a Georgia Institute of Technology
survey, almost 10% of internet users reported
having a disability
`
Scope of Functional Disabilities
• 1999 US Department of Commerce survey
reported that in the US:
•
•
•
•
7.3 million had vision problems
6.9 million had hearing problems
6.3 million had difficulty using their hands
2.9 million had a learning disability
• ~12% of the US have some type of work
disability
• Statistics point to an increasing number of
people with functional limitations as the
population ages
`
Goals of Accessible Design
• Make web-based information and services
available to people with disabilities
• Make web-based information and services
available to the widest audience
`
How the Disabled Use the Web
• Visually Impaired
•
•
•
•
Screen readers
Screen magnifiers
Text browser
Braille display
•
•
•
Braille display
Direct connection to hearing aid
Captioned audio and multimedia
• Hearing impaired
`
How the Disabled Use the Web
• Mobility impaired
•
•
•
•
Speech control
Keyboard guards and overlays
Slow keys and on-screen keyboards
Replacement mice and switches
•
•
•
Most neglected disability
Require clear and simple content
Alternate presentations of data
• Cognitive disabilities
`
What is the problem?
• Web sites use design techniques, scripts, images
and graphics in ways that make the content
inaccessible or difficult to use
•
•
•
•
•
Graphic content without text equivalent
•
Images, charts, Flash, PDF’s
Complex navigation
Video and audio clips without captions or
transcripts
Require a specific browser or mouse
Not user-centric
`
The Solution: Standards
• Define standards for web accessibility
• Create tools that support the standard
•
•
•
Adaptive technologies that interpret websites
designed to the standards
Authoring tools that integrate the standards into
web designs
Validation tools that help determine standards
compliance
• Author web sites and pages to comply with the
standards
`
Pro and Con
• Pro
•
Since pages are designed to standards, authors
need not know which adaptive technology is
being used by the client nor do they have to test
pages using different adaptive tools
• Con
•
•
The standards are not specific enough, so they
are subject to interpretation
No tool can fully automatically test or create
accessible web pages
`
The Standards
• W3C’s Web Accessibility Initiative (WAI)
•
•
Published guidelines, implementation methods,
and priority checkpoints under the Web
Content Accessibility Guidelines (WCAG).
No force of law
•
•
•
Subpart B - Technical Standards § 1194.22
Based on WCAG Priority A standards
Emphasizes end results and enforceability
• US Rehabilitation Act Section 508
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Social maturity
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Social maturity
`
Federal Legislation
• Americans with Disabilities Act, Title II
•
Communications must be as effective for those
with disabilities as for those without
• Rehabilitation Act, Section 504
•
Establishes requirement to make programs,
services and activities accessible
• Rehabilitation Act, Section 508
•
Provides standards to use in evaluating the
accessibility of web pages and other electronic
communication
`
Federal Impact
• After June 25, 2001, technology must meet 508
standards.
•
•
Enforcement covers all Federal agencies
Applies to web pages as they are updated or
added
• Applies to Assistive Technology Act funding
•
•
1998 act provides funding to states for
maintaining technology-related assistance
programs for the disabled
California is a recipient
• UC Federally funded sites may need to comply
`
California State Impact
• State agencies adopt accessibility standards:
•
•
•
•
California State Webmasters Site
Compliance with Government Code Section
11135.d(2) which references Federal
Rehabilitation Act Section 508
Priority 1 and 2 level checkpoints of the Web
Content Accessibility Guidelines 1.0 (WCAG 1.0
“AA” Conformance Level)
Recommended best practices from the
California Department of Rehabilitation
`
Impact on California Public
Colleges and Universities
• California Community College system ruled
that 508 applies system wide
• California State University System required by
legislation to comply with 508
•
•
•
In December 2004, CSU Executive Order 926
states - "Section 11135 of the California
Government Code was amended ... to clarify
that Section 508 of the 1973 Rehabilitation Act
applies to the CSU. "
California State University's Accessible
Technology Initiative
All CSU sites Section 508 compliant by 2012
`
And what about UC?
• No legislative requirement
• No system-wide accessibility policy - yet!
• Former UC President Atkinson 2001 letter to
UC chancellors pledged to:
• " ...ensure that the digital technologies we use
for academic and administrative purposes are
accessible to all of our students, faculty, and
staff "
`
And what about UC?
• Electronic Accessibility at the University of
California
• System-wide groups discussing issues
• Draft policy
• Exploring acquisition of testing/validation tools
`
And UC Davis?
• ADA challenge - UC Davis and UC Berkeley
•
Expanded to include web accessibility issues
•
•
•
Adopted August 2006
Applies to official and department sites sites
Added accessibility requirements
• UC Davis web policy PPM 310-70
•
•
Minimum standard is 508
Implementation in process
`
And UC Davis?
• Support resources available or planned
•
•
•
•
•
•
Implementation plan being drafted
Training, tools and web resources?
Web templates
Web developers forum
Content Management System
Video captioning services
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Social maturity
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Social maturity
`
Better Web Design
• Refocus on purpose of your web site
• Design to current web standards
• Reevaluate site and page navigation
• Provides additional redundancy
• Improved page load speeds
• New skills
• Potentially easier to maintain
• Better search rankings
• More usable sites
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Social maturity
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Social maturity
`
Funding Issues
• The costs to respond to an ADA challenge
•
•
•
Other accommodation
Redesign to meet a deadline
External review
•
•
Grant funding
Web requirements
• Section 508 has implications for research
• Potentially lower web maintenance costs
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Ethics
`
Reasons to Do It
• Compliance with regulatory and legal
requirements
• Produces better web design and
implementation
• Funding issues
• Ethics
`
Ethics
• UCD Principles of Community
• It’s the right thing to do!
`
Time for a Movie
`
How Do I Do It?
• Author sites/pages that are compliant to 508
standards
• Check sites/pages for compliance to the
standard
• Maintain compliant sites/pages
• Go beyond 508 standards when possible
•
•
Worldwide Web Consortium (W3C) Web
Accessibility Initiative (WAI) Web Accessibility
Guidelines (WCAG)
Use best practices
`
It’s an Art!
• There are no tools available that will
automatically create an accessible site/page
• There are no tools available that will
•
automatically determine if a site/page is
compliant with any standard
You will need to supplement any tool with your
understanding and interpretation of the
standards
`
The Basic Design Process
• Take a user-centric approach to design
•
You do not control the user experience, only
content
• Create a map of your site and check that it is
logically arranged/linked
• Make sure that page navigation is is consistent
and clear
• Create a site map page to assist navigation
• Make sure that content is current and will be
maintained
`
Use Valid HTML or XHTML
• Use current (X)HTML standards in design
•
•
HTML 4.01, XHTML 1.0, XHTML 1.1
Use CSS in lieu of deprecated font/layout tags
• Specify the DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
•
Markup and CSS won’t validate without it
• Declare the natural language type
<html lang="en">
`
Use Valid HTML or XHTML
• Engineering:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
• Use W3C web standards when possible
•
WaSP - Web Standards Project
• Validate the HTML
• Validate the CSS
`
Other Good Practises
• Use percentages and ems
• Optimize page sizes and included image sizes to
decrease page load speeds
• Consider using a design tool that allows
template driven design
`
Section 508 Standards
`
Section 508 Standards (a)
(a) A text equivalent for every non-text element
shall be provided (e.g., via "alt", "longdesc", or in
element content).
`
Section 508 Standards (a)
• ALL images MUST have an "alt" attribute
• The content of "alt" attribute is a matter of
style and judgment
• Do not label a link as "Link to" in the "alt" text
• Validation tools will check to see if "alt"
attribute exist but cannot interpret their
content
`
Section 508 Standards (a)
• Blank "alt" attribute (alt="") can be used for
appropriate images but ALL images need an
"alt" attribute
•
•
Appropriate for images that convey no
information
A blank alt attribute is alt="", that is quotequote not quote-space-quote
• Background graphic and patterns do not
require "alt" attribute (in fact they can’t take
one)
`
Section 508 Standards (a)
• "alt" text should be kept short - less than 1024
•
characters
Use "longdesc" attribute to provide a link to a
page with a larger amount of information
"longdesc" pages should be simple, text only
"longdesc" pages could provide a link back to
an anchor on the calling page
•
•
`
Section 508 Standards (a)
• Image examples
•
Image
<img src="logo.gif" width="10" height= "10" alt="Company Logo" longdesc="logoinfo.html">
•
Image links
<a href="index.html"><img src="logo.gif" width="10" height="10" alt="Homepage></a>
•
Image map hot spots
<img src="banner.gif " width="500" alt="Navigation Banner" usemap="#banner">
<map name="banner">
<area href="home.html" alt="Homepage" shape="rect" coords="0,0,110,24">
<area href ="services.html" alt="Services" shape="rect" coords="111,0,215,24"> …
`
Section 508 Standards (a)
• Image types
•
•
•
Image Buttons
<input type="image" src="logon.gif" alt="Logon" name="logon">
Decorative and spacer (no information)
<img src="spacer.gif" width="1" height="1" alt="">
Information rich, like charts and graphs
<img src="chart.gif" width="360" height="220" alt="Growth of visually impaired internet
users" longdesc="chart.html">
•
Building Accessible Websites by Joe Clark addresses
providing text equivalents for many other
types of images (hit counters, maps)
`
Section 508 Standards (b)
(b) Equivalent alternatives for any multimedia
presentation shall be synchronized with the
presentation.
`
Section 508 Standards (b)
• At a minimum, you should provide a transcript
of all audio content
• Provide synchronized audio transcription with
multimedia presentations (captions)
• If possible, include video descriptions
• MediaWorks provides captioning services
• MAGpie, the Media Access Generator
• Many methods discussed on the WebAIM site
• Example
`
Section 508 Standards (b)
• Basic Process
• Issues
•
•
•
Formats - one or many?
Scripted vs unscripted source
•
•
Timeliness
Commencement Ceremony
Podcasting
•
Text or PDF equivalent
`
Section 508 Standards (c)
(c) Web pages shall be designed so that all
information conveyed with color is also available
without color, for example from context or
markup.
`
Section 508 Standards (c)
• Do not rely solely on the color of an element
on your page to convey meaning
•
•
"Items in red are required" is bad
"* Items marked with an asterisk are required" is
better
• Foreground (text) and background colors must
provide sufficient contrast to allow users with
different type of color blindness or those using
a monochrome screen to view information
`
Section 508 Standards (c)
The Good
The Bad
`
Section 508 Standards (c)
The Ugly
`
Section 508 Standards (d)
(d) Documents shall be organized so they are
readable without requiring an associated style
sheet.
`
Section 508 Standards (d)
• Make sure that if you use styles (CSS) that
pages are usable if the style sheets are disabled
• Organize pages in a consistent, logical manner
• Don’t substitute styles for the structural
•
•
elements of HTML like headings, paragraphs,
and lists
Example 1: Pure CSS
Example 2: Transitional CSS
`
Section 508 Standards (d)
• Test pages with styles turned off
•
•
•
Use the web developer for Mozilla/Firefox
Disable styles in Internet Explorer
•
•
Web Accessibility Toolbar
Internet Explorer Developer Toolbar
Use a text-only browser like Lynx either on your
own system or by using the campus computers
•
•
Lynx for Windows
Lynx for OS X
`
Section 508 Standards (e)
(e) Redundant text links shall be provided for each
active region of a server-side image map.
`
Section 508 Standards (e)
• Don't use server-side image maps
• Use client-side maps (next section) instead
• There is no way to make server-side image
maps accessible
•
•
•
No local images to label with a text equivalent
The "active regions" in the map only display a set
of coordinates
The server calculates the destination URL based
on coordinates it is sent from a mouse click
• Redundant text links are required
`
Section 508 Standards (f)
(f) Client-side image maps shall be provided
instead of server-side image maps except where
the regions cannot be defined with an available
geometric shape.
`
Section 508 Standards (f)
• Each <area> in the image map is assigned an
"alt" attribute
• Example:
<img src="navbar.gif" usemap="#Navigation_Map" alt="Navigation Bar"><map
name="Navigation_Map"> <area shape="rect" coords="157,14,239,31" href="http://site.org"
alt="Home"> <area shape="rect" coords="245,14,325,31" href="http://site.org/news"
alt="News"> <area shape="rect" coords="331,14,412,31" href="http://site.org/services"
alt="Services"> <area shape="rect" coords="417,14,501,31" href="http://site.org/comments"
alt="Comments"> <area shape="rect" coords="505,12,586,31" href="http://site.org/search"
alt="Search"></map>
`
Section 508 Standards (f)
• Another example with complex shapes
<img src="usamap.jpg" width="436" height="220" border="0" usemap="#usa_map" alt="Map of US
districts">
<MAP NAME="usa_map">
<AREA SHAPE=POLY COORDS="5,11,32,15,41,41,40,76,67,75,124,75,124,50,109,52,104,38,
90,6,48,8,13,0,6,0,8,9,8,10,10,11,10,11" HREF="/usa/pacwest/default.asp" ALT="Pacific
Northwest: AK, WA, ID, OR">
<AREA SHAPE=POLY COORDS="93,7,172,8,172,31,171,46,174,83,184,84,186,91,187,105,186,
117,147,116,140,118,105,117,105,75,125,78,123,50,111,51,104,37,91,7,95,7,104,8,104,8"
HREF="/usa/rockymtn/default.asp" ALT="Rocky Mountain Region: CO, UT, WY, MT">
...
</MAP>
`
Section 508 Standards (g)
(g) Row and column headers shall be identified for
data tables.
`
Section 508 Standards (g)
• Cells should be labeled appropriately
•
•
If they contain pure data use <td>
If they contain column or row header titles use
<th>
• <th> cells make the header stand out and they
can be identified by assistive technology
• Format <th> cells with styles
• Use the <caption> tag and "summary"
attribute to further enhance table accessibility
`
Section 508 Standards (g)
<table border="1" cellpadding="0" summary="Today’s lunch menu showing
salad, entree and dessert.">
<caption>Today's Lunch</caption>
<tr>
<th>Salad</th>
<td>Caesar </td>
</tr>
<tr>
<th>Entree</th>
<td>Chicken Divan</td>
</tr>
<tr>
<th>Dessert</th>
<td>Chocolate Mousse</td>
</tr>
</table>
`
Section 508 Standards (h)
(h) Markup shall be used to associate data cells
and header cells for data tables that have two or
more logical levels of row or column headers.
`
Section 508 Standards (h)
• Data cells (<td>) must be associated with
•
appropriate column and row headers cells
(<th>) to give them meaning
Methods
•
•
•
scope attribute
id and headers attributes
axis attribute (which we won’t address)
`
Section 508 Standards (h)
scope method
(simple table)
<table summary="Schedule”>
<tr>
<th>&nbsp;</th>
<th scope="col" >Spring</th>
<th scope="col" >Summer</th>
<th scope="col" >Autumn</th>
<th scope="col" >Winter</th>
</tr>
<tr>
<th scope="row" >Betty</th>
<td>9-5</td>
<td>10-6</td>
<td>8-4</td>
<td>7-3</td>
</tr>
<tr>
<th scope="row" >wilma</th>
<td>10-6</td>
<td>10-6</td>
<td>9-5</td>
<td>9-5</td>
</tr>
<tr>
<th scope="row" >Fred</th>
<td>10-6</td>
<td>10-6</td>
<td>10-6</td>
<td>10-6</td>
</tr>
</table>
`
Section 508 Standards (h)
scope method
(more complex)
<table>
<tr>
<th>&nbsp;</th>
<th colspan="2" scope="col">Winter</th>
<th colspan="2" scope="col">Summer</th>
</tr>
<tr>
<th >&nbsp;</ th >
<th scope="col" >Morning</th>
<th scope="col" >Afternoon</th>
<th scope="col" >Morning</th>
<th scope="col" >Afternoon</th>
</tr>
<tr>
<th scope="row">Wilma</th>
<td>9-11</td>
<td>12-6</td>
<td>7-11</td>
<td>12-3</td>
</tr>
…
</table>
`
Section 508 Standards (h)
id/header method
(complex)
`
Section 508 Standards (h)
<table border="1">
<caption>Travel Expense Report</caption>
<tr>
<th></th>
<th id="c2">Meals</th>
<th id="c3">Hotels</th>
<th id="c4">Transport</th>
<td id="c5">subtotals</td>
</tr>
<tr>
<th id="r2">San Jose</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td id="r3" >25-Aug-97</td>
<td headers="c2 r2 r3">37.74</td>
<td headers="c3 r2 r3">112.00</td>
<td headers="c4 r2 r3">45.00</td>
<td></td>
</tr>
...
<tr>
<th id="r10">Totals</th>
<td headers="c2 r10">196.27</td>
<td headers="c3 r10">442.00</td>
<td headers="c4 r10">162.00</td>
<td headers="c5 r10">800.27</td>
</tr>
</table>
`
Section 508 Standards (i)
(i) Frames shall be titled with text that facilitates
frame identification and navigation.
`
Section 508 Standards (i)
• Don’t use frames
• Frame elements need to be labeled to identify
the different frames in a frameset to assistive
browsers
•
•
While not yet widely supported, use the "title"
attribute to label <frame> elements
All pages referenced in a frameset should have
a meaningful <title> in their <head>
• Include a <noframes> element to provide
content to browsers that do not support
frames
`
Section 508 Standards (i)
<frameset rows="*,80" cols="*" framespacing="0" frameborder="yes" border="0"
bordercolor="#000033">
<frameset cols="150,*" frameborder="NO" border="0" framespacing="0">
<frame src="navigation.html" name="navigationFrame" scrolling="no" noresize
title="Navigation Frame">
<frame src="content.html" name="contentFrame" title="Content Frame">
</frameset>
<frame src="banner.html" name="bottomFrame" frameborder="yes" scrolling="NO"
noresize bordercolor="#0000EE" title="Banner Frame" >
</frameset>
<noframes>
Your browser doesn't support frames. Please go <a href="frameless.html">here</a>
for a frame free version of the page.
</noframes>
`
Section 508 Standards (i)
`
Section 508 Standards (i)
<head> ...
<title>Navigation Frame</title>...
</head>
<body>...
<head> ...
<title>Main Content Frame</title> ...
</head>
<body>...
<head> ...
<title>Banner Frame</title> ...
</head>
<body>...
`
Section 508 Standards (j)
(j) Pages shall be designed to avoid causing the
screen to flicker with a frequency greater than 2
Hz and lower than 55 Hz.
`
Section 508 Standards (j)
• Flickering images or text can cause problems
for people with photosensitive epilepsy
• Example: CAUTION! Anyone sensitive?
`
Section 508 Standards (k)
(k) A text-only page, with equivalent information
or functionality, shall be provided to make a web
site comply with the provisions of this part, when
compliance cannot be accomplished in any other
way. The content of the text-only page shall be
updated whenever the primary page changes.
`
Section 508 Standards (k)
• Providing a text only version of your pages is
not a solution to making your site accessible
• It is to be used only if you cannot provide
accessibility in other ways
• Providing a text-only alternative requires the
maintenance of two sets of content
• CSS can be used to create a text-only version
• Example - print style
`
Section 508 Standards (l)
(l) When pages utilize scripting languages to
display content, or to create interface elements,
the information provided by the script shall be
identified with functional text that can be read by
assistive technology.
`
Section 508 Standards (l)
• Make sure no essential information is lost if
scripting is disabled
•
Don't say "No Javascript, too bad"
• Script-generated HTML follows the same
accessibility rules as "static" HTML
• Make all scripts directly accessible to assistive
technologies or use an alternate method of
providing equivalent functionality (HTML link)
Keyboard accessibility is a good measure
•
`
Section 508 Standards (l)
• Different screen readers provide different
degrees of support for event handlers
•
•
Use device-independent event handlers
OR use more than one event handler
•
•
•
Use "ommousedown" with "onkeydown"
Use "onmouseup" with "onkeyup"
Use "onclick" with "onkeypress"
• Avoid using scripting when HTML will do
`
Section 508 Standards (l)
• <noscript> is no longer preferred
• Avoid pop-up and new windows if possible
•
•
Form validation
Provide a non-script alternative
• Many sources for accessible Javascript
techniques
•
Web Accessibility, Web Standards and Regulatory
Compliance has a nice overview
`
Section 508 Standards (m)
(m) When a web page requires that an applet,
plug-in or other application be present on the
client system to interpret page content, the page
must provide a link to a plug-in or applet that
complies with §1194.21(a) through (l).
`
Section 508 Standards (m)
• Web pages that provide content such as Real
•
•
Audio or PDF files must provide a link to a
plug-in that allows the content to be viewed
Content presented via the plug-in must meet
other accessibility requirements of 508
Example
•
PDF and QuickTime
• How to include without repetition
`
Section 508 Standards (n)
(n) When electronic forms are designed to be
completed on-line, the form shall allow people
using assistive technology to access the
information, field elements, and functionality
required for completion and submission of the
form, including all directions and cues.
`
Section 508 Standards (n)
• Forms pose accessibility issues when a form
element is separated from its associated label
• The visual proximity of a form element and its
•
label doesn’t mean that a screen reader or an
assistive technology user will associate the two
Organization of form elements can be
enhanced by proper (X)HTML
•
•
•
label/for/id
fieldset
legend
`
Section 508 Standards (n)
• Use the <label> tag and associated "for"
attribute to tag labels
•
•
Identify the exact words to use as the label for
the form element and enclose those words in a
<label> tag
Use the "for" attribute to uniquely identify the
form element associated with the label
• Use the "id" attribute in the associated form
element to associate it with the label
• Use <fieldset> and <legend> to group input
elements
`
Section 508 Standards (n)
Before:
<form>
<table>
<tr>
<td><em>FIRST NAME: </em></td>
<td><input type="text" name="firstname"> </td>
</tr>
<tr>
<td><em>LAST NAME: </em></td>
<td><input type="text" name="lastname"> </td>
</tr>
</table>
<p><input type="submit" value="submit"></p>
</form>
`
Section 508 Standards (n)
After:
<form>
<fieldset>
<legend>Customer:</legend>
<p><label for="first"> First Name:</label>
<input type="text" name="firstname" id="first"></p>
<p><label for="last"> Last Name:</label>
<input type="text" name="lastname" id="last"></p>
</fieldset>
<p><input type="submit" value="submit"></p>
</form>
`
Section 508 Standards (n)
• Checkboxes:
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham" />
<label for="ham">Ham</label><br />
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni" />
<label for="pepperoni">Pepperoni</label><br />
<input id="mushrooms" type="checkbox" name="toppings" value="mushrooms" />
<label for="mushrooms">Mushrooms</label><br />
<input id="olives" type="checkbox" name="toppings" value="olives" />
<label for="olives">Olives</label>
</fieldset>
`
Section 508 Standards (n)
• Radio Buttons:
<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight" />
<label for="overnight">Overnight</label><br />
<input id="twoday" type="radio" name="shipping" value="twoday" />
<label for="twoday">Two day</label><br />
<input id="ground" type="radio" name="shipping" value="ground" />
<label for="ground">Ground</label>
</fieldset>
`
Section 508 Standards (n)
• Select list:
<label for="favcity">Choose your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="5">London</option>
<option value="6">Los Angeles</option>
<option value="7">Moscow</option>
<option value="8">Mumbai</option>
<option value="9">New York</option>
<option value="10">Sao Paulo</option>
<option value="11">Tokyo</option>
</select>
`
Section 508 Standards (n)
• Fieldsets can be nested and styled
• More information:
•
•
WebAIM
Web Accessibility, Web Standards and Regulatory
Compliance
`
Section 508 Standards (o)
(o) A method shall be provided that permits users
to skip repetitive navigation links.
`
Section 508 Standards (o)
• It can be a tedious and time-consuming chore
•
•
to wait for the assistive technology to work
through and announce each of the standard
navigational links
To alleviate this problem there must be a
mechanism for users to skip repetitive
navigational links
Skip navigation links can be placed anywhere,
but are generally placed at the top of the page
`
Section 508 Standards (o)
• Often a "Skip to content" in the top left corner
•
skips over repetitive titles, graphics and global
navigation links as well as page navigation links
Skip navigation link code
•
•
Just before the navigation links
<a href="#content">Skip to page content</a>
Just before the main page content:
• Example
<a name="content"></a>
`
Section 508 Standards (o)
• Should these links be visible or not?
•
•
•
If they are visible, it changes the appearance of
the site for sighted users
If they are invisible, there may be implications for
mobility impaired users and users who are vision
impaired (not blind)
More descriptive labeling potentially can be
applied to invisible links (since the label doesn’t
take up screen real estate)
`
Section 508 Standards (o)
• Methods to create invisible navigation skip links:
•
•
•
Skip navigation link attached to a small (1 pixel)
image with descriptive "alt" text
Use normal text, but set background and
foreground colors to be the same
Use CSS to move the link off the visible page
page to the left
<a href="#main" id="main" class="skip">Skip to page content</a>
CSS: a.skip {position: absolute; left: -1000em; width: 20em;}
`
Section 508 Standards (p)
(p) When a timed response is required, the user
shall be alerted and given sufficient time to
indicate more time is required.
`
Section 508 Standards (p)
• Someone's disability can limit the speed with
which they can read, move around, or fill in a
web form
•
•
A page may time out before they are able to
finish reading it
Many forms, when they time out also delete
whatever data has been entered
• Notify the user if a page is about to time-out
• Provide a prompt asking whether additional
time is needed
`
The Standard Versus The Intent
• Meeting the "letter of the law" is not enough
• Understanding the reason behind the standards
is important in applying them appropriately
• "alt" attribute content for example
•
•
•
Label a logo or use an empty "alt" attribute?
Clarity of wording?
Does context provide meaning?
•
•
If so, an empty alt may be OK even though the
image has meaning
A captioned picture for example
`
Checking For 508 Compliance
• Basic tests
•
•
•
Use a text only browser (lynx)
Disable styles and JavaScript (web designer tool)
Use the fangs emulator in Firefox
`
Checking For 508 Compliance
• Browser Tools
•
Mozilla/Firefox
•
•
•
•
•
•
•
Web developer
Fangs Screen Reader Emulator
Colour Contrast Analyser
Juicy Studio Accessibility Toolbar
Accessibar
Firefox Accessibility Extension
TotalValidator
`
Checking For 508 Compliance
•
•
Internet Explorer
•
•
Web Accessibility Toolbar
Internet Explorer Developer Toolbar
Text-only browser
•
•
Lynx for Windows
Lynx for OS X
• Free online tools
•
•
•
Ramp Personal Edition
WAVE
Cynthia Says
`
Checking For 508 Compliance
•
•
Extensions to Dreamweaver
WebAIM List and Review of free tools
•
•
•
•
Deque (Free personal use version too)
HiSoftware
SSB Technologies
Jim Tatcher comparison
• Commercial Tools
`
Let's Evaluate Some Pages!
`
Special cases: PDF, Flash and
AJAX
`
Flash Accessibility
• WebAIM tutorial
• Adobe general accessibility
• Adobe Flash Guidelines
• Flash can enhance some accessibility
•
•
•
•
•
Multiple ways of presentation
Scalability
Keyboard accessibility
Engaging content
Self-voicing
`
Flash Accessibility
• Some browsers may not support Flash
• Most Flash content cannot be made natively
accessible to screen readers
•
•
•
Make content accessible to the screen reader
Make content self-voicing
Provide an accessible alternative to the content
•
•
•
color contrast
consistent navigation
user-centric design
• HTML accessibility concepts apply to Flash
`
PDF Accessibility
• WebAIM Tutorial
• Adobe general accessibility
• Adobe PDF Guide (PDF)
• Scanning a document into PDF creates a "PDF
Image Only" file that is a graphic representation
of the document with no associated text
•
Generally unreadable by assistive technology
`
PDF Accessibility
• Scanning a document into PDF and then
running it through OCR ("optical character
recognition") technology converts the text
images into searchable text
•
•
This is more accessible
Such documents must be checked carefully for
accuracy
`
PDF Accessibility
• Printing a file directly into PDF format converts
•
•
the electronic information into a digital
representation of the document that is
somewhat readable to assistive technology.
Writing a document inside Adobe Acrobat can
also result in a document that is more usable by
assistive technology.
Adobe on-line conversion
`
PDF Accessibility
• Many assistive browsers support selected PDF
elements through Acrobat Reader
•
To take advantage of these features, PDF
documents need to be tagged
•
•
•
To convey document structure and content
To resize and reflow content in browser windows
To use the Read Out Loud feature
`
AJAX Accessibility
• AJAX stands for Asynchronous JavaScript And
XML
•
•
•
Allows web applications high levels of
interactivity without the standard type of clientserver interaction
Overview of AJAX
AJAX Example
`
AJAX Accessibility
• AJAX will not work in all web browsers
• Pages must function with Javascript disabled
• WebAIM AJAX article
• Many accessibilty issues yet to be addresses
•
•
Identifying content changes
Efforts are under way
`
Final Thoughts
• Be as accessible as possible: the standards will
change
•
•
•
Additional refinements in Federal standards will
happen - in review now
WCAG 2.0 has been released
508 is currently being revised
• Stay abreast of UC, UC Davis and Federal
policies that may apply to you
• UC Davis webmaster site
• Campus/UC accessibility plan and resources to
come
`
Final Thoughts
• Site conversion
•
•
•
•
•
•
If you can't convert completely, make a plan
Analyze the requirements and create a standards
statement for your organization
Make the easiest changes immediately
Make the changes to templates, style sheets and
other elements that will impact the greatest
number of pages
Outline how and when you will address other
needs
Document progress toward the plan
`
Designing Accessible
Web Sites
Rick Hill, Webmaster
College of Engineering