Accessible Folksonomies

I’ve been working with web technology for over a decade now and I don’t think I’ve ever witnessed an idea gain mindshare as rapidly as the Folksonomy has. It seems like everywhere I turn someone is discussing this new categorization system.

For those of you who aren’t familiar with the term, a folksonomy is basically a taxonomy created by the people and for the people. A community of users collaborates by “tagging” various types of content with user created keywords. This concept is flourishing on a handful of community driven sites that all seem to have a certain addictive quality. I think the best way to fully grasp how folksonomies work is to dive into one of the sites that makes use of the concept. Flickr, 43things, and del.icio.us are good places to start. Given the success of these early experiments in group tagging I have no doubt that we’ll be seeing folksonomies implemented on all sorts of sites in the very near future.

Lately I’ve been thinking about one particular artifact of the folksonomy phenomenon — the folksonomy menu that serves as a sort of buzz index providing users with a quick visualization of the most popular tags (technically I think it’s called a weighted list). Popular tags are displayed in a larger font and it’s relatively easy to identify hot topics at a glance. This visual representation of the popularity of any given tag is undeniably cool. However, once the coolness factor wears off it becomes fairly obvious that these menus are also not very accessible.

I realize these sites are currently trail-blazers and they deserve to be recognized as such. I have no intention of detracting from the innovative work that’s being done. My concern is that once folksonomies enter the mainstream, the next wave of sites implementing them will likely begin a wholesale copying of the work that’s being done by these innovators — markup and all.

Also, I need to point out that folksonomies are community driven. A few minor changes to the existing markup would go a long way towards making these communities accessible to everyone.

Analysis of the accessibility of weighted lists on five websites using group tagging and folksonomy

I spent an afternoon looking under the hood of the folksonomy menus on following sites:

• Technorati
• Flickr
• 43 Things
• del.icio.us
• MetaFilter

I was somewhat surprised to find that the markup on each of the folksonomy menu pages was entirely different. While all sites were basically implementing the same type of menu they all arrived at their respective results in different ways. Given this finding, I was even more surprised to note that each site shared most the same accessibility problems:

• Unstructured Links: With the exception of Technorati, each of these menus was rendered as an unstructured collection of links separated by only whitespace or a non-breaking space entity. It seems fairly obvious that these links constitute a list. Rendering these items as a list would provide visually disabled users with more feedback regarding the number of links as well as the ability to skip the list entirely.
• Extraneous Markup: While not technically accessibility related, each of these pages uses a fair amount of extraneous markup to achieve its goal. I encountered a startling number of span elements accompanied by inline style declarations. And while Technorati wins points for realizing that these links are actually a list, they should also win an award for the most creative use of the EM element.
• Absolute Font Sizes: Without exception fonts were defined in pixels. As a result I was unable to resize type in Internet Explorer. This was somewhat puzzling given the fact that it would be fairly easy to implement the font size variations using em’s. del.icio.us actually went as far as defining the font size in fractional pixels extended to the 13th decimal place. They must be using one of those 30 inch Cinema Displays :).
• Lack of Context: These menus currently require a user to actually view the page in order to discern the relative popularity of tags. There is no additional context that could be used to determine popularity. Given the fact that the difference in font size for any pair of tags can be as little as a single pixel, additional context would also be useful to those who are not visually impaired.

Recommendations:

The good news is that these issues are all easily fixed. Most of the solutions will be quite obvious.

• Use Lists: Lists have become the standard way of rendering a collection of links. Lists provide additional structure that can have a significant impact on accessibility.
• Avoid Inline Style Declarations: I’m sure there’s room for debate on this recommendation, but personally I would assign a class to each LI element. There’s really no reason for extraneous elements or inline style definitions.
• User Relative Font Sizes: Defining font sizes in em’s would allow users to easily resize type in any browser. Fractional em’s are easy to calculate, and they make more sense than fractional pixels.
• Add Context: While it’s not a perfect solution, it might be a good idea to add each topic’s relative rank to the title attribute of the anchor. Something like title=”Politics – Rank 3 or 10″.
• Consider Alternate Views: There’s no reason that the current standard folksonomy menu has to be the only way of representing the relative popularity of tags. An ordered list sorted by popularity would eliminate some of the need for visual clues. Adding a link to such a list would provide users with more choice while addressing accessibility concerns.

Here’s a page demonstrating my recommendations.

I realize that it can be challenging to focus on these types of details while innovating in the way that each of these sites has. While folksonomies are still relatively new, I think we’ve reached a point where it’s time to start thinking seriously about best practices.