About this Website
The Accessible NCAA Tournament Bracket is a prototype for making March Madness more accessible to the full spectrum of college hoops fans, including those using non-visual interfaces such as screen readers and those who are physically unable to use a mouse.
The flagship feature of this site is the bracket. It's an accessible bracket because it uses well-structured, standards-based markup that makes it easy for non-visual users to navigate and understand the relationships between games. For tips on how to navigate the bracket with a screen reader, see the Help page.
Another cool feature is the pool, which allows users to make their own tournament picks, and compare their bracket with other players. There are many online tournament pools like this, but few if any of them use standard HTML form fields to capture users' picks. This pool uses HTML forms and is fully accessible to everyone, although you have to play in order to experience it!
Below is a list of accessibility features of this site. For additional detail, see my blog post from 2010 titled Accessible March Madness.
I welcome your feedback and feature requests. Please feel free to contact me via my web form or on Twitter at @terrillthompson
Features of the Bracket
- The bracket is built with valid, well-structured HTML.
- Level 2 headings (<h2>) are used to identify each of the four tournament regions, plus the Final Four. Screen reader users can easily navigate between these headings (for example, using "2" and "Shift+2" in JAWS).
- 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.
- All of the above structure is presenting using a bracket look and feel using Cascading Style Sheets (CSS).
- 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.
- The bracket (as well as the Scores page) includes a set of controls for toggling on or off the seeds and scores for each team. Some users might find this additional detail distracting, so they have the option of toggling it off.
Features of the Tournament Pool
- The interactive tournament pool features a standard form with accessible markup. This makes it easy for any user to select teams, and doesn't require eyesight or drag-and-drop.
- When making their picks, users can access stats about each team so they can make informed picks. This information is displayed dynamically on users' request in an accessible modal dialog.
- Users who complete a tournament bracket can return to their bracket throughout the tournament to track how their picks are doing. This includes visual features (e.g. lines stricken through losing picks) as well as non-visual features (e.g., hidden text that informs screen readers of correct vs. wrong picks).
Other Features of the Website
- Live score updates on the bracket. When a game is active, it's highlighted visually so sighted users can see which games are live. For non-visual users, each game on the bracket is marked up as an ARIA live region so assistive technologies can announce the scores each time they're updated.
- Time zone selector. A control on the Schedule page enables users to see the times for upcoming games in their local time zone.
- "Printable version" of your bracket (or anyone else's). This is available in the Pool section of the site. Simply click on the "Printable version" link near the top of the page and the bracket will be displayed on a clean page with no menus or unnecessary text, suitable for printing. This was a requested feature for people who wanted to share their picks with sighted friends or co-workers.
- Direct links to radio broadcasts for each game. These links are available on the Schedule page. Currently the source of choice for radio broadcasts is Westwood One, formerly Dial Global. Since this is a third party site I can't guarantee its accessibility but multiple screen reader users recommended it.