Accessibility and 508 easily with ColdFusion

1
Accessibility and 508 easily with ColdFusion

• Sandra Clark
• slclark_at_shayna.com

2
Overview

• Accessibility and Speech Browsers
• 508 and WAI
• Survey
• Stop Designing for the Browser
• The Good and the Bad of Fusebox
• A Better Way
• Exceptions to the Rule

3
Why are Accessible Web Sites Important

• Accessible Web Sites are important for all types
  of web sites.
• 15 30 of the general population have
  functional limitations that can affect their
  ability to use technology products
  (http//isoc.org/briefings/002)
• Accessibility helps those who
• Cannot use a mouse (only have access to
  keyboards)
• Are blind
• Have other vision impairments
• Are Deaf
• Are Color Blind.

4
What is 508 and WAI

• Section 508 of the Rehabilitation Act Amendment
  of 1998 requires that US Federal Agencies and
  covered entities must make their electronic
  technology and information accessible to people
  with Disabilities
• WAI (Web Accessibility Initiative) by the World
  Wide Web Consortium (W3C)
• WCAG (Web Content Accessibility Guidelines)
• Deals with the authoring of web standards.

5
The United States isnt Alone

• Other countries have or are adopting and require
  adherence to either the WCAG or something similar.

• Ireland
• Italy (WCAG)
• Luxemburg
• Netherlands
• New Zealand
• Portugal (WCAG)
• Singapore
• Spain (WCAG)
• Sweden
• United Kingdom (WCAG)

• Australia (W3C WCAG)
• Canada (W3C WCAG Priority 1 and 2 checkpoints)
• EU (W3C WCAG Priority 1)
• Belgium
• Denmark
• Finland
• France (WC3 WCAG)
• Germany
• Greece
• Japan

6
Survey

• In December 2002, I surveyed the entry home pages
  of 204 Federal Cabinet and their Departments.
• These are the entities REQUIRED to comply with
  Section 508
• Validated with a number of readers
• Bobby (Online 508 and WAI Validator)
• Simply Web 2000 (Free Speech Browser)
• pw Web Speak (Free, discontinued Speech Browser)
• IBM Home Page Reader (Speech Browser)
• Lynx (Text Only Browser)

7
Survey Results

• Out of 204 Web Sites Surveyed
• Bobby Approved
• 77 pages passed (38)
• Simply Web 2000
• 5 pages passed (2)
• pwWebSpeak
• 50 pages passed (25)
• IBM Home Page Reader
• 58 pages passed (28)
• Lynx
• 182 pages passed (89)

8
GUESS WHAT?

• LYNX IS NOT A Speech Browser!
• Having something readable in Lynx is not
  indicative that it will be readable in a Screen
  reader.

9
Validating Accessibility

• Validating Accessibility is like Validating a Web
  Site.
• Use Validation Testing
• Bobby or UsableNets Lift
• Different Speech Browsers
• But who has the time and money to test to make
  sure it works everywhere?
• This is what happens when people design sites for
  the letter of the law rather than the spirit.

10
Designing to the letter of the law

• MEANS
• The HTML passes Bobby.
• It works in the one screen reader you tested for
  and thats the one you tell everyone to use.
• If you get sued, you can point to the above two
  points and hope its enough for the judge.

11
Designing to the Spirit of the Law

• MEANS
• That the content of your web site or application
  can be read and understood no matter what type of
  browser is being used.
• That all disabled persons have the same type of
  access to your web site as able bodied people.
• You dont have to worry about convincing a judge
  because there is no reason for a lawsuit based on
  accessibility issues.

12
How can we do that?

• JavaScript is only used for nice-to-haves and the
  absence of it does not diminish the usability of
  your site.
• This covers DHTML. If you must have a DHTML menu
  have a link at the top letting people use another
  menuing system.
• Plug ins must be accessible or there must be
  equivalent content in an accessible format.
• The most important thing we can do is

13
Stop Designing to the Browser

• Remember the browser wars?
• Marquee and Blink?
• I remember signing a petition asking Netscape and
  MS to make their browsers work with standards
• They did (MS IE 6, Netscape 7 and Opera 6) are
  compliant.
• Guess What?
• We arent taking advantage of this
• We still design for the browser.
• DESIGN TO THE STANDARD

14
Design to the Standards

• What "Standards"?
• When we speak about "standards" for the Web, we
  mean
• Structural Languages
• XHTML
• Extensible Hypertext Markup Language 1.0 and 1.1
• http//www.w3.org/TR/xhtml1
• http//www.w3.org/TR/xhtml11
• XML
• Extensible Markup Language 1.0
• http//www.w3.org/TR/2000/REC-xml-20001006
• Presentation Languages
• CSS
• Cascading Style Sheets Levels 1 and 2
• http//www.w3.org/TR/REC-CSS1
• http//www.w3.org/TR/REC-CSS2
• as well as emerging standards, such as those for
  television and PDA based browsers.

15
Design to the Standards

• What "Standards (cont)"?
• Presentation Languages
• CSS
• Cascading Style Sheets Levels 1 and 2
• http//www.w3.org/TR/REC-CSS1
• http//www.w3.org/TR/REC-CSS2
• as well as emerging standards, such as those for
  television and PDA based browsers.

16
Why design to the standard

• Designing and building with these standards
  simplifies and lowers the cost of production,
  while delivering sites that are accessible to
  more people and more types of Internet devices.
  Sites developed along these lines will continue
  to function correctly as traditional desktop
  browsers evolve, and as new Internet devices come
  to market.
• http//www.webstandards.org

17
Using Nested Tables for Layouts

• Most of us use tables for layout.
• This is not what tables in HTML were designed for
• By using tables for layouts, we are not only
  limiting ourselves, but we are limiting the ways
  in which our work can be utilized.
• Tables are limiting, the web is designed to be
  limitless.

18
Are the newer browsers truly compliant?

• Most Newer Browsers are compliant
• IE6, NS7, IE5Mac, Opera 6, Konqueror (Linux), IBM
  Web Browser
• When writing to the standard, make sure you tell
  the browser to go into standards mode though.
• In order to deal with both old tag soup written
  to old browser quirks and new standards-compliant
  pages, Mozilla (and Mozilla-based browsers, such
  as Netscape 6, Netscape 7, Chimera, Galeon and
  Beonex), Mac IE 5 and Windows IE 6 have two
  layout modes. In one mode the layout engine
  attempts to comply with W3C Recommendations. In
  the other mode the layout engine tries to mimic
  old browsers. In Mozilla these modes are known as
  the Standards mode and the Quirks mode
  respectively

19
How to force Browsers into Standards Mode

• Mozilla, Mac IE 5 and Windows IE 6 all use
  doctype sniffing in order to decide between the
  standards mode and the quirks mode. This means
  that the mode is picked based on the document
  type declaration (or the lack thereof) at the
  beginning of an HTML document.
• Full list can be found at
• http//www.hut.fi/hsivonen/doctype.html

20
Standards Forcing DocType Declarations

• HTML 4.x Strict
• "http//www.w3.org/TR/html4/strict.dtd"
• HTML 4.01 Transitional
• Transitional//EN" "http//www.w3.org/TR/html4/loos
  e.dtd"
• XHTML 1.0 Strict (no xml Declaration)
• Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"
• XHTML 1.0 Transitional (no xml Declaration)
• Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"
• Using an xml Declaration with XHTML will Force
  IE6 into Quirks Mode

21
Separating Content from Presentation

• Content is the most important aspect of the web.
• What you get is more important than how you see
  it.
• Separating Content from Presentation gives you
• Increased accessibility
• Improved Performance
• Easier initial work and easier maintenance.

22
CSS and Positioning

• By using Cascading Style Sheets for positioning
  and design, we are truly separating content from
  presentation.
• All Major Browsers (IE 6, Netscape 7, Opera 6)
  support CSS-2 (which includes Positioning).
• XHTML requires CSS for all presentation in its
  strict format.
• CSS-2 allows different style sheets to be
  employed for different media.
• Change the way your page looks on a printer
  without changing the page.

23
Fusebox and Nested Layouts BAD

• The Fusebox philosophy encourages separation of
  business logic from presentation logic which is
  good.
• With CFMX, Macromedia is also encouraging
  separation of the two tiers with CFCs.
• However, Fusebox 3 incorporates Nested Layouts
  which by design encourages Nested Tables.

24
What's good about Fusebox

• Everything BUT Nested Layouts!

25
Keeping the good, booting the bad

• Dont let Fusebox handle the layouts
• Capture the layouts into Streams

26
Problems with this technique

• Need to design your circuits with layout in mind
  rather than functionality.
• Its a kludge to get around an architectural
  problem rather than simply a solution.
• The top level circuit cant have any real code in
  it.

27
Finding a better way

• Find a technique that
• allows me to capture my output streams when I
  want to.
• allows me to design my applications based on
  functionality rather than the output.
• allows me to separate out my business logic from
  my presentation logic from my content.
• THE SOLUTION WAS OUT THERE

28
FUSEQ!

• Introduced by John Quarto-vonTivadar in May 2002
  at CF North in Toronto.
• A derivative of the Fusebox 3 core file which,
  while fully compliant with FB3, also has exciting
  and necessary enhancements which allow more
  flexibility in design.
• Makes design patterns like MVC easy!
• Fully allows for separating presentation and
  content which are necessary for fully accessible
  and compliant web sites.
• Precursor to FuseBox4 xml Being presented at
  CFUN03 in June
• If you know FuseQ FB4 xml is a snap.

29
What about Netscape 4?

• Browser Statistics from thecounter.com shows that
  Netscape usage has gone from 5.4 usage in
  11/2001 to 2.3 in 11/2002
• Netscape and MSIE 4 and older editions do not
  support CSS 2.

30
Browser Stats 11/2001 11/2002
31
What about Flash?

• Macromedia is pushing CFMX and Flash MX as a Rich
  User Interface.
• Flash MX does have some accessibility built in.
• Flash Player 6 now uses the Microsoft Active
  Accessibility (MSAA) API to exchange information
  with a web browser that supports MSAA, which
  channels information to and from assistive
  technologies that support MSAA.
• Today, the only screen reader that allows users
  to interact with Flash content is Windows-Eyes
  from GW Micro.
• Objects that cant be currently made accessible
  include
• invisible buttons and some specific form
  components combo boxes, list boxes, and scroll
  bars.

32
Recommendations and Resources

• Web Sites
• http//www.webstandards.org
• http//www.alistapart.com
• http//www.glish.com
• FuseQ
• http//www.techspedition.org
• 508
• http//www.access-board.gov/sec508/guide/index.htm
  
• Bobby
• http//bobby.watchfire.com/bobby/html/en/index.jsp
  

33
Recommendations and Resources

• Books
• Constructing Accessible Web Sites
• Publisher Glasshaus
• Author Jim Thatcher
• Cascading Style Sheets Separating Content from
  Presentation
• Publisher Glasshaus
• Author Owen Briggs
• Core CSS
• Publisher Prentice Hall
• Author Keith Schengili - Roberts