Accessibility for Sharethis - Dustin Leer - Designer & Front End Developer

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.

view raw

sharethis.js

hosted with ❤ by GitHub

	jQuery(document).ready(function($) {
	setTimeout(function(){
	//————————–
	// SHARETHIS a11y
	//————————–

	// Loop through an array of data-network names
	['facebook', 'twitter', 'pinterest'].forEach(function( platform ) {
	// Adds a11y to sharing icons
	$('.st-btn[data-network="' + platform + '"').attr({
	'title' : 'social ' + platform.charAt(0).toUpperCase() + platform.slice(1) + '',
	'aria-label' : 'Open ' + platform + ' sharing modal',
	'tabindex' : '0',
	'role' : 'content-info',
	});

	// Adds enter key functionality to work like a click
	$('.st-btn[data-network="' + platform + '"').keypress( function( e ) {
	if ( e.which && e.which == 13 ) { // 13 is character code for enter
	// event.preventDefault();
	$(this).click();
	}
	});
	});

	// // Checks to see if container is empty because of browser social blocking
	if ($('.sharethis-inline-share-buttons').is(':empty')) {
	$('.share').addClass('no-social');
	$('.sharethis-inline-share-buttons').append('<div class="no-social">Your browser may be blocking social sharing.</div>');
	}
	}, 100);
	}

Share this:

Like this:

Leave a Reply Cancel reply