• Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • Tutorials
    • API Docs
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • YUI 2
    • YUI Compressor
    • YUI Doc »
    • YUI Builder
    • YUI PHP Loader
    • YUI Test
    • YUI Website

Blog: Archive for October, 2008

|
Newer Entries »

ARIA Plugins for YUI Widgets

For YUI 2.6, a handful of widgets have examples illustrating how to use new YUI ARIA plugins. These
plugins make it easy to use the
WAI-ARIA Roles and States to make each widget
more interoperable with assistive technologies (AT), such as screen readers, and in turn,
more accessible to users with disabilities. For example, the following video illustrates how the
YUI ARIA Plugin for Carousel improves the user experience of the new Carousel widget for users of
screen readers:


Using the Carousel ARIA Plugin @ Yahoo! Video

Using the ARIA Plugins

Using the YUI ARIA Plugins is easy. Simply include the source file(s) for the ARIA plugin after the
widget source file(s) as indicated on the widget’s landing page. That’s it. Currently, the source
files for each plugin are available in the
YUI 2.6 package on SourceForge, and can
also be downloaded from the YUI blog
sandbox
. In a future release of YUI, the plugins will be served from our CDN.

Browser Support

All YUI ARIA Plugins require the user’s browser and AT support the WAI-ARIA Roles and States.
Currently only Firefox 3 and
Internet Explorer
8
have support for ARIA and are supported by several screen readers for
Windows that also offer ARIA support. Opera also has support for ARIA as of version 9.5, but
unfortunately isn’t supported by any screen readers. For this reason the YUI ARIA Plugins are only
enabled by default for Firefox 3 and IE 8. To enable the ARIA plugin for other browsers, simply the set
the usearia configuration property to true. For example:

var oMenu = new YAHOO.widget.Menu("menu-1", { usearia: true });

Why Plugins?

Rather than integrate ARIA directly into a widget, we chose to deliver this functionality as a
plugin for two main reasons:

  • Performance: We’ve got many extremely byte-conscious users. And while we certainly
    don’t want users opting out of a more accessible interface, we need to be respectful of those
    developers that need to make tough choices on KB weight.
  • The right fit: For most widgets (like Menu) there is an ARIA role that is a perfect match.
    For some, like Carousel, or AccordionView, there either isn’t a clear match, or there are several
    different roles that could work depending on the circumstances. For widgets that fall into this
    category we can offer several different ARIA plugins that meet the desired use case.

Widgets with ARIA Plugin Support

The following table illustrates which YUI widgets currently have an ARIA plugin, along with their
corresponding WAI-ARIA Roles.

Widget ARIA Role(s)
Button checkbox, radio, radiogroup
Carousel toolbar, button, listbox, option
Container dialog, alertdialog, tooltip
Menu menu, menubar, menuitem
TabView tablist, tab, tabpanel

Screen Reader Testing

We’d love the community to help us test these plugins, find bugs and suggest enhancements. As mentioned above, each plugin requires AT that supports ARIA. Two of the leading screen readers for Windows, JAWS and Window-Eyes, support ARIA. Free, trial versions of both are available for download, but require Windows be restarted every 40 minutes. For that reason, the open-source NVDA Screen Reader is the best option for developers looking to test the YUI ARIA Plugins as it is both free and provides excellent support for ARIA.

By Todd KlootsOctober 2nd, 2008

YUI 2.6.0 Released

The YUI development community is pleased to announce the release of version 2.6.0 of the YUI Library. You can download YUI 2.6.0 from SourceForge or configure your implementation using the updated YUI Configurator.

2.6.0 introduces a new Carousel Control, offers the Paginator Control for general use (it was previously bundled with DataTable), includes more than 450 total fixes, enhancements and optimizations, graduates eight components out of “beta,” and now ships with more than 290 functional examples.

New YUI Controls

The Carousel Control

The YUI Carousel Control, contributed by Gopal Venkatesan (and based on the Carousel originally created by former Yahoo Bill Scott), provides a widget for browsing among a set of like objects arrayed vertically or horizontally in an overloaded page region. Like most YUI controls, Carousel can consume content from page markup using progressive enhancement techniques or be created, configured, and populated entirely via script. It has built-in support for the lazy-loading of content via XMLHttpRequest (aka Ajax) using YUI’s Connection Manager. And be sure to notice that Carousel’s ARIA Plugin example makes it easy to use the WAI-ARIA Roles and States with the Carousel control.

carousel-example

The Paginator Control

The YUI Paginator Control addresses the navigation aspect of chunked content, offering a set of controls that it can render into your UI to allow users to navigate through logical sections of local or remote data. It’s a great tool for managing page load times by reducing the amount of markup or data needed per page. In combination with Connection Manager or DataSource, paging through large sets of server side data is easy and can avoid the need for full page loads.

The simplicity of the getting started example risks hiding Paginator’s power, so be sure to explore the choices for configuring the Paginator. Plus, it’s built on a UI component architecture that allows implementers to easily create custom Paginator controls that will work automatically.

The Paginator Control was introduced with DataTable in version 2.5.0, but it has been broken out as an optional dependency for general use as of version 2.6.0.

paginator-shadow

Over 450 Improvements

You can view 2.6.0′s comprehensive change log of fixed bugs and concatenated release notes for the entire library, or keep reading for highlights.

TreeView

