Do unobtrusive, accessible social media sharing widgets exist?

Many clients are still asking for various bookmarking widgets for social media. You know, the kind that shows a bunch of icons for Twitter, Facebook, email, etc. Two popular examples are ShareThis and AddThis, but there are others.

What bugs me with every social media sharing widget I have looked at is that they are not very keyboard friendly, i.e. they are difficult or even impossible to use without a mouse. They also tend to use invalid, obtrusive markup.

The keyboard problem

The problems I’ve seen belong in one of the following two categories:

“Buttons” that can’t receive keyboard focus (and thus cannot be activated), either because they are span elements with onclick events or because they are a elements without an href attribute.
Buttons/links that can receive keyboard focus but suppress the browsers’ focus marker, making it very difficult for sighted keyboard-only users to know where keyboard focus is.

Unless I’m missing something, making widgets like these keyboard accessible shouldn’t be difficult at all. I personally can’t think of any reason for not using real links, created with proper a elements with href attributes, or real buttons.

The markup problem

Another common problem with sharing widgets is that the HTML they tell you to copy and paste into your page tends to be both invalid and obtrusive. Invalid because it uses custom attributes or deprecated markup. Obtrusive because most of the time the markup won’t work as expected (or at all) without JavaScript.

With HTML5, custom attributes are easy—just use custom data attributes. You get your custom attributes without ruining validation as a QA tool.

Implementing the widgets unobtrusively shouldn’t be a problem either. Since most of the time the widgets won’t work without JavaScript, you could simply use JavaScript to insert the markup. If JavaScript is off, there won’t be any “dead” links or buttons left to confuse users. You just need a single placeholder element or the option to specify which element to insert the widget into when initialising the script.

Like the keyboard accessibility problem I have a hard time thinking of a good reason for sharing widgets not being implemented this way.

Do I have to create my own?

Writing your own widget is an option, of course. But doing so can involve quite a bit of work if you also want sharing statistics etc., which most people tend to want. Plus writing your own only makes the widget accessible on the sites you build. It would be much better if the widgets “everybody” is using were made accessible.

So, anyone know of an AddTHis/ShareThis type of widget that is or can easily be made keyboard accessible and is unobtrusively implemented? Please drop me a note by email or on Twitter.

Posted on May 23, 2011 in Accessibility