Building a Better Twitter Button: A Story of Community

accessibility button

This website now has an easy way for readers to share content on Twitter. “So what?” you’re wondering – millions of websites let readers share to twitter; the little Twitter bird is everywhere.

True.

But you won’t find the bird on my new button (which, I know, is technically a link). And while most people get their share buttons from cold code generated on the tech giant’s site, my Twitter share link is here because of the generosity, technical know-how, and commitment of the WordPress and Twitter accessibility community. For these reasons, I think the birth of my Twitter share button is a story worth telling.

Before I do, here is the button – let me know what you think of it!

share on twitter


Moving LFLegal to a New Home

Why was I just now looking for a Twitter share button when they’ve been around for as long as Twitter has? This is where the story starts.

For various reasons, I recently had to change the hosting company for LFLegal. As a result, my WordPress site had to be updated. Not as easy as it sounds.

In 2008 Mike Cherim build me a beautiful, useful and accessible site. It was my very first website and in the six years since it was delivered to me, I’ve come to appreciate both the front end where I can share information, and the back end which made it easy for me to do so much myself. In 2008 the site was included in the Web Content Accessibility Guidelines (WCAG) 2.0 implementation process, and in 2014 I was honored that the site got a mention in Whitney Quesenbery’s wonderful new book, A Web for Everyone.

But as good as the site is, when it came time to move it to the new hosting company, it was too old for an easy transition. (And, shame on me, I had not updated WordPress along the way.)

WordPress experts to the rescue

I asked Joseph Karr O’Connor, WordPress accessibility evangelist extraordinaire, if he could help. In doing everything he could to get my site in shape for the move, Joseph gave me the first taste of the strength and kindness of the WordPress accessibility community.

Joseph brought in someone to assist him; someone who, like Joseph, went beyond helpfulness in getting my site ready for its big day. My second site-moving angel was Gregg Franklin of ServerPress, a company that provides developer and design solutions for WordPress. Gregg and Joseph had met at a WordCamp conference; more proof of the WordPress community coming to my aid.

Thanks to Joseph and Gregg, LFLegal moved to its new hosting company in January. The site is now living in the most current version of WordPress. If I used the Twitter-generated button code on my old site, a button would not display. But now I was up-to-date. I was ready to get Twitter buttons!

Searching for an Accessible Twitter Share Button

I was proud of myself for figuring out how to get a share button from Twitter and put it on a post. (I am a lawyer after all.) As soon as I did, I sought feedback from two blind tech experts to make sure the button worked as it should for screenreader users. Pratik Patel and Jennifer Sutton gave me quick helpful feedback. They were proof that the Twitter accessibility community, like the WordPress community, is amazing!

I also asked Jim Thatcher what he thought of the Twitter-generated button. Whenever I have a question about site accessibility — any site — Jim is always there with a straight-forward and helpful answer.

Jennifer, Pratik and Jim all said the same thing: the button was manageable but clunky. There was a frame around the button that said “Twitter Tweet button frame” but in fact the object was a link. One of those annoyances that people with disabilities face every day when navigating the web. While Pratik and Jennifer both said they could use the link, I wanted to do better.

So where to look for a better Twitter button? On Twitter, of course. At 5:00 p.m. on Saturday I posted a tweet to the Twitter Accessibility Team. My Tweet said “tweet” ‘buttons’ are links but screenreaders read “Twitter Tweet button frame” Any way to clean that up?

Never did hear from the Twitter Accessibility Team, but the Twitter accessibility community came through with flying colors.

Finding the Code, Getting My Plug-In

Before 9:00 a.m. the next morning, I had a tweet from David A. Kennedy. Thank goodness David, who I’ve never met in person, follows me on Twitter! He already knew what Jennifer, Pratik and Jim told me — “the official tweet buttons are in an iFrame,” he tweeted. There’s a better way.

David’s tweet included a link to a post on Christian Heilmann’s website. With Christian being a resident of London, now my search for an accessible, usable Twitter share button was international.

Christian’s post that David tweeted was titled “Quickie: A scriptless, imageless, no-third party code Twitter share button for WordPress.” The WordPress community is giving; Christian’s post had the code I needed to make an accessible button/link.

Now what?

Not being a coder, I didn’t understand how to easily use Christian’s code to make my buttons. Back to Gregg Franklin. Sunday morning I sent Gregg and email asking if he could let me know how to use the code on my site to build a better button. Three hours later he wrote me that “The plugin has been created and installed.” (That’s three hours – not three days, and remember, this was a Sunday!) I barely know what a plug-in is, and now I had one for my very own Twitter buttons.

Gregg made me something so easy to use — I just type two words in brackets and voila, the link that looks like a button is on my site working perfectly. I sent it back to Jennifer, Pratik and Jim, got a thumbs up. Expect to see it on most LFLegal posts in the future.

So thank you to Joseph and Gregg who got my site ready for the move. To Jennifer, Pratik and Jim for quick and candid input. To David for directing me to Christian, and to Christian for writing about good code for Twitter buttons. And an extra shout-out to Gregg for the plug-in. And to the entire Twitter and WordPress accessibility and usability communities for being just that: community.

Simplified Summary

This is a post about Lainey Feingold’s efforts to find an easy way for people to share her website content on Twitter.  Many people helped her and now she has an easy-to-use link.