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.

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.

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.

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.

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.

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.

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.

The 2009 SXSW Interactive Conference starts tomorrow and the entire Filament crew will be in attendance! We're very excited to meet up with some of our online friends, and the sunny (hopefully) Texas weather will provide a nice break from this Boston blizzardry.

This year will be particularly exciting as we've been selected as finalists in the 2009 SXSW Web Awards for our work on jQuery UI ThemeRoller! If you'll be in Austin this week too, we'd love to meet up and chat. We'll be on Twitter @filamentgroup throughout the week, so feel free to follow along with us for the week and drop us a message if you're around. We hope to see you there!

Today marks the release of jQuery UI version 1.7. In many ways, this release is the start of an entirely new direction for the library. As core team members and official sponsors of jQuery UI, we're very proud of the team's efforts and the result of all of our hard work.

A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element. The experiment is very interesting and really cool, but the practical takeaway wasn’t immediately clear.

Recently however, we've been working on building the markup for upcoming jQuery UI widgets, we came across a case that prompted us to take another look at the technique. The tooltip widget design, fairly common in websites these days, uses a small triangular "speech bubble" pointer that is typically created quite easily with a background image. However, we wanted to maintain our commitment to keeping our jQuery UI widgets entirely themable, and using an image for that purpose wouldn't fit with the flexibility jQuery UI requires. How to solve this problem without any need for images? That challenge led us to the experimental approach using polygonal CSS, shown below.