Accessible Dropdown Menus Revisited

Back in March 2012 I wrote a blog post titled Accessible Dropdown Menus summarizing my observations with various accessible dropdown menu models, including Suckerfish, Son of Suckerfish, Superfish, Dropper Dropdown, UDM4, Simply Accessible, YUI MenuNav Node Plugin, and the Menubar widget example developed by the Open Ajax Alliance. Of all these, I liked the Open Ajax Alliance (OAA) example the best.

Here's the original OAA menubar, and my customized OAA Menubar.

Over the last 21 months, my thinking has evolved a bit, aand I've done quite a lot of further experimenting. Since lots of folks have stumbled upon and are referencing my earlier tests, I thought I should post an update documenting how my thinking has changed. Here goes...

Continue reading

Choosing a Web Portal: NetVibes vs Protopage

Given the death of Google Reader in July and the eminent death of iGoogle in November, I've been shopping for alternatives. I need a single service that will serve as my dashboard and web portal, providing me with news updates, RSS feeds, and convenient access to bookmarked websites all from a single location. It needs to be cloud-based, browser-agnositc, free, and ad-free.

I've been combing over online reviews and soliciting input from trusted friends and colleagues for months, and a few weeks ago I finally narrowed my focus to two services, NetVibes and Protopage. Since then I've been using both together in separate tabs in various browsers. And finally, I've made my decision.

Here are my impressions based on the features that matter most to me.

Continue reading

Spam and Literature

I've long been an enthusiast of collage in various media—visual art, literature, music. This Fall I hope to unveil my latest musical project, a grand musical mashup that I've been actively working on for over a year, but my interest in such things originated much earlier. Back in the 80's I was into William S. Burroughs's literary cut-ups, and as a computer guy I've come to appreciate the vast potential for digital creativity in this space. For example, check out The Morality Rock Story: Defending Urination, political art inspired (and produced) by Dragon NaturallySpeaking. There's a well-developed and fascinating course on this topic on remixthebook.com.

I've recently come to appreciate the contribution that spammers are making to this artistic genre. In an effort to slip past spam filters, they're producing digital cut-ups from a wide variety of source materials and combining them in ways that are sometimes quite intriguing, maybe even... beautiful. I'm not alone in thinking this. There's an entire movement of people who are into "spam lit", as examined in theguardian.com.

This blog post is inspired by the spam email I received this morning. The focus on college basketball, and the insightful quote from Hofstra's web design manager, are on target given my interests and profession. I wonder if that's coincidence or intelligence? Perhaps they're tapping into the same data about individuals that Google and Facebook are using to provide targeted advertising. Anyway this is fascinating reading, and I feel compelled to share it. Hopefully the author won't sue me. The subject of the email was Introducing, but I'm opting to title this work...

Continue reading

Comparison of Browsers on HTML5 Video Accessibility

Browser support for HTML5 video is constantly evolving, including support for accessibility features. Consider this a snapshot of the current state of accessibility support as of June 14, 2013. It may change tomorrow.

First, here's the code one might use to add video to a web page, including captions, subtitles and text-based audio description:

<video controls width="640" height="480" aria-label="Video Player" 
  poster="screenshot.jpg">
  <source src="video.mp4">
  <source src="video.webm">
  <track kind="captions" src="captions.vtt" default label="English">
  <track kind="subtitles" src="subtitles_fr.vtt" srclang="fr" label="French">
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
  <track kind="description" src="description.vtt" srclang="en" label="English Description"> 
</video>

Some explanations:

  • The controls attribute shows the browser's default player controls. This is optional since some developers may want to create their own controls.
  • There are two <source> elements, since browsers don't all support the same video file formats. They're coming around, but for now WebM is a reliable fallback for browsers that don't support H.264 (MP4)
  • The <track> element is used to synchronize timed text with the video. There are several kinds of track elements, as indicated by the kind attribute (I'm most interested in captions, subtitles, and description).
  • Audio description is not supported by any browser, but the framework is there in the HTML5 spec for possible future support.
  • The default attribute is (according to the spec) optional, but if included is intended to enable that track by default, e.g., to deliver the video with English captions turned on. My tests show that default is actually required; otherwise captions don't work at all in Chrome, Safari, or Opera.

Also, the <video> element receives keyboard focus in all browsers, but in some browsers the video focus indicator is sorely inadequate (a thin dashed line) and it's practically impossible to tell when the player has focus. For this reason I like to add a visual focus indicator using CSS, something like this:

video:focus { 
  border: thick solid yellow;
}

The observations described below were made with variations on this sample HTML5 video page, which features the AccessComputing video IT Accessibility: What Campus Leaders Have to Say.

Continue reading

The Webby Awards Unveils Exciting New Inaccessible Website

The Webby Awards is the leading international award honoring excellence on the Internet. It's been around since the late 1990's, and each year about this time it announces this year's nominees (to be announced on April 9 this year), followed soon after by the winners (on April 30 this year). As the gear up for the announcements, there's typically much fanfare, and this year (today, in fact) they have announced a new website: The Webby Awards Gallery + Archive.

In their press release, David-Michel Davies, Executive Director of The Webby Awards, says this:

Over the past 16 years, Webby Winners have continually set the standard for excellence on the Web; they are the sites, innovations and world-changing platforms that have shaped the Internet into what it is today.

And what exactly is the Internet today? Is it fully accessible to everyone who has web-enabled technologies? Or is it racing ahead to be cool and clever, even if that means leaving entire groups of people behind?

There are occasional positive signs that designers and developers care about not discriminating against people who use audible or tactile interfaces rather than visual ones; or people who are physically unable to use a mouse and are instead operating computers by keyboard or voice; or people who are unable to hear audio.

These designers and developers try to build their innovations on a foundation of semantic, standards-based markup and make an honest effort not to leave a significant portion of the world's population behind (more than 1 billion people worldwide have disabilities, according to the World Health Organization).

I would hope that The Webby Awards, in setting the standard for excellence on the Web, would also set a standard for accessibility. Unfortunately their new website exemplifies what's bad about the Web. It embraces cool and clever at the expense of accessible and usable.

Shortly after Webby Awards began in the late 1990's, the W3C Web Content Accessibility Guidelines (WCAG) 1.0 became an official W3C recommendation. After 15 years and exhaustive efforts from the W3C and countless others to educate the world about accessible web design, it is inexcusable for any website to not conform to at least to the basic principles of WCAG. When people create websites that completely ignore accessibility they are either (a) clueless about web design and development or (b) willing to discriminate against people with disabilities.

Here are my observations about the Webby Awards Gallery + Archive:

Continue reading