Yahoo! User Interface Blog

Happy Holidays from the YUI Team

The YUI Team. From Left: Satyen Desai, Georgiann Puckett, Nate Koechley, Lucas Pettinati, Adam Moore, Douglas Crockford, Thomas Sha (behind the sign), Luke Smith, Matt Sweeney, Jenny Donnelly, and Dav Glass.

From everyone on the YUI team here at Yahoo, and from the extended family of frontend engineers at Yahoo that contribute to the project in so many ways, happy holidays to you. We hope the new year brings you happiness and serenity and new opportunities to challenge yourself both online and off.

2008 promises to be a fascinating year for projects like YUI, for companies like ours (and probably yours), and for the internet at large. We all look forward to sharing with you our thoughts about what’s happening here on YUIBlog and learning from you in turn in the comments, on your own blogs, in the YUI community forum, and at the various conferences and events throughout the world where our paths cross.

In the meantime, we wish you all a most relaxing and refreshing respite from making pixels do what they’re told. See you in 2008.

-Eric, Adam, Dav, George, Jenny, Luke, Matt, Nate, Satyen, Thomas, Todd

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Using WAI-ARIA Roles and States with the YUI Menu Control

Image of Victor Tsaran by Stephen Woods; image of Todd Kloots by Sandy Leung. Used by kind permission.

About the Authors: A new YUI example demonstrates how to use the WAI-ARIA Roles and States with YUI’s Menu Control. In this article, YUI Menu author Todd Kloots and Yahoo! accessibility guru Victor Tsaran introduce the WAI-ARIA Roles and States, explain how they dovetail with Menu, and provide a detailed account of the user experience with two different screen readers.

What are WAI-ARIA Roles and States?

Developed by IBM, and adopted by the W3C, the WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) Roles and States provide a means of making DHTML widgets and content accessible to assistive technologies such as screen readers. Much as CSS can be used to completely change the visual presentation of an HTML element, the WAI-ARIA Roles and States can be used to transform how HTML elements are presented to users of assistive technologies.

How it works

Implemented as a set of HTML attributes, the WAI-ARIA Roles and States bridge the gap between DHTML and assistive technology. For example: while CSS provides a means of painting a <ul> element as a menu, and JavaScript allows for the implementation of the expected menu-like behaviors for that <ul> element, a screen reader only communicates to the user that the menu is a <ul> element. Therefore, there is a gap between the developer’s intention for the role an HTML element is to play as a DHTML widget and how that widget is presented to a user of assistive technology. The WAI-ARIA Roles and States close this gap, allowing the developer to accurately communicate the role an HTML element is to play in the scope of a DHTML widget. When an element has WAI-ARIA Roles and States applied, a screen reader will announce its role and current state when it is focused. This allows <ul> elements to be presented as menus, <div> elements to be presented as modal dialogs, etc.

The value of a DHTML Library

The application of the WAI-ARIA Roles and States alone does not make a widget accessible. It it is still up to the developer to implement the mouse and keyboard functionality that the user expects for the role applied to a given widget. For this reason, a DHTML widget library can be helpful in that the nitty gritty of implementing the correct keyboard and mouse behaviors is done for you. Such is the case with the YUI Menu library. The YUI Menu implements all of the expected menu-like keyboard and mouse behaviors, so all the developer needs to do is apply the WAI-ARIA Roles and States.

Applying Roles and States to a YUI Menu

The WAI-ARIA Roles and States can be applied to a YUI Menu instance regardless of wether it is built using existing markup on the page, or entirely through JavaScript. However, since the WAI-ARIA Roles and States depend on Menu’s JavaScript-based keyboard functionality, it follows that the attributes representing the WAI-ARIA Roles and States only be applied via JavaScript. This progressive enhancement strategy ensures the best possible user experience by only applying WAI-ARIA Roles and States when the browser technologies required to support them (in this case, CSS and JavaScript) are available.

