designing accessible web sites n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Designing Accessible Web Sites PowerPoint Presentation
Download Presentation
Designing Accessible Web Sites

Loading in 2 Seconds...

play fullscreen
1 / 122

Designing Accessible Web Sites - PowerPoint PPT Presentation


  • 194 Views
  • Uploaded on

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?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Designing Accessible Web Sites' - paul


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
designing accessible web sites
Designing Accessible Web Sites
  • Rick Hill, Webmaster
    • College of Engineering
why are you here
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
Who are you?
  • Webmaster?
  • Web designer?
  • Web database programmer?
  • Administrator?
  • Researcher?
who are you1
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
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
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
Users Limitations
  • Functional Limitations
    • Visually Impaired (includes color blindness)
    • Hearing Impaired
    • Mobility Impaired
    • Cognitively Impaired
  • Situational Limitations
    • Device Limitations
    • Browser Limitations
scope of functional disabilities
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 disabilities1
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
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
How the Disabled Use the Web
  • Visually Impaired
    • Screen readers
    • Screen magnifiers
    • Text browser
    • Braille display
  • Hearing impaired
    • Braille display
    • Direct connection to hearing aid
    • Captioned audio and multimedia
how the disabled use the web1
How the Disabled Use the Web
  • Mobility impaired
    • Speech control
    • Keyboard guards and overlays
    • Slow keys and on-screen keyboards
    • Replacement mice and switches
  • Cognitive disabilities
    • Most neglected disability
    • Require clear and simple content
    • Alternate presentations of data
what is the problem
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
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 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
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
  • US Rehabilitation Act Section 508
    • Subpart B - Technical Standards § 1194.22
    • Based on WCAG Priority A standards
    • Emphasizes end results and enforceability
reasons to do it
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Social maturity
reasons to do it1
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Social maturity
federal legislation
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
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
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
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
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 uc1
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
And UC Davis?
  • ADA challenge - UC Davis and UC Berkeley
    • Expanded to include web accessibility issues
  • UC Davis web policy PPM 310-70
    • Adopted August 2006
    • Applies to official and department sites sites
    • Added accessibility requirements
      • Minimum standard is 508
      • Implementation in process
and uc davis1
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 it2
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Social maturity
reasons to do it3
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Social maturity
better web design
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 it4
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Social maturity
reasons to do it5
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Social maturity
funding issues
Funding Issues
  • The costs to respond to an ADA challenge
    • Other accommodation
    • Redesign to meet a deadline
    • External review
  • Section 508 has implications for research
    • Grant funding
    • Web requirements
  • Potentially lower web maintenance costs
reasons to do it6
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Ethics
reasons to do it7
Reasons to Do It
  • Compliance with regulatory and legal requirements
  • Produces better web design and implementation
  • Funding issues
  • Ethics
ethics
Ethics
  • UCD Principles of Community
  • It’s the right thing to do!
how do i do it
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
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
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 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
    • Markup and CSS won’t validate without it
  • Declare the natural language type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

use valid html or xhtml1
Use Valid HTML or XHTML
  • Engineering:
  • Use W3C web standards when possible
    • WaSP- Web Standards Project
  • Validate the HTML
  • Validate the CSS

<?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">

other good practises
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 a
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 a1
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 a2
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 quote-quote not quote-space-quote
  • Background graphic and patterns do not require "alt" attribute (in fact they can’t take one)
section 508 standards a3
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 a4
Section 508 Standards (a)
  • Image examples
    • Image
    • Image links
    • Image map hot spots

<img src="logo.gif" width="10" height= "10" alt="Company Logo" longdesc="logoinfo.html">

<a href="index.html"><img src="logo.gif" width="10" height="10" alt="Homepage></a>

<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 a5
Section 508 Standards (a)
  • Image types
    • Image Buttons
    • Decorative and spacer (no information)
    • Information rich, like charts and graphs
    • Building Accessible Websites by Joe Clark addresses providing text equivalents for many other types of images (hit counters, maps)

<input type="image" src="logon.gif" alt="Logon" name="logon">

<img src="spacer.gif" width="1" height="1" alt="">

<img src="chart.gif" width="360" height="220" alt="Growth of visually impaired internet users" longdesc="chart.html">

section 508 standards b
Section 508 Standards (b)
  • (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
section 508 standards b1
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 b2
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
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 c1
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 d
Section 508 Standards (d)
  • (d) Documents shall be organized so they are readable without requiring an associated style sheet.
section 508 standards d1
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 d2
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
Section 508 Standards (e)
  • (e) Redundant text links shall be provided for each active region of a server-side image map.
section 508 standards e1
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
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 f1
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 f2
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
Section 508 Standards (g)
  • (g) Row and column headers shall be identified for data tables.
section 508 standards g1
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 g2
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
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 h1
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 h2
Section 508 Standards (h)

scope method

(simple table)

<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>

<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>

section 508 standards h3
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 h4
Section 508 Standards (h)

id/header method

(complex)

section 508 standards h5
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
Section 508 Standards (i)
  • (i) Frames shall be titled with text that facilitates frame identification and navigation.
section 508 standards i1
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 i2
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 i4
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
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 j1
Section 508 Standards (j)
  • Flickering images or text can cause problems for people with photosensitive epilepsy
  • Example: CAUTION! Anyone sensitive?
section 508 standards k
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 k1
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
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 l1
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 l2
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 l3
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
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 m1
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
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 n1
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 n2
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 n3
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 n4
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 n5
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 n6
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 n7
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 n8
Section 508 Standards (n)
  • Fieldsets can be nested and styled
  • More information:
    • WebAIM
    • Web Accessibility, Web Standards and Regulatory Compliance
section 508 standards o
Section 508 Standards (o)
  • (o) A method shall be provided that permits users to skip repetitive navigation links.
section 508 standards o1
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 o2
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
    • Just before the main page content:
  • Example

<a href="#content">Skip to page content</a>

<a name="content"></a>

section 508 standards o3
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 o4
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
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 p1
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
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
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 compliance1
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 compliance2
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 compliance3
Checking For 508 Compliance
    • Extensions to Dreamweaver
    • WebAIM List and Review of free tools
  • Commercial Tools
    • Deque(Free personal use version too)
    • HiSoftware
    • SSB Technologies
    • Jim Tatcher comparison
flash accessibility
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 accessibility1
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
  • HTML accessibility concepts apply to Flash
    • color contrast
    • consistent navigation
    • user-centric design
pdf accessibility
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 accessibility1
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 accessibility2
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 accessibility3
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 Accessibility
  • AJAX stands for Asynchronous JavaScript And XML
    • Allows web applications high levels of interactivity without the standard type of client-server interaction
    • Overview of AJAX
    • AJAX Example
ajax accessibility1
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
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 thoughts1
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 sites1
Designing Accessible Web Sites
  • Rick Hill, Webmaster
    • College of Engineering