Designing Accessible Web Sites

1
Designing Accessible Web Sites

• Rick Hill, Webmaster
• College of Engineering

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

3
Who are you?

• Webmaster?
• Web designer?
• Web database programmer?
• Administrator?
• Researcher?

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

5
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

6
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

7
Users Limitations

• Functional Limitations
• Visually Impaired (includes color blindness)
• Hearing Impaired
• Mobility Impaired
• Cognitively Impaired
• Situational Limitations
• Device Limitations
• Browser Limitations

8
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

9
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

10
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

11
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

12
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

13
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, PDFs
• Complex navigation
• Video and audio clips without captions or
  transcripts
• Require a specific browser or mouse
• Not user-centric

14
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

15
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

16
The Standards

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

17
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Social maturity

18
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Social maturity

19
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

20
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

21
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

22
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

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

24
And what about UC?

• Electronic Accessibility at the University of
  California
• System-wide groups discussing issues
• Draft policy
• Exploring acquisition of testing/validation tools

25
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

26
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

27
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Social maturity

28
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Social maturity

29
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

30
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Social maturity

31
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Social maturity

32
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

33
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Ethics

34
Reasons to Do It

• Compliance with regulatory and legal requirements
• Produces better web design and implementation
• Funding issues
• Ethics

35
Ethics

• UCD Principles of Community
• Its the right thing to do!

36
Time for a Movie
37
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

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

39
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

40
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 wont validate without it
• Declare the natural language type

lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http//www.w3.org/TR/html4/strict.dtd
"gt
lthtml lang"en"gt
41
Use Valid HTML or XHTML

• Engineering
• Use W3C web standards when possible
• WaSP - Web Standards Project
• Validate the HTML
• Validate the CSS

lt?xml version"1.0" encoding"iso-8859-1"?gt lt!DOCT
YPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/1999
/xhtml" xmllang"en" lang"en"gt
42
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

43
Section 508 Standards
44
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).

45
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

46
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 cant take one)

47
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

48
Section 508 Standards (a)

• Image examples
• Image
• Image links
• Image map hot spots

ltimg src"logo.gif" width"10" height "10"
alt"Company Logo" longdesc"logoinfo.html"gt
lta href"index.html"gtltimg src"logo.gif"
width"10" height"10" alt"Homepagegtlt/agt
ltimg src"banner.gif " width"500"
alt"Navigation Banner" usemap"banner"gt ltmap
name"banner"gt ltarea href"home.html"
alt"Homepage" shape"rect" coords"0,0,110,24"gt lt
area href "services.html" alt"Services"
shape"rect" coords"111,0,215,24"gt
49
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)

ltinput type"image" src"logon.gif" alt"Logon"
name"logon"gt
ltimg src"spacer.gif" width"1" height"1" alt""gt
ltimg src"chart.gif" width"360" height"220"
alt"Growth of visually impaired internet users"
longdesc"chart.html"gt
50
Section 508 Standards (b)

• (b) Equivalent alternatives for any multimedia
  presentation shall be synchronized with the
  presentation.

51
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

52
Section 508 Standards (b)

• Basic Process
• Issues
• Formats - one or many?
• Scripted vs unscripted source
• Timeliness
• Commencement Ceremony
• Podcasting
• Text or PDF equivalent

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

54
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

55
Section 508 Standards (c)
The Good
The Bad
56
Section 508 Standards (c)
The Ugly
57
Section 508 Standards (d)

• (d) Documents shall be organized so they are
  readable without requiring an associated style
  sheet.

58
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
• Dont substitute styles for the structural
  elements of HTML like headings, paragraphs, and
  lists
• Example 1 Pure CSS
• Example 2 Transitional CSS

59
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

60
Section 508 Standards (e)

• (e) Redundant text links shall be provided for
  each active region of a server-side image map.

61
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

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

63
Section 508 Standards (f)

• Each ltareagt in the image map is assigned an "alt"
  attribute