When applying the attributes representing the WAI-ARIA Roles and States to a Menu widget, it is best to do so via a “render” event listener. Waiting for a Menu’s “render” event to fire ensures that all of its DOM elements have been appended to the document and are available to be scripted. Roles and states are added to a Menu’s DOM elements via the setAttribute method and removed via the removeAttribue method. The following excerpt from the the Menu example demonstrates this technique.

/*
  Add the WAI-ARIA Roles and States to the MenuBar's DOM elements once it 
  is rendered.
*/

oMenuBar.subscribe("render", function () {

  /*
     Apply the "role" attribute of "menu" or "menubar" depending on the type of 
     the Menu control being rendered.
  */

  this.element.setAttribute("role", 
          (this instanceof YAHOO.widget.MenuBar ? "menubar" : "menu"));


  /*
     Apply the appropriate "role" and "aria-[state]" attributes to the label of
     each MenuItem instance.
  */

  var aMenuItems = this.getItems(),
    i = aMenuItems.length - 1,
    oMenuItem,
    oMenuItemLabel;
  

  do {

    oMenuItem = aMenuItems[i];


    /*
      Retrieve a reference to the anchor element that serves as the label for 
      each MenuItem.
    */

    oMenuItemLabel = oMenuItem.element.firstChild;


    // Set the "role" attribute of the label to "menuitem"

    oMenuItemLabel.setAttribute("role", "menuitem");


    // Remove the label from the browser's default tab order

    oMenuItemLabel.setAttribute("tabindex", -1);


    /*
      Optional: JAWS announces the value of each anchor element's "href"
      attribute when it recieves focus.  If the MenuItem instance's "url" 
      attribute is set to the default, remove the attribute so that JAWS 
      does announce its value.
    */

    if (oMenuItem.cfg.getProperty("url") == "#") {

      oMenuItemLabel.removeAttribute("href");
    
    }


    /*
      If the MenuItem has a submenu, set the "aria-haspopup" attribute to 
      true so that the screen reader can announce 
    */

    if (oMenuItem.cfg.getProperty("submenu")) {
    
      oMenuItemLabel.setAttribute("aria-haspopup", true);
    
    }

  }
  while (i--);
  

  /*
     Set the "tabindex" of the first MenuItem's label to 0 so the user can 
     easily tab into and out of the control.
  */

  if (this.getRoot() == this) {
  
    this.getItem(0).element.firstChild.setAttribute("tabindex", 0);
  
  }

});

The tables below lists the complete set of the menu-specific WAI-ARIA Roles and States and how they map to YUI Menu DOM elements.

Related ARIA Roles

Related ARIA States

Once the WAI-ARIA Roles and States are applied, there are a few tweaks that can be made to the YUI Menu’s DOM elements to further improve the user experience. For YUI Menu, the label of each MenuItem instance is represented in HTML as an anchor element (i.e. <a class="yuimenuitemlabel">), and in IE and Firefox, anchor elements are automatically part of the tab order. Having MenuItem labels in the tab order by default is important when JavaScript is disabled to ensure that the user can navigate a Menu via the keyboard with the tab key.

Since the YUI Menu code provides its own, desktop-like keyboard functionality when JavaScript is enabled, having every MenuItem label in the browser’s default tab order can be a nuisance to users screen readers. When navigating the document with the tab key, users of screen readers have to tab through every single MenuItem label in a Menu, regardless of whether or not they want to use the Menu control. This problem can be solved by setting the “tabindex” attribute of every MenuItem label but the first to a value of -1. Setting an element’s “tabindex” attribute to a value of -1 removes it from the browser’s default tab order, while maintaining its focusability via JavaScript. Since the YUI Menu keyboard functionality is activated when any MenuItem label has focus, with just one MenuItem label in the browser’s default tab order the Menu’s keyboard functionality will be preserved, while at the same time giving the user the ability to quickly tab into and out of the control.

Supported Browsers and Screen Readers

