1 / 31

Better Accessibility with Fusebox 4

Better Accessibility with Fusebox 4. Sandra Clark slclark@shayna.com http://www.shayna.com. 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.

nam
Download Presentation

Better Accessibility with Fusebox 4

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Better Accessibility with Fusebox 4 Sandra Clark slclark@shayna.com http://www.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. Other countries have or are adopting and require adherence to either the WCAG or something similar. The United States isn’t Alone • 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 passed (38%) • Simply Web 2000 • 5 passed (2%) • pwWebSpeak • 50 passed (25%) • IBM Home Page Reader • 58 passed (28%) • Lynx • 182 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 UsableNet’s 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 that’s 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 don’t 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 aren’t 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

  15. Design to the 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. 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.

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

  20. Fusebox 4 and Accessibility • 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 CFC’s. • Makes design patterns like MVC easy! • With the new version of Fusebox 4, layouts are fully under the architect’s control. • Fully allows for separating presentation and content which are necessary for fully accessible and compliant web sites

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

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

  23. Standards Forcing DocType Declarations • HTML 4.x Strict • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML 4.01 Transitional • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • XHTML 1.0 Strict (no xml Declaration) • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • XHTML 1.0 Transitional (no xml Declaration) • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • Using an xml Declaration with XHTML will Force IE6 into Quirks Mode

  24. Layouts and Fusebox 4 • Content from a fuseaction can be captured into a content variable. <fuseaction name=“dosomething”> <do action=“otherfuseaction” contentvariable=“showme” /> </fuseaction> <fuseaction name=“otherfuseaction” > <include template=“act_dosomething” /> <include template=“dsp_showsomething” /> </fuseaction>

  25. Displaying content variables Many ways to display your content. Have a layout file in the fusebox.xml.cfm file. <globalfuseactions> <preprocess> </preprocess> <postprocess> <do action="layouts.default" /> </postprocess> </globalfuseactions>

  26. In lay_default. <cfoutput> <div id="main"> <div id="welcome">#showme#</div> </div> </cfoutput>

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

  28. Browser Stats 11/2001 – 11/2002

  29. 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 can’t be currently made accessible include: • invisible buttons and some specific form components: combo boxes, list boxes, and scroll bars.

  30. Recommendations and Resources • Web Sites • http://www.webstandards.org • http://www.alistapart.com • http://www.glish.com • FuseBox4 • http://beta.fusebox.org • 508 • http://www.access-board.gov/sec508/guide/index.htm • Bobby • http://bobby.watchfire.com/bobby/html/en/index.jsp

  31. Discovering Fusebox 4 (September 2003) Publisher - Techspedition Authors: John Quarto von-Tividar, Sandy Clark, Brian Kotek, Brian LeRoux, Perry Woodin 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 Recommendations and Resources

More Related