Let me start by saying I don’t know everything when it comes to Web Accessibility and I’m still learning a ton about it and how to do things properly. I am trying my best to do what I can as a developer to make the web a better and more open space, this is my attempt at making Sharethis more accessible.
Sharethis is a popular social sharing plugin on many platforms, not just WordPress. Recently I had been tasked with adding the sharing functionality to a site I was building. This site needed to be WCAG 2.0 compliant, but I was having an issue with Sharethis and tab indexing. My issue was when I was using may tab key to go through the site, it was skipping over the sharing section completely, which was not good. So I did some digging and decided to add tabindex
to Sharethis, but how?
Since I couldn’t find any documentation on how to do this within the WordPress plugin itself, I took it upon myself to add it and other accessibility niceties. Among them were title
, aria-label
, role
and finally click functionality for the enter key. I did this via some JS, now mind you I’m fairly rudimentary in my JS skillset and still lean on jQuery for a lot of help. After writing this snippet, I slacked my friend Zach Fedor to help me stream line my original code.
- First we made an array of the platforms, each as a lowercase string.
- Then we loop over it, calling each string
platform
. - Then concatenate some of the strings
'.st-btn[data-network="' + platform + '"]'
. - Finally the
title
value looks a little weird because we had to capitalize the first letter, unlike the rest of them. So it grabs the first letter of platform and uppercases it, then adds on the rest of the string.