Prolific YUI contributor (and YUI Community Awards winner) Satyam has given TreeView a significant overhaul with support for progressive enhancement, state retrieval, JSON-base construction, focus, keyboard navigation, and node editing. 2.6.0 should be fully backward-compatible with 2.5.2 and earlier implementations. More details in the upgrade notes for TreeView.

Calendar

Thanks to Satyen Desai, the Calendar Control received significant accessibility improvements in 2.6.0 including the addition of text to the previous-month, next-month, and close icons for improved screen-reader interaction.

Rich Text Editor

Dav Glass added the often requested Undo and Redo capabilities to the Rich Text Editor Control.

Drag & Drop

If you’ve struggled with making Drag & Drop work well over troublesome content such as iFrames, you’ll welcome the introduction of a hidden shim that now makes such traversals effortless.

Uploader

Uploader has been updated to work with Flash Player 10, a sign of our continued commitment to emerging technologies. But because of security changes in the upcoming Flash Player 10, the UI for invoking the “Browse” dialog has to be contained within the Flash player. Because of that, this new version of the Uploader is NOT BACKWARDS COMPATIBLE with the code written to work with the previous version (it is, however, compatible with Flash Player 9). Do not upgrade to this version without carefully reading the documentation and reviewing the new examples.

DataTable

There has been significant work on DataTable in this 2.6.0 release. (See the README for the full manifest.) Amongst the changes, DataTable introduces the ScrollingDataTable and CellEditor classes, the Paginator widget is now offered as a standalone component, and significant changes have been applied to DataTable’s pagination and sorting architectures. While backward compatibility has been maintained whenever possible, the Paginator widget is now an optional dependency, and custom extensions to inline cell editing or server-side pagination and/or sorting will likely need to be updated to be compatible with the new models. Implementers who are upgrading from an earlier version are strongly advised to read the Upgrades Notes.

AutoComplete

As of the 2.6.0 release, AutoComplete has been migrated to use YAHOO.util.DataSource, which is now a new required dependency. The YAHOO.widget.DataSource class, which used to be packaged with the AutoComplete control has been removed. While backward compatibility has been maintained whenever possible, implementers who are upgrading from an earlier version are strongly advised to read the Upgrades Notes to smooth the transition.

Container

The Container family of controls have enhanced positioning, height, and modality support in 2.6.0 via new preventcontextoverlap, context, and autofillheight configuration properties.

Other Notes on 2.6.0

Yahoo! Design Pattern Library

Concurrent with the initial YUI release in February 2006, Yahoo! released the Yahoo! Design Patterns Library. Design Patterns describe an optimal solution to a common problem within a specific context. Today we’re happy to strengthen the relationship between these two sibling libraries by offering YUI code for two existing patterns: The Pagination Design Pattern and the Carousel Design Pattern.

Accessibility Improvements

We’ve continued to work hard to make YUI accessible. The Carousel, Button, Menu, TabView, and Container all have enhanced accessibility support in addition to what’s otherwise noted in this blog post. We continue to count accessibility amongst our highest priorities; stay tuned for a few more blog posts on the topic in the coming days and weeks.

Graduation Day

The following seven YUI components have graduated from beta as of 2.6.0:

  • Cookie Utility – with a new removeSub() method and two parsing improvements.
  • DataSource Utility – with significant backward-compatible refactoring, see the README.
  • Resize Utility – with new support for a useShim config and a series of bug fixes.
  • YUI Loader Utility – with better timeout and combo handler support.
  • DataTable Control – significant improvements and bug fixes: check the README.
  • Layout Manager – with new support for Ajax content retrieval and a series of bug fixes.
  • Rich Text Editor – including lots of new custom events and the ability to customize the edit windows better, along with ~40 bug fixes.
  • Profiler has been promoted out of beta unchanged.

(Note that the ProfileViewer developer tools, the Element and Selector utilities, and the Carousel and ImageCropper controls remain designated as beta.)

Thanks!

We’re proud of this 2.6.0 release and want to thank the entire community for their contributions, guidance, and continued support. We hope you enjoy all the new power and easy of use reflected in 2.6.0, and we look forward to your feedback in the comments below and on the YUI mailing list.

Thank you again on behalf of the entire development team, Adam Moore, Dav Glass, Eric Miraglia, George Puckett, Jenny Han Donnelly, Luke Smith, Matt Sweeney, Satyen Desai, Thomas Sha, and Todd Kloots; and contributors: Caridy PatiƱo, Dwight “Tripp” Bridges, Julien Lecomte, Matt Mlinac, Allen Rabinovich, Satyam, Gopal Venkatesan, and Nicholas C. Zakas

By Nate KoechleyOctober 1st, 2008
|
Newer Entries »

Pages

  • About
  • Contribute
  • YUI Jobs

Recent Posts

  • YUI Weekly for May 24th, 2013
  • YUI Weekly for May 17th, 2013
  • Yahoo’s International Team Is Hiring!
  • YUICompressor 2.4.8 Released
  • YUI 3.10.1 Released to Fix SWF Vulnerability

Archives

Categories

  • Accessibility (25)
  • CSS 101 (6)
  • Design (51)
  • Development (590)
  • Frontend Jobs at Yahoo (13)
  • Graded Browser Support (8)
  • In the Wild (63)
  • Miscellany (11)
  • Open Hours (44)
  • Performance (23)
  • Releases (26)
  • Target Environments (11)
  • Yeti (4)
  • YUI 3 Gallery (29)
  • YUI Events (45)
  • YUI Implementations (55)
  • YUI Theater (146)
  • YUI Weekly (38)

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
© 2013 YUI Blog