Making AddThis More Accessible

Most times when we announce a new feature or improvement, we invite you to take a look. This isn’t one of those times. Instead, this feature announcement is about listening and touching AddThis. We have updated our code to work better with keyboard navigation and screen readers. Now when you visit a site that is using AddThis, you can tab through all of the available sharing options. If you choose to see more options, you can easily filter the list of services and then tab to the one you like. We’ve also added focus styling so if you are navigating with a keyboard, you’ll have a better idea where you are. Also, if you are using a screen reader, you should properly hear the name of the service.

If you’re a publisher you might be asking yourself, “How do I make this available to my users?” It’s easy, we’ve enabled this for everyone. Your site’s visitors are now even more able to share whatever they like, wherever they like.

The key highlights of what we did:

  • Toolboxes are keyboard navable
  • Toolboxes are marked up so screen readers can use them all
  • The expanded menu is keyboard navable and closable with the esc key
  • Graphs and maps in analytics have alternatives for screen readers

At AddThis, all of our users are important to us and we believe it should be as easy as possible for users to share content from their favorite publishers. This is just one step in our continuous journey to make AddThis as great as we can. We have been able to get some feedback from Russell Heimlich and other accessibility experts to help make this happen. If you have ideas or suggestions on how we can give you a high quality experience with AddThis, please get in touch!

  • http://www.ewingenterprise.com/ David Ewing

    Hey Aaron, does this upgrade effect the mobile versions as well or is this just for screen readers?

  • michael jensen

    sounds like a helpful tool, im hoping it makes surfing the net easier

  • http://www.techreceptives.com/ Tech Receptives

    Very good stuff. Thanks for sharing.

  • Nick

    I can see this catching on more now…great job on the updates

  • http://Facebook.com Ebuka123

    This is good

  • http://www.rifainews.com/ rifainews

    I really like the addthis because the installation is simple and very light on its access

  • http://www.uggbaileybuttontriplet.us/ Christian

    good post,support Making AddThis More Accessible

  • http://www.qarchive.org/lab/ Nick

    Good news in fact! Thanks for AddThis team for nice things you always bring to us!

  • http://www.nfljerseysfun.com Meggan Narvaez

    Great feature. Thanks.

  • goetsu

    Hi,

    can you tell me where can i find this addthis “accessible” script because the online version is totaly inaccessible for example the current code is something like :

    - without href attribute the link can’t be keyboard navigable -> add href=”#” on the link
    - the facebook, twitter, etc logo is a background image, so when the user has turned off picture, disable css or use a user css the image isn’t rendered -> use element with alt attribute specified
    - the link is empty so with a screenreader user can’t know what is this link for -> use element with alt attribute specified

    the option panel use something like :


    Courriel

    - using tabindex > 0 is a wrong idea because tabindex is refering to the whole page not the parent div of the links -> add href=”#” on the link and remove tabindex

    - some link open in a new windows and user must be aware of this -> add ” – open a new window” in the title (if links) or in the alt attribute (if img)

    This is just a quick review of problems with your current script.
    Some other parts may need improvements too

    Regards,

    Aurélien Levy

  • http://aaron.jorb.in Aaron Jorbin

    Hi Aurélien,

    The href, and a title attributes for screen readers are added dynamically via javascript at run time.

    The new window notification and removing tabindex makes sense. I’ll ticket those so that we can address it in an upcoming release. Our Latest generation of sharing tools gets rid of the model box which contains the tabindex items, but it does make sense to get rid of them for this generation.

    if you have any other suggestions, please email me at jorbin@clearspring.com. I’d love to hear them.

    Thanks.
    -Aaron

  • http://www.SumonRahman.com Sumon Rahman

    An newsworthy speech is worth report.

  • Anastasia Cheetham

    We have found a problem with the keyboard accessibility of the “AddThis” popup on our site: If you tab through all the share icons and past the end of the popup, tab focus winds up at the start of the page instead of whatever comes after the “AddThis” icon. This would mean that everything after the icon completely inaccessible to keyboard users. Has anyone else noticed this?

    You can see it on our development site:
    http://staging.oercommons.org

  • Fran O’Raff

    Hi,
    We have noticed the same problem as Anastasia.Once you’ve tabbed through the “AddThis” box to the end of the share icons, the tab focus goes back to the start,skipping any content that is after the “AddThis”. We checked it in Chrome,Safari and Firefox, but they all gave the same results.

    You can see the problem here:
    http://threshold.ie/advice/:

  • http://aaron.jorb.in Aaron Jorbin

    Thanks Fran and Anastasia for letting us know. The team is looking into a fix right now.

    In the meantime, a work around is to add our share counter to the toolbox. To do that, you can add

    after

    We will have the fix out as soon as we can. Thanks again for the report.

  • Lauren Brandstein

    I’m having the same problem: Keyboard tabbing wraps around after the Share menu, leaving the rest of the page inaccessible to keyboard users.

    I will try adding the counter on our dev site (and subsequently hiding it with CSS since it’s not part of the design) and report back. This is a government website, so 508 is a dealbreaker. If the fix doesn’t work, the updated AddThis will be removed and/or replaced with older code we built from the bottom up to be accessible, using the very old “accessible” AddThis URL structures.

    Meanwhile, has anyone else noticed major changes to how Firefox approaches keyboard navigation? I haven’t had to do any specific keyboard navigation work in several versions (I’m on Firefox 12 for Mac right now). Is this how FF works now or am I getting interference from a plugin or something? I can’t get around the page with the tab key; it just jumps between the location bar, quick search bar, seems to focus the entire window contents for one jump, hits some other elements I can’t see/identify, focuses on the one form input (search) on the webpage, then jumps back to the location bar again…

  • Catharine

    Hi, I am working on accessibility of “addthis” and the Facebook Like button renders as “Frame 3″ — including on this page. Do you know how this can be fixed?

    Thanks,
    Catharine

  • John Wright

    Hey,

    I’m having similar problems Anastasia and Fran. We added the counter, however, now what happens is that the focus goes from the AddThis list popup, to the address bar, then back to the counter.

    It’s proving really confusing for some of users. Any idea how we cn get around it?

    Thanks,
    John

  • http://arise.com priti

    hi,
    i am facing the same issue, using tab index, i`m not able to tab further addthis button
    please help me with this.