Filament Group, Inc: Lab

jQuery accessible ARIA tree control: from the book Designing with Progressive Enhancement

2010-02-17T17:00:00Z

Tree controls are one of the most popular ways to represent hierarchical information in web interfaces — they present deeply nested, multi-level content in a compact space, and allow users to expand and collapse nodes to control which parts of the tree structure are displayed.

Today, we're releasing a jQuery tree control plugin that uses progressive enhancement to transform an unordered list (UL) into a dynamic tree control, complete with accessibility features like ARIA attributes, keyboard and mouse behavior, and focus management. In the following article, we'll give a brief overview of the purpose of this widget and how you can use it in your projects.

This widget is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets we created to accompany our new book, Designing with Progressive Enhancement. Purchasers of the book can access all twelve examples immediately (and we'll be releasing selected others publicly as open source over the next couple of months as well).

Introducing EnhanceJS: A smarter, safer way to apply progressive enhancement

2010-02-08T22:09:00Z

As we discuss in our new book, Designing with Progressive Enhancement, and in previous articles and presentations, building with progressive enhancement is essential to ensuring a usable experience for all. But how do you determine which browsers should receive the enhanced experience and which should stick with the basic experience?

Introducing EnhanceJS, a JavaScript framework designed specifically to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.

We're releasing EnhanceJS as an open source (MIT license) project to allow everyone to start building sites with test-driven progressive enhancement. In this article, we’ll review how to use EnhanceJS in your own projects so you can take advantage of new CSS and JavaScript features while ensuring a usable experience to all.

Announcing our book: Designing with Progressive Enhancement (Peachpit)

2010-02-02T21:35:00Z

We're proud to announce that the four of us here at Filament Group have written a book! Designing with Progressive Enhancement is a practical guide that both explains the principles and benefits of progressive enhancement, and explores detailed examples to teach you how, where, and when to implement specific coding and scripting approaches that embody broadly accessible development practices.

We'll be writing about topics from the book and releasing some of the exciting new progressive enhancement-based jQuery plugins we include with the book over the coming weeks and months so stay tuned.

Filament Group’s chapter on Theming in O’Reilly Media’s “jQuery Cookbook”

2009-12-08T16:54:00Z

We're proud to announce our chapter on "jQuery UI Theming," in the new jQuery Cookbook, from O'Reilly Media. The chapter covers styling jQuery UI widgets with ThemeRoller, overriding layout and theme styles, applying themes to non-jQuery UI components, and referencing multiple themes on page. If you're interested in mastering jQuery UI Theming for your own websites and applications, it's the most thorough resource you'll find on the topic. We highly recommend picking up a copy!

Filament Group’s Visualize canvas charting technique demonstrated at FOWA London

2009-10-14T14:08:00Z

At the 2009 Future of Web Apps conference in London, Bruce Lawson gave a great presentation demonstrating some of the features of HTML 5 that can be used today. We were thrilled to see that Bruce demonstrated our jQuery "Visualize" table-to-canvas charting technique as a "brilliant example of accessible use of Canvas."

jQuery Conference 2009: The jQuery UI CSS Framework and ThemeRoller

2009-09-14T14:55:00Z

We were thrilled to attend and contribute to The jQuery Conference 2009 in Boston this past weekend. On Saturday afternoon, our own Todd Parker and Scott Jehl teamed up to present "The jQuery UI CSS Framework and ThemeRoller" (pdf), with a summary of our progress in the last year developing Theming in jQuery UI and tips on how to leverage the jQuery UI CSS Framework in custom widget development. On Sunday evening, Scott took part in the lively discussion Q&A panel about the direction of the jQuery and jQuery UI projects moving forward.

Presenting “Rich UI Design: An Access-Oriented Approach” at Delve:UI Conference, NYC

2009-08-04T14:05:00Z

Filament Group's Scott Jehl will be presenting "Rich UI Design: An Access-Oriented Approach" at Delve:UI, NYC. Scott's presentation will demonstrate page enhancements with some slick jQuery and jQuery UI components and feature FG's use of progressive enhancement and capabilities testing to deliver rich experiences that work and are accessible to the widest audience possible.

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

2009-07-02T18:26:01Z

Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. A while back, we wrote an article describing a technique we came up with to use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. The technique is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

We've now rewritten and extended the code behind this technique and packaged it up as a new jQuery plugin called "visualize", which you can download below. The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

2009-07-01T15:15:00Z

Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images; it's even a challenge to get the margins to appear consistently across browsers. To remedy this we developed a concise jQuery plugin based on progressive enhancement that leverages an input element's built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

2009-06-19T13:27:00Z

We recently contributed a number of our own plugins to the jQuery UI labs repository, a new branch of the jQuery UI project dedicated to future plugin development. Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it's built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

Update: jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion

2009-05-20T15:50:00Z

Using em units in CSS layout allows for page components to scale in unison with a user's font-size preferences. But developing in ems within dynamically updating web apps can be very tricky. In an earlier lab article, we released a script to quickly convert pixel values to ems (and vice versa) to support page scalability throughout a web site or application. We've rewritten the plugin to better follow jQuery syntax and reduce code weight, and are now releasing an updated version for download.

Update: Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support

2009-04-24T20:20:00Z

We dusted off our original sliding doors button to give it a much needed update. The button now works with image sprites thanks to the CSS contributions of Louis Walch, and also works with a single block of CSS (we’ve removed the now unnecessary conditional comments for IE) in all major browsers including IE versions 6 through 8.

Access-Oriented Web Design: Building highly-interactive web apps that work for everyone

2009-04-24T16:01:00Z

Yesterday, our own Scott Jehl had the opportunity to present our "Access-Oriented Web Design" methodology to the Web Publishing group (AKA WebPub) at MIT.

"Access-Oriented Web Design" is an approach we've been formulating for a while that describes our recommended approach to safely applying progressive enhancement in websites and applications so they deliver an accessible and functional experience to the widest audience possible.

This presentation builds upon our A List Apart article, "Test-Driven Progressive Enhancement", which details the capabilities testing library we've developed here at Filament Group.

The presentation was videotaped by MIT WebPub and is posted below. You can also view the "Access-Oriented Web Design" presentation slides in PDF format.

Update: jQuery UI Slider from a Select Element - now with ARIA Support

2009-04-16T20:48:00Z

We've updated our popular jQuery UI selectToUISlider plugin with ARIA support, making the jQuery UI slider widget more accessible to users on assistive devices. The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

2009-04-02T20:32:00Z

We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. In the process of refining the script, we morphed it into more of a menu system, which can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options where child menus are displayed next to the parent menu on mouseover, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.