Ohlone College Web Team Blog

The Web Content Accessibility Guidelines 1.0 (WCAG 1) recommendations by the Web Accessibility Initiative (WAI) are vague in some areas. An indepdendent group of developers, the WCAG Samurai, has created an errata (or “corrections” - which I think of as “clarifications”) for WCAG 1 using direct language such as “must” and “do not” and “not required”. Good stuff! Straightforward and no-nonsense.

Review the introduction to the WCAG Samurai errata.

This is the INVALID code to embed a Picasa slideshow on your web page (<embed> is invalid):

<embed type="application/x-shockwave-flash"
src="http://picasaweb.google.com/s/c/bin/slideshow.swf"
width="288" height="192"
flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fohlonecollegephotos%2Falbumid%2F5162154032057469201%3Fkind%3Dphoto%26alt%3Drss"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

And, here is the VALID XHTML equivalent for the same slideshow as referenced above (using the <object> tag):

<object type="application/x-shockwave-flash"
data="http://picasaweb.google.com/s/c/bin/slideshow.swf"
width="288" height="192">
<param name="movie"
value="http://picasaweb.google.com/s/c/bin/slideshow.swf" />
<param name="flashvars"
value="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fohlonecollegephotos%2Falbumid%2F5162154032057469201%3Fkind%3Dphoto%26alt%3Drss" />
<param name="pluginspage"
value="http://www.macromedia.com/go/getflashplayer" />
</object>

And here is the slideshow!

Slideshow of photos of Ohlone’s new Newark Center campus.

Using a valid <object> tag is apparently complex. Here are some solutions. Your mileage may vary.

Valid XHTML YouTube embed code generator - “This free tool will create a valid XHTML embed code for any YouTube video. The code YouTube shows on the embed field is not valid XHTML! However, you can simply use this simple tool to make it Valid XHTML 1.0 Transitional.”

Embedding YouTube Videos as Valid XHTML 1.0

<object type="application/x-shockwave-flash"
style="width:425px; height:350px;"
data="http://www.youtube.com/v/ulakMBcqyPo">
<param name="movie" value="http://www.youtube.com/v/ulakMBcqyPo" />
<param name="wmode" value="transparent" />
</object>

XHTML Validation - Director/Shockwave

<object type="application/x-director"
data="Shockwaver.dcr" width="320" height="240">
<param name="src" value="loader.dcr" />
<param name="sw1" value="Shockwaver.dcr" />
<param name="swRemote" value="swSaveEnabled='false'
swVolume='true'
swRestart='false'
swPausePlay='false'
swFastForward='false'
swContextMenu='false' "/>
<param name="swStretchStyle" value="none" />
<img src="shockwaver_not.gif" width="320" height="240" alt="No shockwave?!" />
</object>

XHTML <object> Tag, Not <applet> Tag - Panoramas

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" height="196" width="460" >
<param name="codebase" value="java" />;
<param name="code" value="panorama" />;
<param name="panorama" value="http://www.veiled-chameleon.com/images/hikes/grandeur-peak/grandeur-peak-full-circle.jpg" />;
<!--[if !IE]> –>;
<object codebase=”java” classid=”java:panorama.class” height=”196″ width=”460″ >;
<param name=”panorama” value=”http://www.veiled-chameleon.com/images/hikes/grandeur-peak/grandeur-peak-full-circle.jpg” />;
</object>
<!– <![endif]–>
</object>

Spry is Adobe’s version of AJAX.  It is included in Dreamweaver CS3.

• Spry Team blog
  • Spry 1.6 Dreamweaver CS3 Update
• Spry 1.6 improvements and standards
• Spry Best Practices - documentation, standards, demo and samples

Ah ha! A server-based way to hide email addresses from harvesting robots! Uses Apache 2, mod_rewrite, PHP 4 or later.

Graceful E-Mail Obfuscation, by Roel Van Gils, A List Apart, November 6, 2007.

Contact your web server administrator or use .htaccess.

Common ASCII Text file extensions to set file transfer programs to use (yes, there are more but these are the extensions I use):

• .c
• .cfm
• .cgi
• .conf
• .config
• .css
• .dwt
• .htaaccess
• .htm
• .html
• .inc
• .js
• .lbi
• .log
• .php
• .pl
• .pm
• .shtm
• .shtml
• .tmpl
• .txt
• .xml

I’ve been using Xenu Link Sleuth (free) to check for broken links. I also use the output report to review web page titles (which are displayed as links in most search engines) and to produce a list of valid links for use with the batch mode of the WDG HTML Validator (100 URLs at a time).

I knew W3C had an Markup Validator and a CSS Validator, but was unaware of the W3C Link Checker until now.

List of helpful links to make your Flash movies accessible - very important especially for higher education and government institutions!

• WebAIM - Creating Accessible Flash Content
  • Creating Accessible Macromedia Flash Content
  • Creating Text Equivalents for Flash Content
  • Keyboard Accessibility and Reading Order
  • Flash Accessibility Techniques and Considerations
• Flash Help (inside your Flash application) > Flash Tutorials > Basic Tasks: Create Accessible Flash Content
  • Make your document accessible to screen readers
  • Provide a document title and description
  • Provide a title and description for instances
  • Specify that screen readers ignore elements in your document
  • Change static text to dynamic text for accessibility
  • Control the tab order and reading order
• Flash Help (inside your Flash application) > Using Flash > Creating Accessible Flash Content
  • Worldwide accessibility standards
  • Macromedia Flash Accessibility web page
  • Understanding screen reader technology
  • Using Flash to enter accessibility information for screen readers
  • Viewing and creating tab order and reading order
  • About animation and accessibility for the visually impaired
  • Using accessible components
  • Creating accessibility with ActionScript
  • Accessibility for hearing-impaired users
  • Testing accessible content