While working through initial ideas for the forthcoming jQuery Mobile framework, we were looking for ways to decrease page weight and image requests, and did some experimenting with using a custom dingbat font (crafted with the excellent FontStruct editor) to enable rich, vector-based icons for the mobile UI components that could be enhanced even further with CSS. Unfortunately, support for CSS @font-face (the web-standards-based mechanism for referencing custom fonts) on mobile is spotty at best.

But the idea of using fonts for icons excited us, and may perhaps prove to be a great solution for desktop browsers. For this reason, we were thrilled to see the release of Pictos, a beautiful dingbat webfont by Drew Wilson. The Pictos site includes several examples of the icons in play, and the results are stunning, particularly with various CSS3 styles applied, and while scaling the browser's text size. However, dingbat fonts map visual symbols directly to standard keyboard characters, and this raises some concerns for accessibility.

We see some definite accessibility challenges with the solution, and tried several work-around solutions, which we'll describe below.

As websites expand content-sharing and collaboration features, users are electing to upload more and more files—photos, videos, documents, even secure data—via web applications to store them in “cloud”-based systems rather than locally on their computers. The HTML input element with a type="file" attribute gives web developers a native control to handle this file upload functionality. But browsers offer almost no control over how file inputs are presented visually, making it difficult to incorporate them into a uniform interface design.

Today, we're releasing a jQuery file input plugin that uses progressive enhancement to transform a standard HTML file input into a visually customizable control. With a few lines of CSS and JavaScript, this widget allows you to create a custom-styled file input that leverages all of the accessibility features the native input provides.

This widget is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets we created to accompany our book, Designing with Progressive Enhancement. (Purchasers of the book can access all twelve widgets immediately).

Photo Credit: OCJess Last week, Filament Group's Scott Jehl presented on Optimizing for Mobile Web, at the 2010 Voices That Matter Conference in San Francisco. Scott's presentation covered the techniques we used and insights we discovered while creating our new mobile-optimized website, and included examples of how we use the EnhanceJS framework to decide not only whether to provide browsers basic or enhanced experience, but also to deliver optimized experiences to desktop and mobile browsers.

Photo Credit: OCJess Last week, Filament Group's Todd Parker presented topics from our book, Designing with Progressive Enhancement, at the 2010 Voices That Matter Conference in San Francisco. Todd's presentation talked about the importance of developing for universal accessibility, and included examples of how we use the EnhanceJS framework to build complex interactions that leverage the latest technologies while remaining usable for those with less capable browsers and devices.

Recently we released an open-source script called EnhanceJS that lets you apply progressive enhancement to your projects in a practical way: it tests a browser's capabilities before loading CSS or JavaScript enhancements onto a page, and ensures that it receives a usable experience based on those capabilities.

Though IE versions 6 through 8 pass EnhanceJS's capabilities tests and render most enhancements correctly, they sometimes render CSS or JavaScript in quirky ways. Thankfully, Microsoft provided a relatively unobtrusive way for developers to work around these issues called "conditional comments." We've added a feature to EnhanceJS that provides a way to deliver IE conditional comment-based markup enhancements so sites look and work as expected across all versions of IE.

Collapsible content areas are frequently presented in web sites and applications as a way to let users to control how content is shown or hidden on the page. Also called collapsibles, spin-downs, toggle panels, twisties, and content disclosures, they're ideal for selectively displaying optional information — like instructional text or additional details, for example — so users can focus on the task at hand and view this content only as needed.

The collapsible content area widget is fairly simple — a couple of HTML elements controlled with minimal CSS and JavaScript — but when we were researching our book, Designing with Progressive Enhancement, we discovered that many common approaches to creating collapsible content fail to incorporate accessibility features. Happily, there is a way to build collapsible content with progressive enhancement so it delivers an optimal accessible experience for sighted and screen reader users alike.

A while ago, we came up with a technique for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element. This technique provides a simple way to generate charts, but more importantly, because it bases the chart on data already in the page in an HTML table element, it is accessible to people who browse the web with a screen reader or other assistive technology, or with browsers that don't fully support JavaScript or HTML5 Canvas. We packaged it as a downloadable jQuery plugin called Visualize.

We've updated the Visualize plugin — adding ARIA attributes to clarify the chart's role to screen reader users, so they're better informed about which elements contain useful data; and providing two style variations to demonstrate how you can use CSS to customize the charts' appearance.

Visualize is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets that accompanies our new book, Designing with Progressive Enhancement.

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).

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.

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.