In order to take advantage of the WAI-ARIA Roles and States a user must have both a web browser and screen reader that support them. Firefox 1.5 was the first browser to support the WAI-ARIA Roles and States, and its implementation has evolved considerably in version 3, making it much easier for developers to apply the attributes representing roles and states. Both Microsoft and Opera are planing to implement the WAI-ARIA Roles and States in future versions of their browsers. The two major screen readers, Freedom Scientific’s JAWS and GW Micro’s Window-Eyes both support the WAI-ARIA Roles and States, JAWS as of version 7.1 and Window-Eyes as of version 5.5. Regardless of the screen reader you choose, it is necessary to turn off the virtual buffer in order to take advantage of the WAI-ARIA Roles and States.

Known Issues

The YUI Menu example that uses the WAI-ARIA Roles and States was tested using Firefox 3 beta along with JAWS 8 and 9, and Window-Eyes 6.1. The user experience with JAWS and Window-Eyes was almost identical, but there were a few small differences worth mentioning.

JAWS

Each MenuItem in a YUI Menu has a url property that can be used to specify a URL that it will automatically navigate to when clicked. Setting the “url” property, sets the “href” attribute of the anchor element that serves as the MenuItem’s label. If no value is specified for a MenuItem’s “url” property, the “href” attribute of the anchor element is set to “#” by default. When a role of “menuitem” is applied to a MenuItem’s anchor element, JAWS still reads the value of the “href” attribute, which can be undesirable if the value of the “href” is set to “#.” In such cases, it is best to just remove the “href” attribute.

One of the cool feature of JAWS is that when navigating a page’s DOM using the virtual buffer mode, if an element is selected that has one of the WAI-ARIA Roles applied, JAWS will automatically switch off the virtual buffer to take advantage of the WAI-ARIA Roles and States.

Window-Eyes 6.1

When the first item in a MenuBar receives focus, Window-Eyes doesn’t announce the role of “menubar,” but rather just the text label of the item along with its state.

YUI Menu and the disabled WAI-ARIA State

There is currently a minor issue with Menu and ARIA where the disabled state cannot be used with MenuItems. This is because if a MenuItem is disabled, Menu currently skips over it when navigating with the keyboard (a behavior based on menus in OS X). This keyboard behavior will be updated in a future release of YUI Menu so that disabled MenuItem instances can be properly communicated to assistive technology.

Resources

• The new YUI Menu example demonstrating the use of WAI-ARIA roles and states
• ARIA: Accessible Rich Internet Applications/Relationship to HTML FAQ
• Roles for Accessible Rich Internet Applications (WAI-ARIA Roles) Version 1.0
• States and Properties Module for Accessible Rich Internet Applications (WAI-ARIA States and Properties) Version 1.0
• Embedding Accessibility Role and State Metadata in HTML Documents
• Accessible DHTML
• Key-navigable custom DHTML widgets
• Firefox 3 Beta 2
• Freedom Scientific JAWS Screen Reader
• GW Micro Window-Eyes Screen Reader
• An Introduction to Screen Readers
• Making Ajax Work with Screen Readers

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

YDN Theater — Julien Lecomte: “High Performance Ajax Applications”

Julien Lecomte, author of the YUI Compressor and the YUI Browser History Manager, recently gave a talk at Yahoo on the creation of high-performance DHTML applications.

In this talk, Julien covers several major performance topics:

• Developing for high performance
• High performance page load
• High performance JavaScript
• High performance DHTML
• High performance layout and CSS
• High performance Ajax
• Performance measurement tools

Julien was kind enough to let us shoot video, and Ricky Montalvo from the Yahoo! Developer Network did the editing. I know Julien would love to hear your questions and feedback in the comments section.

• Download PowerPoint slides
• Slides on Slideshare

download (m4v)

In Case You Missed…

Some other recent videos from the YUI Theater series:

• Douglas Crockford: "The State of Ajax" (YUIBlog | .m4v download)
• Nate Koechley: "The YUI CSS Foundation" (Yahoo! Video | .m4v download)
• Bill Scott: "Designing the Rich Web Experience" (Yahoo! Video | .mp4 download)
• Steve Souders: “High Performance Web Sites: 14 Rules for Faster Pages” (Yahoo! Video | .m4v download)

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Creating Custom Modules with YUI Using the YUI Module Control