• Example

ltimg src"navbar.gif" usemap"Navigation_Map"
alt"Navigation Bar"gtltmap name"Navigation_Map"gt
ltarea shape"rect" coords"157,14,239,31"
href"http//site.org" alt"Home"gt ltarea
shape"rect" coords"245,14,325,31"
href"http//site.org/news" alt"News"gt ltarea
shape"rect" coords"331,14,412,31"
href"http//site.org/services" alt"Services"gt
ltarea shape"rect" coords"417,14,501,31"
href"http//site.org/comments" alt"Comments"gt
ltarea shape"rect" coords"505,12,586,31"
href"http//site.org/search" alt"Search"gtlt/mapgt
64
Section 508 Standards (f)

• Another example with complex shapes

ltimg src"usamap.jpg" width"436" height"220"
border"0" usemap"usa_map" alt"Map of US
districts"gt ltMAP NAME"usa_map"gt ltAREA
SHAPEPOLY COORDS"5,11,32,15,41,41,40,76,67,75,12
4,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"gt ltAREA SHAPEPOLY
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"gt ... lt/MAPgt
65
Section 508 Standards (g)

• (g) Row and column headers shall be identified
  for data tables.

66
Section 508 Standards (g)

• Cells should be labeled appropriately
• If they contain pure data use lttdgt
• If they contain column or row header titles use
  ltthgt
• ltthgt cells make the header stand out and they can
  be identified by assistive technology
• Format ltthgt cells with styles
• Use the ltcaptiongt tag and "summary" attribute to
  further enhance table accessibility

67
Section 508 Standards (g)
lttable border"1" cellpadding"0"
summary"Todays lunch menu showing salad,
entree and dessert."gt   ltcaptiongtToday's
Lunchlt/captiongt lttrgt     ltthgtSaladlt/thgt
lttdgtCaesar lt/tdgt lt/trgt lttrgt
ltthgtEntreelt/thgt lttdgtChicken Divanlt/tdgt
lt/trgt    lttrgt ltthgtDessertlt/thgt
lttdgtChocolate Mousselt/tdgt lt/trgt lt/tablegt
68
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.

69
Section 508 Standards (h)

• Data cells (lttdgt) must be associated with
  appropriate column and row headers cells (ltthgt)
  to give them meaning
• Methods
• scope attribute
• id and headers attributes
• axis attribute (which we wont address)

