What makes this NCAA Tournament Bracket and accompanying website accessible? This page aims to explain that. Most of the content below is from last year's bracket, but the core accessibility features haven't changed much. I am in the process though of adding additional accessibility features, sucn as accessible forms (the tournament pool), and dynamic interactive content using ARIA. Unfortunately March arrived too quickly. so these features will have to wait until 2010.
- The bracket is built with valid, well-structured XHTML.
- Level 2 headings (<h2>) are used to identify each of the four tournament reqions, plus the Final Four. Screen reader users can easily navigate between these headings (for example, using "2" and "Shift+2" in JAWS). Opera also supports this functionality for all users, with the "S" and "W" keys.
- For users who aren't using technology that jumps between headings, a navigation menu is provided near the top of the page that allows all users to jump easily to a particular region.
- Within each region, every round in the tournament is contained within its own div. Each div includes a level 3 heading (<h3>) and a list of games. The list of games for most rounds is a nested list. The parent list is an ordered list, comprised of unordered lists of two teams (i.e., games). Where teams are known, they're explicitly named along with their tournament seed (in parentheses). Where teams are unknown (i.e., in future rounds), a reference is provided to the earlier game that feeds the current game (e.g. "Winner, Round 1 Game 3"). An ordered list is used as the parent container because the number associate with the list item aids in navigation for screen reader users. For example, if a user's current focus is on "Winner, Round 1 Game 3", they can navigate backwards to Round 1 using their heading shortcut key, then navigate through the ordered list until they get to Item 3 in the list, which represents Game 3, and can find out which teams are playing in that game. Using this strategy screen reader users can thoroughly explore the bracket, looking for exciting potential match-ups in future rounds.
- Sighted users don't need the "Winner, Round 1 Game 3" text because this information is communicated visually by the layout of the bracket. Therefore, this text is hidden from sighted users by masking it against the background. As a particular round is updated with the names of winning teams, the color style for that round will be changed so that the text becomes visible to sighted users.
- To attain the bracket look and feel, each of the divs (representing rounds within a region) was floated left, allowing them to be presented in adjacent columns.
- Bracket lines were attained using CSS borders at the bottom of each list item and to the right of each second list item (the team on the bottom of a particular pairing).
- Relative size units (em's and percentages) were used throughout the style sheet to allow users to resize the fonts if needed and still attain a readable bracket. This presented some challenges for getting the lines to appear in the correct places. Ultimately I think I attained that. The bracket layout seems to hold up well under a variety of font sizes and screen resolutions in Internet Explorer 6 and 7, Firefox 2 and 3, and Opera 9 in Windows; and Firefox and Safari in Mac OS X.
Future Plans
- An Accessible Tournament Pool application, with lots of fun and engaging social networking features
- Detailed information about each team, accessible to users on request within the bracket or tournament pool applications. There are two challenges involved with this feature:
- Making it accessible. This type of feature is perfect for testing and demonstrating ARIA, but it also needs to be accessible and usable to people who haven't yet upgraded to ARIA-enabled assistive technologies.
- Getting the content. I tried unsuccessfully in 2009 to find sources of data feeds that could populate the site automatically. However, I guess I shouldn't be surprised that very little in the collegiate sports industry is free. Without a data feed, I'm stuck entering data on 64 teams. If we just stick with the facts, that might be do-able, but the best information would be a short paragraph describing the team. I\'m a huge a basketball fan, but this pushes the limits of even my knowledge. I might build a small, narrowly-focused, but accessible wiki if folks in the community would commit to adding content about teams in late February and early March. Any volunteers? If your're interested drop me a line.