About the Author: Cyril Doussin is a web developer currently working for Yahoo! London where he has contributed, along with Stuart Colville, Ed Eliot and Ben Ward, to the new front-end code for the price comparison site Kelkoo. He enjoys playing with the YUI, microformats, Django, an old classical guitar and coffee machines.

Introduction

The Yahoo! User Interface Library ships with a few controls such as Calendar or Panel which allow a Javascript programmer to quickly add highly interactive functionality to a web site. As stated in the documentation:

The Container family of components is designed to enable developers to create different kinds of content-containing modules on the web. Module and Overlay are the most basic containers, and they can be used directly or extended to build custom containers. Also part of the Container family are four UI controls that extend Module and Overlay: Tooltip, Panel, Dialog, and SimpleDialog.

These four UI controls actually all extend Overlay, which itself extends Module. The YAHOO.widget.Module object provides a basic framework that you can use to create custom UI controls which follow the common header/body/footer paradigm. This isn’t the only pattern you can use in building YUI-based widgets, but it’s one I’ve used to good effect in my own projects.

If you would like to build a similar content-containing Control, YAHOO.widget.Module provides you with a good base for several reasons:

• the logic of your Control will have a flexible, event-driven, execution flow
• your code will be structured and easily maintainable
• you will inherently be able to have multiple, independant instances of your Control on the same page, without any code conflict occuring

This article looks at the process of extending YAHOO.widget.Module in order to build such a Control. Our example will be a potentially long list of contacts, which we will turn into a customisable, paginated list.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

YUI 2.4.1: Maintenance Release

In YUI 2.4.0, we updated the way the Event Utility “cleans up” events in its page unload handler. Regrettably, that change resulted in some events not being properly unloaded, which in turn resulted in IE-specific memory leaks in some YUI components (including the Menu Control and controls in the Container Family). Today’s release of YUI 2.4.1 rolls back that change; it introduces no further changes. All implementers on YUI 2.4.0 are encouraged to upgrade.

YUI 2.4.1 is available for download immediately.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Sample Chapter — Pro JavaScript Design Patterns by Ross Harmes and Dustin Diaz

Fellow Yahoo Ross Harmes and former Yahoo (current Googler) Dustin Diaz have collaborated on a new book from Apress, Pro JavaScript™ Design Patterns. As the title suggests, this volume focuses on the implementation of common object-oriented design patterns in the JavaScript language. Ross and Dustin “wanted to show programmers that JavaScript contains features on par with other high-level languages and is an object-oriented programming language in its own right.”

Ross, Dustin and their Apress editors were kind enough to let us share a chapter of the book here on YUIBlog:

• Chapter 9: The Flyweight Pattern — “[The Flyweight pattern is] most useful in
  situations where large numbers of similar objects are created, causing performance problems. This pattern is especially useful in JavaScript, where complex code can quickly use up all of the available browser memory. By converting many independent objects into a few shared objects, you can reduce the amount of resources needed to run web applications. The benefit of this can vary widely. For large applications that can potentially be used for days at a time without being reloaded, any technique that reduces the amount of memory used can have a very positive effect.”

For more on the design patterns covered in the book and information about where to buy it, check out the jsdesignpatterns.com website. The e-Book version is also available from Apress.

Congratulations to Dustin and Ross on getting this book done and contributing to the growing conversation about the role of design patterns in the JavaScript language.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the Wild for December 12th

YUI has been in the news a lot the past few weeks. Here are a few of the stories that have caught our attention since Nate’s last “In the Wild” post:

