Todd Kloots, of the Yahoo User Interface group was one of the first to develop accessible javascript libraries with the YUI menu package. He just published a blog post on the YUI web site about adding ARIA support to the YUI tab package. This information could also help you add this functionality to your existing YUI-based applications.

Here’s how Todd describes the goal

The YUI TabView Control is built on a strong
foundation of semantic markup that provides users with some basic accessibility. But while TabView looks like a desktop tab control, screen readers don’t present it as an atomic
widget, leaving users to figure out how the various HTML elements that compose a TabView relate to each other. However, through the application of the WAI-ARIA Roles and States, it is possible to enhance TabView’s accessibility such that users of screen readers perceive it as a desktop tab control.

Enhancing TabView Accessibility with WAI-ARIA Roles and States – Todd Kloots

The following video shows how this approach works with Firefox and a screen reader.

Related articles

• IBM makes web accessibility for blind users a social effort
• Accessible Google Charts
• AxsJAX: Access-Enabling AJAX
• I.B.M. Software Enhances Web Accessibility for the Blind
• Quick follow-up: more YUI Compressor work
• High Performance Ajax Applications
• Reminded of speaking your YAHOO.lang

We have avoided using CSS3 rules for too long. It’s been difficult to justify using rules that won’t work for a significant portion of our audience, Internet Explorer 7 and below. However, Internet Explorer 8 is coming out soon and does work with the features we like.

I think it’s fairly safe to assume IE7 users will upgrade to IE8 within a short time. Those stuck with IE6 for one reason or another will slowly disappear as they are given new computers or their locked down environments are upgraded.

So, with the future of CSS3 functionality within reach, I’ve been energized to begin experimenting again. I’ll be writing a series of blog posts over the next few months that look at CSS3 functionality as a progressive enhancement. How can we continue to deliver a perfectly fine web site to IE6 and IE7 and mobile phones while enhancing the functionality of more modern browsers and devices?

Attribute Selectors

CSS attribute selectors are the golden ring on the web development merry-go-round. They can be daunting to learn, addictive to use, but then disappointing when you realize they are out of your grasp when you test in Internet Explorer. We can, however, begin using them to add additional functionality based on your pre-existing, semantic code. Attribute selectors give you power to write CSS that pinpoints the stuff you already code, without having to go back and add classes or ids. I’ve written previously about using attribute selectors to let your users know the language of a site they are about to visit. This trick relies on the rarely used hreflang attribute, which identifies the language of the site targeted in a link.

There are many other attributes in your HTML, from table headers, image src, link titles, and selected options. Think about all of those juicy attributes just waiting to be targeted. Also think about how you could actually do something useful with them.

Announce the file type of a link with CSS

I once worked for a company that had hundreds of thousands of static HTML pages in their intranet. With no content management system; it was impossible to make global changes. The only thing they shared was a common set of style sheets. Does this sound familiar? Follow along as we increase your site’s usability in a less than perfect, but efficient way.

First off, for accessibility, you need to let users know when a link will open a file, what type it is, and how large it is. This is best done by adding it to your HTML code:


Foo presentation (.pdf, 5kb)


That delivers the information to everyone, regardless of their browser. This, however takes time and is a daunting task for updating legacy code.

We can, however, use the atttribute selector to target the extension of the link to display the icon and insert the text describing the file type. Here’s the sample HTML code:

It’s a simple list of links for different types of files. We’ll be looking at the extensions: .zip, .pdf, .doc, .exe, .png, and .mp3. Feel free to extend this list to any extension you so desire. This would be especially helpful for a company that uses proprietary file types within their intranet.

Now, let’s look at the CSS:


a[href$="zip"],
a[href$="pdf"],
a[href$="doc"],
a[href$="exe"],
a[href$="png"],
a[href$="mp3"] {padding-left:20px; background:url(bg-file-icons.png) no-repeat 0 0;}
a[href$="png"]{background-position: 0 -48px;}
a[href$="pdf"] {background-position: 0 -99px;}
a[href$="mp3"]{background-position: 0 -145px;}
a[href$="doc"]{background-position: 0 -199px;}
a[href$="exe"]{background-position: 0 -250px;}

