W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2011

RE: share this bookmark functionality

From: Jason Megginson <jason.megginson@ssbbartgroup.com>
Date: Wed, 2 Feb 2011 11:15:39 -0500
Message-ID: <2cbaebdd833ae875b1cc7291f24e9081@mail.gmail.com>
To: Gavin Thomas <Gavin.Thomas@uwe.ac.uk>, w3c-wai-ig@w3.org
Hi Gavin,

If you are allowed to alter this code, it is possible to make this
accessible but some HTML and JavaScript knowledge is needed. Otherwise, you
may want to contact the author(s) and see what they can do for you.

I generated a couple of the bookmark options from the homepage.  The code
that is generated differs from that on the home page.

Upon inspection of the generated source, there are anchors embedded within
DIV tags for many of the icons. The problem is that some of the anchors lack
a href attribute necessary for keyboard access. A quick solution is to add a
“#” to the href attribute value to the anchors to receive keyboard access.
Upon inspection of the JavaScript, it appears onclick events are tied to the
icons. The onclick events should work with keyboard accessible hyperlinks.

Many of the “share” links open a simulated dialog window and the focus is
placed in a search field. This is good, but the simulated dialog that is
opened is not inline with the “share” link. In other words, the dialog
window content is located at the bottom of the page. This poses a problem
with the harmony between tabbing order and reading order for screen reader

Finally, the icons (“links”) within these dialog windows are structured
within DIV elements as you noted. The use of hyperlinks with href attributes
would be the best option for keyboard access. By default the JavaScript
(JQuery) instantiates onclick events for these controls. If anchors were
used, the current onclick events would work without any additional
(redundant) keyboard event.

If anchors cannot be used in lieu of DIVs, the following must be
implemented:  First, tabindex=0 attributes must be applied to the DIVs. This
will allow users to tab to the icons. However, redundant onKeyPress
JavaScript events must be provided to the DIVs. Unfortunately, onclick
events are not invoked on DIV objects with tabindex=0 applied. We have found
that an onKeyPress event (with appropriate logic when the Enter key is
pressed) will work effectively.

Good luck,

Jason Megginson


*From:* w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] *On
Behalf Of *Gavin Thomas
*Sent:* Wednesday, February 02, 2011 10:09 AM
*To:* <w3c-wai-ig@w3.org>
*Subject:* share this bookmark functionality

I’ve been asked to implement the ‘add this’ (http://www.addthis.com)
bookmarking functionality but I’m aware it has gaping accessibility issues

Not keyboard accessible, the links are divs

Does anyone have any information on creating an accessible version of this?
Received on Wednesday, 2 February 2011 16:16:02 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:36 UTC