• Responding to the Charts Control: There were many responses to Josh Tynjala’s hybrid Flash-JavaScript YUI Charts Control that was part of the recent 2.4.0 release. Ryan Stewart (of Adobe and ZDNet) was among those noting the significance of tapping Flash within a mainstream JavaScript library: "From what I hear there is still a tremendous amount of resistance to Flash in the Ajax circles of big companies The fact that a major framework like YUI overcame that and chose to leverage Flash is a good sign. It’s also part of a trend. Dojo recently added Silverlight support to their graphics libraries. The various RIA technologies are starting to mix and the result will let people pull strengths from different pots to create the best possible experience for the user."
• Zimbra on YUI Compressor: Over at the Zimbra blog, Kevin Henrikson istalking about migrating to Julien Lecomte’s YUI Compressor for packing their JavaScript and CSS. "We read about the YUI Compressor on Ajaxian. The YUI Compressor is written in Java by Julien Lecomte, like ShrinkSafe it uses Rhino to tokenize, or parse the JavaScript. It achieves a higher level of compression that the Dojo compressor. One of the main reasons is that it will reuse the short tokens unlike ShrinkSafe which keeps an ever increasing counter. In our testing, it didn’t break our code and is careful around eval() so avoids a couple issues the ShrinkSafe compressor hit. Since it’s Java we can call it at run-time and compress Zimlets, for example, on-the-fly. The YUI Compressor also compresses CSS and we use that to help reduce the size of our CSS files that we deliver to the browser. In the end we still gzip both CSS and JavaScript to get the most compression we can. The use of YUI for JavaScript compression is part of Zimbra’s upcoming 5.0 release."
• Web Interface for the Iris Syntax Highlighter: Code-bloggers rejoice: Gustavo Duarte shared on the YUI community forum a web interface for the Iris syntax-highlighting project. Iris is incredibly cool: It supports syntax for 460 syntaxes, outputs W3C compliant XHTML, and (as the project page drolly notes) does "all this for 30% off the regular price of free." Gustavo notes that "there are a lot of YUI components in action: data table, panels, dialogs, tab view, color picker, auto complete (there are ~460 syntaxes), and so on. The page loads in ‘phases’ (based on common usage) so it ends up pretty lean and fast." There are several CSS themes to choose from for code output.
• Bookmarklet for Loading YUI: Gareth Rushgrove blogs about a bookmarklet he created to insert YUI or Dojo on any page you’re browsing: "I’ve put together a couple of bookmarklets which load YUI or Dojo from their respective content delivery networks and insert them into your current browser context. You can then play around with them in Jash or Firebug or any other Javascript console." Sounds like fun. You can grab the YUI bookmarklet here (drag to your bookmarks bar).
• Progressive Enhancement to the Rescue: Ever wonder if all your work on progressive enhancement is worth the trouble? David Walsh has a great example of something good he discovered at Yahoo! Sports when something bad was going on (something that prevented the Sports site’s JavaScript components from loading correctly). Because the team had built the site using solid progressive enhancement techniques, the functionality wasn’t disabled just because JavaScript wasn’t present. Here’s David’s conclusion: "The fantasy football part of this article should really be viewed as secondary. I hope this tale shows proves the importance of website usability. Using cool javascript frameworks like MooTools, YUI, Dojo, Prototype, etc. is a lot of fun, but not always functional. Without Yahoo maintaining page functionality for users without javascript, my user experience at Yahoo! would’ve been very negative. Instead, Yahoo earned my respect." Nice.
• Joe’s Goals: The Joe’s Goals website, written by Ian Smith, was an instant success back in 2006 when it launched, and Ian has updated with improved use of client-side richness. Rey Bango (of ExtJS) interviewed Ian for Ajaxian and Ian had this to say about his use of YUI in the new rev: "Since JG 1.0 there have been a lot of improvements made to the YUI. I’ve tried to rely as heavily as possible on those components this time around and cut out a lot of my own hacked together code. I’m taking better advantage of the panel and animation libraries as well as their connection library. With the connection library I benefit greatly from the ability to tag Ajax calls with specific arguments so I can capture the call backs and programmatically make page changes based on which requests succeeds or fails. The connection library is the best example of this I’ve seen of any Ajax Toolkit."
• Tabbed Content Widget for Blogs: Amanda at BloggerBuster posts a new TabView Widget for blogs based on Matt Sweeney’s YUI TabView Control. She provides a lengthy tutorial to help you get started. While you’re at it, take a look at Nick Bouton’s rounded corners for YUI TabView tutorial; that will help you get just the look you want for your tabs.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!