Accessible Social SharingBuild a WordPress Plug-in

Twitter: @joedolsonHashtag: #id24

Common Problems

- Pop-ups and iframes- Links with no content- Keyboard traps- Hard to find

Twitter: @joedolsonHashtag: #id24

The basics of a WordPress plug-in

- Plug-in Info Comment Block- Internationalization- See: demo/demo1.php

Twitter: @joedolsonHashtag: #id24

Basics of a sharing link:

- Where is it going?- What is it sharing?

Twitter: @joedolsonHashtag: #id24

What data do we need?

- Post Title- Post Permalink- Post Thumbnail- Post Thumbnail alt attribute- See: demo/demo2.php

Twitter: @joedolsonHashtag: #id24

Where does this data go?

- https://www.facebook.com/sharer/sharer.php?u= - https://twitter.com/intent/tweet?text= - https://plus.google.com/share?url= - https://pinterest.com/pin/create/button/?url=&media=&d

escription=- See: demo/demo3.php

Twitter: @joedolsonHashtag: #id24

Turn those URLs into links

- Keep them simple.- Internationalize your strings.- See: demo/demo4.php

Twitter: @joedolsonHashtag: #id24

Put those links inside a container

- Navigation landmark for findability- Heading for browsability- See: demo/demo5.php

Twitter: @joedolsonHashtag: #id24

Get it on the page.

- Learn the power of add_filter()- Make sure this only runs when you want it.- See: demo/demo6.php

Twitter: @joedolsonHashtag: #id24

Decorate it!

- Plain text links don’t engage the audience.- Social media services have widely

recognized icons. Use them.- See: demo/demo7.php

Twitter: @joedolsonHashtag: #id24

Get some context going.

- Create accessible tooltips.- Add generated content in its own container.- See: demo/demo8.php- Styles: https://github.com/joedolson/id24/blob/master/css/id24.css - See: http://heydonworks.com/practical_aria_examples/#input-tooltip

Twitter: @joedolsonHashtag: #id24

Share your content!

Plug-in: https://github.com/joedolson/id24

Twitter: @joedolsonHashtag: #id24

Thank you!

Joseph Dolsonhttp://www.joedolson.com/

joe@joedolson.comhttp://twitter.com/@joedolson