Filament Group, Inc: Lab

Dingbat Webfonts: Great potential, but we see (and hear) accessibility issues

2010-08-17T14:48:00Z

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.

jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement

2010-07-12T14:43:00Z

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

Slides from Voices That Matter: Optimizing for the Mobile Web, Scott Jehl

2010-07-08T15:17:00Z

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.

Slides from Voices That Matter: Designing with Progressive Enhancement, Todd Parker

2010-07-08T14:17:00Z

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.

Using Internet Explorer Conditional Comments with EnhanceJS

2010-05-11T21:02:00Z

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.

Expand and collapse content accessibly with progressive enhancement, jQuery, and ARIA

2010-04-08T18:52:00Z

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.

Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement

2010-03-12T19:13:00Z

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.

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.

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.