70
Section 508 Standards (h)
scope method (simple table)
lttrgt ltth scope"row" gtwilmalt/thgt
lttdgt10-6lt/tdgt lttdgt10-6lt/tdgt lttdgt9-5lt/tdgt
lttdgt9-5lt/tdgt lt/trgt lttrgt ltth
scope"row" gtFredlt/thgt lttdgt10-6lt/tdgt
lttdgt10-6lt/tdgt lttdgt10-6lt/tdgt lttdgt10-6lt/tdgt
lt/trgt lt/tablegt
lttable summary"Schedulegt lttrgt
ltthgtnbsplt/thgt ltth scope"col" gtSpringlt/thgt
ltth scope"col" gtSummerlt/thgt ltth
scope"col" gtAutumnlt/thgt ltth scope"col"
gtWinterlt/thgt lt/trgt lttrgt ltth scope"row"
gtBettylt/thgt lttdgt9-5lt/tdgt lttdgt10-6lt/tdgt
lttdgt8-4lt/tdgt lttdgt7-3lt/tdgt lt/trgt
71
Section 508 Standards (h)
scope method (more complex)
lttablegt lttrgt ltthgtnbsplt/thgt ltth
colspan"2" scope"col"gtWinterlt/thgt ltth
colspan"2" scope"col"gtSummerlt/thgt lt/trgt
lttrgt ltth gtnbsplt/ th gt ltth scope"col"
gtMorninglt/thgt ltth scope"col"
gtAfternoonlt/thgt ltth scope"col"
gtMorninglt/thgt ltth scope"col"
gtAfternoonlt/thgt lt/trgt
lttrgt ltth scope"row"gtWilmalt/thgt
lttdgt9-11lt/tdgt lttdgt12-6lt/tdgt
lttdgt7-11lt/tdgt lttdgt12-3lt/tdgt lt/trgt lt/tablegt
72
Section 508 Standards (h)
id/header method (complex)
73
Section 508 Standards (h)
lttable border"1"gt ltcaptiongtTravel Expense
Reportlt/captiongt lttrgt ltthgtlt/thgt ltth
id"c2"gtMealslt/thgt ltth id"c3"gtHotelslt/thgt
ltth id"c4"gtTransportlt/thgt lttd
id"c5"gtsubtotalslt/tdgt lt/trgt lttrgt ltth
id"r2"gtSan Joselt/thgt lttdgtlt/tdgt
lttdgtlt/tdgt lttdgtlt/tdgt lttdgtlt/tdgt lt/trgt
lttrgt lttd id"r3" gt25-Aug-97lt/tdgt lttd
headers"c2 r2 r3"gt37.74lt/tdgt lttd headers"c3
r2 r3"gt112.00lt/tdgt lttd headers"c4 r2
r3"gt45.00lt/tdgt lttdgtlt/tdgt lt/trgt ... lttrgt
ltth id"r10"gtTotalslt/thgt lttd headers"c2
r10"gt196.27lt/tdgt lttd headers"c3
r10"gt442.00lt/tdgt lttd headers"c4
r10"gt162.00lt/tdgt lttd headers"c5
r10"gt800.27lt/tdgt lt/trgt lt/tablegt
74
Section 508 Standards (i)

• (i) Frames shall be titled with text that
  facilitates frame identification and navigation.

75
Section 508 Standards (i)

• Dont 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 ltframegt elements
• All pages referenced in a frameset should have a
  meaningful lttitlegt in their ltheadgt
• Include a ltnoframesgt element to provide content
  to browsers that do not support frames

76
Section 508 Standards (i)
ltframeset rows",80" cols"" framespacing"0"
frameborder"yes" border"0"
bordercolor"000033"gt ltframeset
cols"150," frameborder"NO" border"0"
framespacing"0"gt ltframe
src"navigation.html" name"navigationFrame"
scrolling"no" noresize
title"Navigation Frame"gt ltframe
src"content.html" name"contentFrame"
title"Content Frame"gt lt/framesetgt ltframe
src"banner.html" name"bottomFrame"
frameborder"yes" scrolling"NO"
noresize bordercolor"0000EE" title"Banner
Frame" gt lt/framesetgt ltnoframesgt Your browser
doesn't support frames. Please go lta
href"frameless.html"gtherelt/agt for a frame
free version of the page. lt/noframesgt
77
Section 508 Standards (i)
78
Section 508 Standards (i)
ltheadgt ... lttitlegtNavigation
Framelt/titlegt... lt/headgt ltbodygt...
ltheadgt ... lttitlegtMain Content Framelt/titlegt
... lt/headgt ltbodygt...
ltheadgt ... lttitlegtBanner Framelt/titlegt
... lt/headgt ltbodygt...
79
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.

80
Section 508 Standards (j)

• Flickering images or text can cause problems for
  people with photosensitive epilepsy
• Example CAUTION! Anyone sensitive?

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

82
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

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

84
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

85
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

86
Section 508 Standards (l)

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

87
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).

88
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

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

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

91
Section 508 Standards (n)

• Use the ltlabelgt 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
  ltlabelgt 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 ltfieldsetgt and ltlegendgt to group input
  elements

92
Section 508 Standards (n)

• Before

