#16NTCa11ySession hashtag: #16NTCa11y

March 25, 2016

BJ Wishinsky, Benetech

Chad Leaman, Neil Squire Society

#AccessibilityRocksMake Your Social Media More Inclusive Today

#16NTCa11y

Collaborative Notes: http://po.st/a11y-16NTC

Evaluation Survey: http://po.st/ezpGTv

Housekeeping

#16NTCa11y

Why We’re Here

“The power and promise of social media is still out of reach for some people with

disabilities who do not have the same ease-of-use and benefits as non-disabled

users.” - Alice Wong in Model View Culture

• While social platforms work to improve their accessibility, we can make our

social content more accessible today.

• Accessibility improves usability for everyone think curb cuts!)

• Bonus: Making social content accessible improves SEO!

#16NTCa11yflickr.com/photos/tags/a11ylogo

Social media is constantly changing, so we are all learning. Let’s learn together!

• We’ll focus on content, because that’s what we can control.

• Share your questions and experiences.

• What do you most want to learn?

Check In

#16NTCa11y

The Principles of Accessibility from WCAG 2.0:

• Perceivable

• Operable

• Understandable

• Robust

BJ POURs it On

#16NTCa11y Source: IconsDB

“Create content that can be presented in different ways, including by assistive

technologies, without losing meaning.” - WCAG

Available through sight, hearing, or touch.

• Alternative text.

• Maximize contrast.

• Captions and subtitles.

• Transcripts.

Perceivable

#16NTCa11ySource: IconsDB

Primarily the responsibility of the social network platform (same is true for Robust).

For GIFs and video:

• Give users enough time to read and absorb content.

• Do not use flashing content that can cause seizures.

Learn more: WCAG 2 at a Glance

Operable

#16NTCa11ySource: IconsDB

User friendly, easy to comprehend:

• Use clear language.

• Use simple and concise wording.

• Provide alternative formats.

• Use fonts designed for onscreen viewing.

Learn more: Cognitive Accessibility

Understandable

#16NTCa11y

URLS and Hashtags

People who are blind use screen readers (synthesized speech) or refreshable

braille displays to access online content.

• Use a URL shortener so the screen reader doesn’t recite the whole URL.

• Use Camel Case (Initial Caps) when multiple words are combined.

• Use full words in hashtags where possible.

• The # on your hashtag will not be pronounced.

#16NTCa11y

If there is text in the image,

provide it in the description as

well.

• Use embedded text sparingly.

• Use follow on tweets or link to

a page with full text if it’s long.

• Better still, don’t put long text

in images.

Alternative Text

#16NTCa11y

From National Federation of the Blind:

• Describes what’s most important to

their audience.

View on Twitter.

Twitter Example

#16NTCa11y

On Facebook, Pinterest, and Instagram

there is room for:

• The text embedded in the image.

• Description of the image.

• Call to Action with web link.

View on Pinterest

Pinterest Example

#16NTCa11ySource: Wikimedia Commons

Make sure that colors are not your only

method of conveying information.

• Combine with patterns or symbols to

differentiate objects.

• View in grayscale or use online tools to

check contrast.

Source: WebAIM

Color Perception

#16NTCa11y

How to create an accessible infographic

Really?

Yes!

Source: Access iQ™

Accessible Infographics

#16NTCa11y

Transcripts and captions are not only useful for alternative access!

• Language learners.

• Translation.

• Study & review.

Audio

#16NTCa11y

Chad shows you how it’s

done!

Video Caption

Work Flow

#16NTCa11y

1. Fiverr

#16NTCa11y

2. Transcript

#16NTCa11y

3. YouTube Caption portal

#16NTCa11y

4. YouTube Caption Editor

#16NTCa11y

5. Get SRT file out for facebook

#16NTCa11y

Example of podcast with transcript

#16NTCa11y

Thank You for Joining Us!

Please complete the feedback survey for this session

• http://po.st/ezpGTv

• Can be found in both the mobile app and on the website listing.

Thank you for caring about accessibility. You Rock!

#16NTCa11y

Contact Info

BJ Wishinsky, Social Media Manager, Benetech

email: bjw[at]benetech.org

web: benetech.org

@leapingwoman

Chad Leaman, Director of Development, Neil Squire Society

email: chadl[at]neilsquire.ca

web: neilsquire.ca

@chadleaman

#16NTCa11y

Appendix:

Resources

POUR Principles

Social Network Accessibility

Color Contrast Checkers

Additional Resources

#16NTCa11y

Resources: POUR Principles

Web Content Accessibility Guidelines (WCAG) 2.0

WebAIM:

• Visual Accessibility

• Auditory Accessibility

• Cognitive Accessibility

#16NTCa11y

Resources: Social Network Accessibility

Major social network accessibility initiatives:

• Facebook page @FBAccess

• Twitter web @a11yTeam

• YouTube, Google+ web @GoogleAccess

• WordPress web @WPAccessibility

#16NTCa11y

Resources: Color Contrast Checkers

• SBF Color Checker

• Color Contrast Calculator

• Snook Color Contrast Checker

• WebAIM: Color Contrast Checker

#16NTCa11y

Additional Resources

• Federal Social Media Accessibility Toolkit

• Media Access Australia: Social Media for People with a Disability

• Diagram Center: Making Images Accessible

• Social Media and Accessibility: Resources to Know

• Content marketers ignore accessibility at their peril