Accessible March Madness 2011 via Greasemonkey

Every year since 2006, I’ve created an Accessible Tournament Bracket for the NCAA Men’s Basketball Tournament. In 2010 I expanded that to include an accessible tournament pool which a dozen people or so, most of whom were screen reader users, participated in.

This year I’m trying something different. Rather than create my own bracket and site, I thought I’d try to improve the accessibility of an existing site. The tool that makes this possible is Greasemonkey.

Greasemonkey is a Firefox extension that allows authors to write scripts that interact with and modify the content of web pages, and allows users to run these scripts. There are tens of thousands of scripts available on userscripts.org (be careful what you download though. Read the reviews first, and only download from a known, trusted source).

The potential for accessibility here is huge. Got an inaccessible site? Site authors aren’t responding to your requests to fix its accessibility problems? Greasemonkey provides a possible solution. With a little knowledge of JavaScript, you can add a scripted layer to the existing web page, manipulating the content of that page and making it more accessible. Not only does this provide a temporary accessibility solution, but it provides a live demo of your proposed solution, which might help in persuading the site authors to improve their site.

The Accessible Bracket Script

I looked at several major NCAA tournament sites and ncaa.com seemed to be the one with the most potential. It uses HTML5 and all of the bracket content is organized using divs, so it would be relatively easy to replace the div-based structure with one that’s more semantically meaningful, The following two sections explain what I did and how to use it.

What I Did

1. Removed superfluous content. NCAA.com actually has a lot less of this than other bracket sites, but there’s still a lot of stuff that is distracting and irrelevant if we just want to look at a bracket. I removed all this by adding CSS display:none to unwanted elements.
2. Added "banner" and "main" landmark roles (that’s pretty much all that was left after removing all the clutter.
3. Added a main <h1> heading to the page, and a subheading structure to the bracket itself. A good heading structure plays a key role in screen reader users’ ability to navigate between regions and rounds and understand the relationships between games.
4. Replaced much of the div-based structure with nested lists. Within each region, each round consists of an ordered list of games. Each game is in turn a nested unordered list of two teams. The seeding for each team (ranging from 1 to 16) appears in parentheses after the team name.
5. Where teams are unknown (i.e., in future rounds), the divs in the original bracket typically contain a "&nbsp;". I replaced each of those with placeholder text (e.g., "Winner, Game 201" where "Game 201" is a link to the corresponding game. This is actually a key feature. Sighted users can visually follow the lines of the bracket to figure out which teams might meet in future rounds. This isn’t possible for non-visual users unless the blank bracket cells are populated with some meaningful text that explains how that future game relates to previous games.
6. Each game is already assigned a unique id on the original bracket, using logic that makes it very easy to mathematically calculate which games in early rounds feed into which games in later rounds. However, ncaa.com uses these ids to refresh the bracket every thirty seconds so it’s always up to date. The updates include up-to-date scores for games in progress. This is great, but there’s an unfortunate downside: When the games are refreshed it reloads all the original markup, destroying the accessibility changes I’ve added. So when the page loads I’m grabbing all the current data and re-purposing it, then suppressing the automatic updates. This means the accessible bracket doesn’t have the ability to update itself, but if you manually refresh the page you’ll get current information.
7. In addition to the bracket, I’ve added two new sections at the bottom of the page: "Active Games" and "Schedule of Upcoming Games" Each of these sections is marked with an <h1> heading.
8. The original bracket makes liberal use of abbreviations for schools, such as LIU, ODU, and BU, in order to conserve space. I added an <abbr> element for most of these, with the full name spelled out in the @title attribute. Screen reader users need to have abbreviations turned on in order to benefit from this feature.

How to Use It

1. Using the Firefox web browser, download and install the Greasemonkey extension
2. In Firefox, open my Accessible March Madness 2011 script
3. Greasemonkey should prompt you to install the script. To do so, just click the Install button.
4. In Firefox, go to ncaa.com/bracket. The script should run automatically, and you will get an accessible version of the site. It takes a while to load because ncaa.com is loading a lot of data, then my script requires additional time to parse that and reconstruct the page. This might be a bit confusing since you may be able to read the inaccessible page prior to the accessible version fully loading. I recommend waiting patiently, and listening for signs that your screen reader has fully loaded the page (JAWS by default announces percent loaded, and when the page is fully loaded announces the number of headings, links, and ARIA landmarks.
5. Here are some tips for navigating the bracket with a screen reader:

Navigation Tips for Screen Reader Users

• Each region is marked up with a level-2 heading (<h2>). You can jump between regions using your assistive technology’s heading navigation keys (for example, pressing the "2" key jumps between regions in JAWS). In addition to the tournament’s four geographic regions (East, Southwest, West, and Southeast), the "First Four" and "Final Four" are also organized as distinct regions in this bracket.
• Within each of the four geographic regions, there are four rounds (Second Round, Third Round, Sweet 16, and Elite 8). These are all marked up with a level-3 heading (<h3>). So one way to explore the bracket is to go to a region, then jump between rounds using your assistive technology’s heading navigation keys ("3" in JAWS jumps between rounds).
• Within each round, games are organized as an ordered list. There are 8 games in the Second Round, four games in the Third Round, two games in the Sweet 16, and one game in the Elite 8, per region. You can move up and down through these lists of games with the arrow keys. Each game is organized as a nested list of two teams. Each team’s seeding within that region is identified in parentheses (seeds range from 1 to 16, where 1 is presumed to be the better team).
• Where teams are not yet known, the line on the bracket says "Winner, Game X" where X is a unique id of a game from the previous round. The Game ID is a link. Clicking on it will take you directly to the game in question so you can see which teams are playing in that game. Following these links works more gracefully in some screen readers than others. If following these links results in excessive chatter, try adjusting your screen reader’s verbosity level, or avoid using this feature.

Disclaimer

Although Greasemonkey can be very effective tool for fixing accessibility problems, one significant shortcoming is that the scripted solutions may no longer work if the page is modified. At this moment, my NCAA.com script seems to be working. However, as the tournament progresses, the site may introduce new features that I hadn’t accounted for. If you spot any major problems, let me know. Or better yet, if you have JavaScript skills, please feel free to modify this script to make it better!

Finally, I apologize that there’s no accessible tournament pool this year. I had hoped to tackle the NCAA Bracket Challenge using this same approach, but it proved to be too great a challenge.