ltformgt lttablegt lttrgt lttdgtltemgtFIRST
NAME lt/emgtlt/tdgt lttdgtltinput type"text"
name"firstname"gt lt/tdgt lt/trgt lttrgt
lttdgtltemgtLAST NAME lt/emgtlt/tdgt lttdgtltinput
type"text" name"lastname"gt lt/tdgt lt/trgt
lt/tablegt ltpgtltinput type"submit"
value"submit"gtlt/pgt lt/formgt
93
Section 508 Standards (n)

• After

ltformgt ltfieldsetgt ltlegendgtCustomerlt/legendgt
ltpgtltlabel for"first"gt First
Namelt/labelgt ltinput type"text"
name"firstname" id"first"gtlt/pgt ltpgtltlabel
for"last"gt Last Namelt/labelgt ltinput
type"text" name"lastname" id"last"gtlt/pgt
lt/fieldsetgt ltpgtltinput type"submit"
value"submit"gtlt/pgt lt/formgt
94
Section 508 Standards (n)

• Checkboxes

ltfieldsetgt ltlegendgtSelect your pizza
toppingslt/legendgt ltinput id"ham"
type"checkbox" name"toppings" value"ham"
/gt ltlabel for"ham"gtHamlt/labelgtltbr /gt ltinput
id"pepperoni" type"checkbox" name"toppings"
value"pepperoni" /gt ltlabel for"pepperoni"gtPepper
onilt/labelgtltbr /gt ltinput id"mushrooms"
type"checkbox" name"toppings" value"mushrooms"
/gt ltlabel for"mushrooms"gtMushroomslt/labelgtltbr
/gt ltinput id"olives" type"checkbox"
name"toppings" value"olives" /gt ltlabel
for"olives"gtOliveslt/labelgt lt/fieldsetgt
95
Section 508 Standards (n)

• Radio Buttons

ltfieldsetgt ltlegendgtChoose a shipping
methodlt/legendgt ltinput id"overnight"
type"radio" name"shipping" value"overnight"
/gt ltlabel for"overnight"gtOvernightlt/labelgtltbr
/gt ltinput id"twoday" type"radio"
name"shipping" value"twoday" /gt ltlabel
for"twoday"gtTwo daylt/labelgtltbr /gt ltinput
id"ground" type"radio" name"shipping"
value"ground" /gt ltlabel for"ground"gtGroundlt/labe
lgt lt/fieldsetgt
96
Section 508 Standards (n)

• Select list

ltlabel for"favcity"gtChoose your favorite
city?lt/labelgt ltselect id"favcity"
name"select"gt ltoption value"1"gtAmsterdamlt/option
gt ltoption value"2"gtBuenos Aireslt/optiongt ltoption
value"3"gtDelhilt/optiongt ltoption value"4"gtHong
Konglt/optiongt ltoption value"5"gtLondonlt/optiongt lto
ption value"6"gtLos Angeleslt/optiongt ltoption
value"7"gtMoscowlt/optiongt ltoption
value"8"gtMumbailt/optiongt ltoption value"9"gtNew
Yorklt/optiongt ltoption value"10"gtSao
Paulolt/optiongt ltoption value"11"gtTokyolt/optiongt lt
/selectgt
97
Section 508 Standards (n)

• Fieldsets can be nested and styled
• More information
• WebAIM
• Web Accessibility, Web Standards and Regulatory
  Compliance

98
Section 508 Standards (o)

• (o) A method shall be provided that permits users
  to skip repetitive navigation links.

99
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

100
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

lta href"content"gtSkip to page contentlt/agt
lta name"content"gtlt/agt
101
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
  doesnt take up screen real estate)

102
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

lta href"main" id"main" class"skip"gtSkip to
page contentlt/agt CSS a.skip position absolute
left -1000em width 20em
103
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.

104
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

105
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

106
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

107
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

108
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

109
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

110
Let's Evaluate Some Pages!
111
Special cases PDF, Flash and AJAX
112
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

113
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

114
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

115
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

116
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

117
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

118
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

119
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

120
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

121
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

122
Designing Accessible Web Sites

• Rick Hill, Webmaster
• College of Engineering