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
onclickevents or because they are
aelements without an
- 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
With HTML5, custom attributes are easy—just use custom data attributes. You get your custom attributes without ruining validation as a QA tool.
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.
- Previous post: Accessibility checklists can be helpful if used right
- Next post: Styling ordered list numbers