a[href$=".zip"]:after{content: "(.zip file)"; color:#999; margin-left:5px;}
a[href$=".pdf"]:after{content: "(.pdf file)"; color:#999; margin-left:5px;}
a[href$=".doc"]:after{content: "(.doc file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}
a[href$=".mp3"]:after{content: "(.mp3 file)"; color:#999; margin-left:5px;}
a[href$=".png"]:after{content: "(.png file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}


See the final test page.

Pattern matching in the attribute selector

We have some limited “regular expression” functionality in CSS3. We can search for an attribute’s presence and match a pattern within the attribute’s value.
Patrick Hunlon has a good summary of the pattern matching:

• [foo] — Has an attribute named “foo”
• [foo="bar"] — Has an attribute named “foo” with a value of “bar” (“bar”)
• [foo~="bar"] — Value has the word “bar” in it somewhere (“blue bar stools”)
• [foo^="bar"] — Value begins with “bar” (“barstool”)
• [foo$="bar"] — Value ends with “bar” (“I was at the bar”)
• [foo*="bar"] — Value has bar somewhere (“I was looking for barstools”)

Attach icons to anything with CSS

The CSS is simply looking to see if the desired extension is at the end of the link href. If so, apply the following styles.

Adding an icon to the link

First, we are match any of the desired file extensions. We then add a background image and some padding on the left side with a bulk rule. Then the background position on the sprite is adjust for each particular link type. Combining multiple icons into one background image reduces the number of files the user has to download, making your page faster. This will work with any browser that recognizes attribute selectors, including Internet Explorer 7. However, support for more obscure attributes may be spotty.

There’s another peculiarity with pattern matching. Some attributes are case sensitive while others are not. The href attribute is NOT case sensitive, so the above rules will also work if your image name was FOO.ZIP, foo.Zip, or foo.zip.

Adding the descriptive text

Now, we are going to add a bit of descriptive text to each link. We can’t describe the file size, but we can tell the user what type of file it is. This is using the :after(content:) functionality and is supported by Internet Explorer 8 (yeah!!!) but not Internet Explorer 7 and below (boo!!!).
We will also adjust the color and give it a bit of spacing.

A big step forward with a small chunk of work

There you have it. A small chunk of CSS coding has now added substantial usability to your legacy pages. While the CSS version is not as accessible as having the data in the actual link code, it’s a significant improvement over nothing at all. Further, there’s no harmful effect on browsers that do not understand the function. You’ve added information, but haven’t taken anything away. This is a win in my book. To save some time and effort, you could just download and use this package of CSS and icons from Alexander Kaiser.

This rather simple example of attribute selectors and pattern matching can open your eyes to many possibilities. There are a number of developers that have been expoloring this potential for the past few years. Take a look at some of these resources for more ideas and have some fun.

• CSS3 – Atribute Selectors Definition W3C
• CSS 3 Selectors Explained
• CSS: A Tribute to Selectors
• YUI: Selector Utility Use CSS3 selectors in JavaScript
• Dynamic File Type Notations
• Cool use for CSS attribute selectors – Hiding banner ads with CSS
• Showing Hyperlink Cues with CSS
• Showing Hyperlink Cues with CSS

Is this asking too much?

Yahoo’s Christian Heilmann has been advocating layered, semantic badging.

Yahoo Music badges and the simple href

Yahoo! Media Player has taken this approach to embedding music. You simply put a link to a music file in your site, insert the music JavaScript and away you go. The Music Badge Twiki also shows how you can extend the functionality with basic HTML elements, such as adding a title attribute or image inside the link.

Here’s an example of the badge in effect. Orca live at the Casbah, 1992 I made a bootleg recording of Orca, a San Diego supergroup circa 1993. I’m simply going to create a basic link to the music file and include an optional image from flickr. The JavaScript will use that information for the player to appear. You’ll see page loads with a little play icon next to the link. There’s also a small player on the side of the browser. Click on either and you’ll see a media player appear in your browser with the music controls.

Here’s the code:

Orca live at the Casbah, 1992


Patterns of successful AJAX behaviors are beginning to appear (Netflix, 37Signals, Yahoo!). There are subtle, and sometimes not so subtle, changes that can occur to let a user know that an action has happened.

Download the drag and drop storyboard design package

For instance, he pointed out an interaction on the recently departed Yahoo! Photos site. A user could select multiple photos and then drag them to special collection folders. The page generated several panels to let the user know that the move would go to the preferred folder (hit yes), wait for the action to finish, and then a final congratulations panel (hit yes). These panels and the two required clicks could have been avoided if the folder changed when the photos were dropped into it. This could be a simple glow and maybe the number of photos in the folder is increased.

Plan your entire sequence in advance

Eric Miraglia coined the phrase Interesting Moments to describe the multiple changes that occur during an AJAX/DHTML action.

In most cases, Drag and Drop requires that you write code to respond to the interesting moments in the interaction: when the drag event starts, when the dragged object enters another object, and so on.
Yahoo! UI Library: Drag & Drop – Interesting Moments

Your user will have a much more pleasant experience if these are considered in the beginning of production. The Yahoo User Interface library includes a storyboard template (.zip) for planning these interactions effectively. This story board concept also works well for forms (especially form validation actions) and Flash components.

Update

The YUI blog has posted a video of Bill’s lecture: YUI Theater — Bill Scott: “Designing the Rich Web Experience: Principals and Patterns for Rich Interaction Design on the Web”. This is a great opportunity to learn from one of the finest developers around.

Related articles

• YUI 2.5.2 Released, Big Focus on Firefox 3 and Opera 9.5 Support [via Zemanta]
• Pingdom checks on JavaScript usage on top sites [via Zemanta]
• A Need for Information and Interface Design Pattern Websites [via Zemanta]
• Social Design Patterns for Reputation Systems: An Interview with Yahoo’s Bryce Glass (Part II) [via Zemanta]

This problem was solved a few years ago by a series of layouts donated to the greater good by wonderful developers. This gave me the ability to ignore layouts and concentrate on semantic, structural markup and using CSS to turn this into a great set of modules on the page. This is the stuff that makes web development fun for me.

Over the years, new layouts came and went and cross-browser layouts developed to a science. It’s now even easier for you to build a web site layout that is predictable, flexible, and lightweight.

The YUI-Grid

Just because I work at Yahoo!, doesn’t mean I immediately jumped onto the YUI-Grid when it was released. I’ve built several sites without it since its launch. A developer becomes comfortable with a solution and change hurts. However, I recently began working on a very simple, small gallery site and gave this tool a try.

First, a bit of an explanation on some of the nomenclature. The YUI has laid down the law on some naming conventions, and while it may seem a bit bloated, the resulting hooks allow a site to easily incorporate the YUI JavaScript and CSS.

Each main container div has three children, class=”hd” for the header, class=”bd” for the body, and class=”ft” for the footer. You can delete the hd or ft if they are not needed, but you need to at least have the body element. The main portions of the page use the same naming conventions, although with id instead of class. The header has id=”hd”, the body container: id=”bd”, and finally the footer has id=”ft”.

YUI flexibility

Nate Koechley, the man behind the grids, has created a series of rules that let you change the width of your grid, the number of columns, position of columns, and how nested columns divide the avialable space by simply changing a few classes on the parent containers.

It’s a very powerful set of controls. Here’s an example of how the classes change the widths of nested divs.

The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While “yui-g” tells the two children each take up half the space each, “yui-gc” tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated.
Nate Koechley – Yahoo! UI Library: Grids CSS

Help?

Now, if you are like me, your head has begun throbbing after reading the YUI Grid CSS page several times, making notes on how it works, and reading it a few more times before figuring out how to start. The package is complex and yet easy to work with once you dive in.

However, it’s easy to skip most of the headaches and begin building your site immediately. Dav Glass, also of the YUI team, created a great Grid Builder that makes it sinfully easy to build your complicated layout. Not only does it generate the HTML for your basic page, it also incorporates the full YUI CSS library.

This means you also get the YUI Base CSS, YUI Reset CSS, as well as the excellent YUI Fonts CSS. All of these are combined into one CSS file that has been akamized for faster downloads. This means your final site CSS can focus solely on the things that make it unique. You’ll be surprised how small your custom files will be when all of these issues have already been dealt with.

Take it one step further

I was prompted to write this post after seeing the latest extension of the Grid CSS from the outside. Christian Heilmann just published a simple javascript, Enhancing YUI grids with equal height columns, that builds on the established nomenclature of the Grid CSS. It’s a demonstration of the power afforded by a standardized class and id naming convention.

Christian’s javascript also utilizes the basic YUI Javascript library to take all of your nested divs and make them the same height. So, with the addition of one more js script, you now have complete control of your grid layout and your nested divs are all the same height.

Here’s how Christian describes the simplicity.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
Christian Heilmann – Enhancing YUI grids with equal height columns

Future flexibility

This powerful package of YUI CSS and standardized nomenclature for establishing the building blocks and the YUI JavaScript library for building interactions will allow developers to spend more time creating the elements that make their site unique and reduce the cross-browser issues caused by individual mistakes. We’ll see more extensions from within and outside the YUI developers as the usage becomes more universal. They YUI libraries are not doing the work for me, they’re just making it a lot more fun and productive.

I’m the first to cringe when someone discusses Star Trek or Star Wars in reverential tones. The theme alone is enough for me to think twice about this event. However, this night at the Yahoo! campus will bring out the big guns of the browsers (Chris Wilson from IE, Mike Shaver from FireFox, and Håkon Wium Lie from Opera are members of W3C).

The three of them will discuss the DOM object, the future of browsers, and more. Here’s a snippet of the announcement.

Attack of the DOMs is very relevant in this Browser Wars Episode II as Web 2.0 increasingly utilizes AJAX in interface design, functionality and web applications. Each browser implements its supported DOM. IE7 is known to suffer in performance from memory leaks that are related to its inherited DOM architectural design. Firefox quickly gains popularity with its DOM strategy among Web 2.0 communities with faster loading time. DOM Level 2 CSS allows programs and scripts to dynamically access and update the content and of style sheets documents. No designers can deny the importance of the interaction between CSS and DOM in rendering site design properly across browsers.
Web Sig

If you are in the Silicon Valley, hurry up and reserve your seating today! This will fill up quickly and you shouldn’t pass up the opportunity to see Håkon Wium Lie, the inventor of CSS and one of the original creators of the “internet”. The event is free to attend and Yahoo! will provide snacks and free sodas.

This super cool project started as a Hack and has now become an official project. How cool is it? Think of the impact Digg, Flickr, Delicious, Technorati, and YouTube had on the internet in 2006. Pipes has that potential!

So, what is this potential “Segway” product? Pipes allows you to create aggregated feeds to publish on your own site.

Lets say you wanted to create a web page about Pizza in someone’s local area. B.P. (Before Pipes) you would have to write code for a form requesting a zip code, you’d then have to write code to request the appropriate rss feed from Yahoo! Local for restaurants, Epicurious for recipes, Craigslist for pizza loving personal ads, Flickr for images of pizza, etc. You’d then have to parse the XML and build modules to display the information.

That’s a lot of work for a simple project.

Enter the Pipe

Pipes allows you to do all of this in a simple drag and drop interface. I first used it in its early Alpha stage and it took me about 10 minutes to figure out what was happening. They’ve steadily worked on the interface and you can accomplish the above tasks in about 5 minutes. You can then use their tools to publish the results to your own blog or web site.

Mashing up has now become easier than opening a box of potato flakes and adding water. This is big folks, really big.

Here’s how the Pipes team describes their goal

Pipes is an interactive feed aggregator and manipulator. Using Pipes, you can create feeds that are more powerful, useful and relevant.
pipes.yahoo.com

It ain’t perfect… yet

Pipes does have some rough edges, there’s no doubt about it. It’s not very accessible, but they’re working on that right now. If you have suggestions or find bugs, let them know.

Enjoy this site as the super-cool, revolutionary site it is. It’s was created with passion and hard work by a small devoted team. They’ve got the spirit of a startup with the power of Yahoo!

Enjoy the new A.P. Era (After Pipes).

Understanding the virtual buffer is essential for empowering screen reader users, particularly considering the number of Web 2.0 applications that depend on Ajax. Screen readers typically take a snapshot of a web page, and place the content in a virtual buffer to allow the user to interact with the content.
Gez Lemon and Steve Faulkner – http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

Gez and Steve Faulkner have just released a set of javascript functions that refresh the virtual buffer by working with setAttribute. They discovered this function triggers JAWS 7.1+ screen readers to grab a new snapshot of the page.

The scripts are fairly simple. When the page loads, insert a hidden form input. When your AJAX application completes its duties, change the value of that hidden input with the setAttribute function. This setAttribute activity will refresh the buffer and the screen reader will announce the content that has been changed via an AJAX call.

The updateBuffer function presented here extends the limited improvements in JAWS 7.1 and later, by providing a mechanism to update the virtual buffer for other interface elements, that works regardless of input device. This means that users of JAWS 7.1 and later do not need to explicitly update the virtual buffer in order to interact with Ajax applications.
Gez Lemon and Steve Faulkner

As I also predicted, I believe the YUI Connection Manager will incorporate this type of functionality. This will give enhanced accessibility to thousands of web sites instantaneously.

Getting drunk on the possibilities and waking up to sober reality

It could be argued that 2006 was the year of AJAX and DHTML. They matured this year and solid libraries were released. The Yahoo User Interface Library makes a JavaScript mangler like me seem downright competent. Not only that, it’s got some good accessibility and security built in. Gez Lemon and others have been tearing apart AJAX for a possible accessibility hook that makes all of us happy. JSON gave us new ways to transfer information.

Yes, we got giddy with the possibilities. I helped build Yahoo! Tech. It’s a great site, if I do say so myself. We launched with every flash, web 2.0, animation, AJAX driven widget imaginable. Someone even called it “an explosion of a web 2.0 factory.” The site was accessible, harnessed the powers of a web-service architecture, and was the first completely new site for Yahoo! Media in a long time. But the web 2.0-ification was the star in many people’s eyes.

A funny thing happened over the months after launching. We got rid of the flash on the home page. We removed the dynamic width widget. We removed some animations. We began removing these Web 2.0 stars because the users didn’t use them AND they made the site performance horrible. Yahoo Tech, like many other sites, learned an age-old lesson. Just because you can, doesn’t mean you should.

Prediction #1 – In 2007, AJAX and DHTML will be used reasonably.

I predict new sets of AJAX/DHTML libraries will be released with great features and accessibility. People will go gaga over a few sparkly ideas and ultimately settle with good sites that use the libraries reasonably. I predict AJAX will be used less often as commercial sites realize they need page refreshes for advertising revenue. AJAX will continue to be used for features that significantly help the user’s experience (Yahoo Finance Streaming Quotes) and not so much for page level mechanisms (Yahoo! Tech Search).

No More Rounded Corners

I hate rounded corners. They were fashionable for a year and everyone had to have them. You could build them with 15 nested divs, with javascript, with extra paragraphs, extra this, that and the other. Die rounded corners die!

Seriously, rounded corners add a bit of visual white space but they’ve gone overboard. They’ve hit the designer’s toolkit like a bad font and are being used because people feel like that have to use them. It’s time to be creative again and kill rounded corners. Please!

Prediction #2: Rounded Corners Replaced With Dancing Hamsters

Let’s look at alternate container variations. Put rounded corners on the shelf next to drop shadows and let’s explore line quality, tonality, texture, and contrast instead.

Accessibility is a big deal and then it isn’t

Accessibility for web sites will become a big deal in 2007 as the Target lawsuit comes back and someone figures out a way to make AJAX accessible and easy to implement. I’m putting my money on Gez Lemon finding a solution and the Yahoo! User Interface Library making it available.

Firefox, Apple, Yahoo!, Google, IBM, Sun, and who knows what other companies will come together and agree that there is a particular way that these things should be done and will create some resolutions. After these things happen, you will see more and more sites become accessible without even trying. Platforms such as WordPress have already made huge impacts in setting up sites to be accessible from the beginning. Look for more advances from Microsoft, Adobe, and more.

Apple will release their new OS with extended assistive technologies built-in. Existing screen reader companies will have to deal with a big new competitor. Watch for Jaws, et al to scurry around fixing outstanding issues to hold onto their audience.

Prediction #3 – Accessibility for All

Even if JaneDoe43 is simply dragging images into her MyLinkedInSpace page, it will have the hooks necessary to be accessible. Platforms and libraries will make it easier for people to worry more about content and less about rules. The web will be a better place for novice and advanced programmers. It will certainly be better for those that need assistive technologies.

IE7 opens the possibilities

Internet Explorer 7 has been released and will soon see adoption rates increase significantly. Vista is ready to also increase the graphic processing potential for millions of users. As web developers, we have new tools in our kit to work with. Start studying your attribute selectors, pseudo selectors, and playing with alpha transparencies. 2007 will see the death of Internet Explorer 6. It will still sit on a small percentage of machines, but IE7 will take over and with it comes hope.

Prediction #4: CSS2 and CSS3 Get Used

Start looking at progressive enhancements with your CSS. Give Firefox, Opera, Safari, and IE7 the best possible experience. You may have to dumb down some of the IE6 images but go for the beauty and simplicity that advanced CSS offers.

Where’s the new blood?

The standardistas of the past are busy working on big projects now. Sure, they’re still doing some innovative stuff. But where are the young guns inventing wonders like Son of Suckerfish, Microformats, CSS Zen Garden,Image Replacement, SIFR, and god-forbid the image-free rounded corners? Seriously, it’s time for some exciting developments to come from people recently discovering web standards and bringing a new approach to solving issues. Who knows who will be the next Erik Meyer, Big John, Andy Budd, Shaun Inman, PPK, etc. Who’s gonna carry Joe Clark’s torch for being the genius with a cattle prod as he solves the captioning dilemna next year?

Prediction #5 – New Standardistas Rock The House

Further, these new standardistas are going to come from Asia, India, South America, and possibly the United States and Europe. They’ll have us on the edge of our seat as AListApart releases the latest tools to completely change the way we build sites. My number one pick for standardista of the future goes to Hedger Wang who tirelessly experiments and publishes little teasers on a regular basis.

I can picture the @media 2008 conference in Singapore with Molly, Andy, PPK, et al lining up for a chance to rub shoulders with the new greats.

The libraries are now version v.0.11. I think that still puts them in the pre-teen category. Wait until they hit version .14 when they begin listening to really bad boy bands and hanging out at the mall after school.

Visit the YUI developer blog today to get the lowdown on all of the fixes. I have had an annoying issue with a select box and z-index that will be fixed with the introduction of this latest version. So make sure you update your import links and enjoy.

Here’s a summary of the benefits:

• New color animation controls
• Better drag and drop performance
• New documentation for Yahoo! Global Object, superclass and subclass assignments, cheat sheets, and more
• File upload control
• Lots of tweaks and bug fixes