HTML5 – quick notes from The Chronicles of Web Standard III – The Voyage of the HTML5

I went to the The Chronicles of Web Standard III – The Voyage of the HTML5 presentation by Silicon Valley Web Builder last night. Here are some quick notes I took before my battery died.
HTML5
Please note: I am far from an expert on HTML5 and welcome any comments and/or corrections to the following notes.

The speakers were

  • Ben Galbraith, Co-founder at Ajaxian.com
  • Brad Neuberg, Developer at Google
  • Chet Haase, Adobe Flex SDK team member
  • Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

  • CSS3
  • webGL
  • geolocation
  • web workers
  • web storage
  • web sockets
  • canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

Related articles by Zemanta

Make Flash accessible to screen readers in transparent window mode

The detour around flash for accessibility

Yahoo! Tech’s home page features a flash-based media space that highlights stories, comparisons, buying guides, blog posts, and more. Making this accessible required a bit of trial and error, but the solution was simple and can be used by sites everywhere.

Step 1. Inserting the flash object

The site uses the Unobtrusive Flash Object script by Bobby van der Sluis. This script checks to see if the user has JavaScript enabled and the correct version of Flash in their browser. If so, it inserts the code required to display the movie. If the user doesn’t have the requirements, a default set of information is presented.

This script cures the validation errors caused by the normal flash insertion code. Theoretically, it would also allow you to provide good, accessible content to those not using JavaScript and Flash enabled browsers, i.e. screen readers and search robots.

Window Mode Transparency conflict

However, we had an issue with the flash movie conflicting with a DHTML drop down menu. The flash movie wanted to have the highest z-index and thus sat on top of the menu. To cure this problem, we added the attribute wmode:transparent. This tells the flash movie: your window mode is transparent, you are not the boss, go sit in the back and let others take center stage.

This cured the overlapping issues but negated the accessibility features that we had hoped for. User testing with a screen reader was disheartening. Screen readers ignore flash movies with window mode transparent. They want to do what’s best for the user and ignore the little guy in the back corner.

We began searching for answers on the flash and accessibility forums and couldn’t find a way to get screen readers to read a flash movie with wmode:transparent. It simply isn’t possible at this time.

Step 2. Time for a detour

The U.F.O. enabled page features a div with default text. This is where we originally duplicated the content being fed via xml to the flash movie. Our hope was that the screen readers would ignore the flash and read the HTML content in this div. When this wasn’t possible, we literally thought outside the box.

The U.F.O. script uses visibility:hidden to hide the default box. We tried using text-indent and negative margins instead, but it still was not available to the screen reader.

The default div now has your standard non-optimized warning text: “For the best experience, please enable JavasScript and download the latest version of Flash….

screen with css disabled - both versions viewable
We then created a new div (id=”alternatecontent”) that features the content from the flash movie. It is pushed off screen by using absolute positioning. This hides the duplicated content from the visual design while providing the content to those without the visual abilities.

We’re satisfying two audiences with just a little extra code. Add the extra div for your screen reader audience (…and search engines!) when using wmode:transparent in your Flash movie. You’ll create valid, visually dynamic, and accessible pages.

Listen to the Yahoo! Tech media space as read by a screen reader (.mp3)