Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible
Social Sharing
Build a WordPress Plug-in
Twitter: @joedolson
Hashtag: #id24
Common Problems
- Pop-ups and iframes
- Links with no content
- Keyboard traps
- Hard t...
Twitter: @joedolson
Hashtag: #id24
The basics of a WordPress plug-in
- Plug-in Info Comment Block
- Internationalization
-...
Twitter: @joedolson
Hashtag: #id24
Basics of a sharing link:
- Where is it going?
- What is it sharing?
Twitter: @joedolson
Hashtag: #id24
What data do we need?
- Post Title
- Post Permalink
- Post Thumbnail
- Post Thumbnail a...
Twitter: @joedolson
Hashtag: #id24
Where does this data go?
- https://www.facebook.com/sharer/sharer.php?u=
- https://twit...
Twitter: @joedolson
Hashtag: #id24
Turn those URLs into links
- Keep them simple.
- Internationalize your strings.
- See: ...
Twitter: @joedolson
Hashtag: #id24
Put those links inside a container
- Navigation landmark for findability
- Heading for ...
Twitter: @joedolson
Hashtag: #id24
Get it on the page.
- Learn the power of add_filter()
- Make sure this only runs when y...
Twitter: @joedolson
Hashtag: #id24
Decorate it!
- Plain text links don’t engage the audience.
- Social media services have...
Twitter: @joedolson
Hashtag: #id24
Get some context going.
- Create accessible tooltips.
- Add generated content in its ow...
Twitter: @joedolson
Hashtag: #id24
Share your content!
Plug-in: https://github.com/joedolson/id24
Twitter: @joedolson
Hashtag: #id24
Thank you!
Joseph Dolson
http://www.joedolson.com/
joe@joedolson.com
http://twitter.com...
Upcoming SlideShare
Loading in …5
×

Build a WordPress Plug-in: Accessible social sharing

1,301 views

Published on

Published in: Internet
  • Be the first to comment

Build a WordPress Plug-in: Accessible social sharing

  1. 1. Accessible Social Sharing Build a WordPress Plug-in
  2. 2. Twitter: @joedolson Hashtag: #id24 Common Problems - Pop-ups and iframes - Links with no content - Keyboard traps - Hard to find
  3. 3. Twitter: @joedolson Hashtag: #id24 The basics of a WordPress plug-in - Plug-in Info Comment Block - Internationalization - See: demo/demo1.php
  4. 4. Twitter: @joedolson Hashtag: #id24 Basics of a sharing link: - Where is it going? - What is it sharing?
  5. 5. Twitter: @joedolson Hashtag: #id24 What data do we need? - Post Title - Post Permalink - Post Thumbnail - Post Thumbnail alt attribute - See: demo/demo2.php
  6. 6. Twitter: @joedolson Hashtag: #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
  7. 7. Twitter: @joedolson Hashtag: #id24 Turn those URLs into links - Keep them simple. - Internationalize your strings. - See: demo/demo4.php
  8. 8. Twitter: @joedolson Hashtag: #id24 Put those links inside a container - Navigation landmark for findability - Heading for browsability - See: demo/demo5.php
  9. 9. Twitter: @joedolson Hashtag: #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
  10. 10. Twitter: @joedolson Hashtag: #id24 Decorate it! - Plain text links don’t engage the audience. - Social media services have widely recognized icons. Use them. - See: demo/demo7.php
  11. 11. Twitter: @joedolson Hashtag: #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
  12. 12. Twitter: @joedolson Hashtag: #id24 Share your content! Plug-in: https://github.com/joedolson/id24
  13. 13. Twitter: @joedolson Hashtag: #id24 Thank you! Joseph Dolson http://www.joedolson.com/ joe@joedolson.com http://twitter.com/@joedolson

×