Skip to main content

Inclusive Design for Social Media and Email

Inclusive Social Media graphic
Open presentation in Google Slides in a new window

On Friday August 26th, Carolyn Quintero and Dylan Pope presented Inclusive Design for Email and Social Media at the Boise State Marcomm Summer Camp.

During this session participants learned how to recognize barriers to access on social media and email engagement, and apply inclusive design throughout features, functionality and structure to ensure engagement with all visitors and subscribers.

Provided here is a summary of their presentation including resource links.

Who are we?

Carolyn Quintero is a web accessibility advocate and technical communicator with 18 years in higher education.

Dylan is a web accessibility analyst studying Interactive Media and Mobile development as well as Information Technology Management.

What is inclusive design?

“The design of mainstream products and/or services that are accessible to, and usable by, as many people as reasonably possible … without the need for special adaptation or specialized design.” —British Standards Institute

Why design inclusively?

  1. It’s the law – the American’s with Disabilities Act (ADA) is 30 years young!
  2. Your audiences expect accessible content.

There are other benefits as well

Inclusive design helps you:

  • Take control of your brand narrative
  • Avoid confusion with bad auto-generated image descriptions
  • Improve your SEO

Stats to consider

Examples of Content with Barriers

Examples include a Facebook post with a text and a complex graphic, and an X video with no audio descriptions.

Complex image with auto-generated alt text description

The Boise Police Department shared a post with a complex graphic. The text description reads well when voiced with a screen reader, however the description on the image was auto-generated by Facebook and reads as “link graphic May be an image of text that says ‘When to STOP for SCHOOL BUS SAFETY bus with it’s stop sign arm extended. STOP TWO AND THREE LANE ROADS All traffic from both directions must stop. 5ODE STOP STOP FOUR OR MORE LANE ROADS Traffic following the bus.”

Video with no audio descriptions

Now This News published a tweet with the text, There’s a reason this game is called the ‘Miracle on Ice’ and the video Remember When: The Miracle on Ice. The video contains no descriptions of the images or text and only minimal audio. Without descriptions in the video, or a text transcript describing the content, the video is completely inaccessible for non-visual users.

Open X post example in a new window

What causes these barriers?

Accessibility barriers occur when we don’t:

  1. Plan ahead
  2. Follow best practices
  3. Review our content

Best Practices – 3 Ground Rules of Inclusive Design

In their Social Media Accessibility Basics video series, Sherena Huntsman, Angela Fairbanks, and Laine Amoureux outlined three ground rules for accessible social media that also apply to inclusive design. These ground rules are:

  1. Multiple means of representation
  2. Use plain language
  3. Text is accessible to the broadest possible audience

Multiple Means of Representation

Provide more than one way for a user to access and engage with the content:

  • Images: Describe it
  • Videos: Describe, caption, and transcribe
  • Animations: Describe it, avoid flashing or rapid movement, let the users pause/start/stop
  • Platforms: Be aware of requirements and limitations

Use Plain Language

  • Simply written content is easier to scan and absorb
  • Acronyms and jargon is hard to understand and translate
  • Excessive use of emojis or styled text can lead to confusion

Text is Accessible to the Broadest Possible Audience

  • Draft text first, then visuals! Build an accessible foundation
  • Visuals should complement text, not replace it
  • Text can be: scanned, searched, translated, and read-aloud

Video Example with 3 Ground Rules of Inclusive Design

A great example of the 3 ground rules of inclusive design is the video, The Physics of Skydiving, from Science Out Loud.

The information is provided in more than one way in the video with visuals, captions, and audio descriptions. These are available as additional channels that can be layered over the video as needed by the user.

The video is described using plain language that’s easy to understand for a variety of audiences. Any complex terms are defined and explained using simpler language.

Finally, there is text available in the form of a transcript that includes both captions, and descriptions.

Open Physics of Skydiving video example in a new window

Create and Publish inclusive Content in Email and on Social Media

Follow these recommendations to create and publish more inclusive content in your email and social media messages.

Email

Structure your email similar to a webpage and include:

Social Media

  • On social media, images and videos are the content, not just complimentary
  • Get familiar with the accessibility help guides for your most popular platforms
  • Schedulers like Hootsuite may lack accessible features

Video – Captions

Follow these tips for more inclusive video content.

1. Use captions
2. Use a descriptive text alternative

This can be the caption/description or a reply tweet.

3. Provide audio descriptions or descriptive transcripts

For example, if you post a video that doesn’t include audio descriptions, you can include a descriptive text description that explains the visuals either in the post or a reply to the post.

Images

Follow these tips for more inclusive image content.

1. Include an alternative text
  • All major social media platforms have a designated alternative text box.
  • Find it and use it!!
2. Images with text

Provide a text alternative in the caption.

Text and Text Based Media

Follow these tips for more inclusive text and text based media content.

1. Hashtags
  • Hashtags should use CamelCase to #ClearlyIdentifyWordsWithinTheHashtag
  • Hashtags should not replace text
2. Emojis
  • Emojis should not replace text
  • Emojis should be used sparingly. Avoid emoji spam
3. Links
  • Avoid link shorteners (Unclear link text and destination)
  • Use linked media instead of URLs whenever possible

Quality Assurance Check

Test, Review, Revise, Repeat!

Accessibility isn’t more work, you were just cutting corners before. The work was incomplete.

@McgarrDana on X

Lenses of Inclusive Design

A lens is “a narrowed filter through which a topic can be considered or  examined.” Consider these lenses when evaluating your next design. PDF Adapted from Smashing Magazine, Designing for Accessibility and Inclusion and has been reviewed for accessibility. Open in Adobe Acrobat Reader for best reading experience.

Download Printable Lenses of Inclusive Design PDF

Questions and Resources

If you have any questions about this presentation or accessibility in general, you can email your questions to OitAccessibility@BoiseState.edu.

Resource Links

To learn more about accessibility and inclusive design, visit these resources.

Further Reading

Boise State Resources

Social Media Resources