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 specialised design.” —British Standards Institute
Why design inclusively?
- It’s the law – the American’s with Disabilities Act (ADA) is 30 years young!
- 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
- 62% of accessibility practitioners surveyed in March and April 2020 reported that “COVID-19 has raised the awareness and impact of accessibility on the digital channel.”
- A Carnegie Mellon study from 2019 found in 1.09 million tweets with images, only 0.1% had alt text.
- In 2019, a U.K.-based customer-experience report that focused on people with disabilities found only about 8% of people who face an “access issue” online would choose to bring it up with a business. Close to 70% of people in this situation will click away from the website.
Examples of Content with Barriers
Examples include a Facebook post with a text and a complex graphic, and a Twitter 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.
What causes these barriers?
Accessibility barriers occur when we don’t:
- Plan ahead
- Follow best practices
- 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:
- Multiple means of representation
- Use plain language
- 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.
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.
Structure your email similar to a webpage and include:
- Clear subject line
- Outline sections with headings
- Describe the purpose of images
- Clear link text
- Test on mobile
- Review Email Standards and Boise State Trailmix and Beacon Resources
- 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
- SRT files are a caption file accepted by most major social media platforms.
- Platforms like TikTok and Youtube use auto-generated captions. Always review these captions before posting!!!
- 80% of viewers use closed captions from something other than hearing loss (3PlayMedia)
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.
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.
- Hashtags should use CamelCase to #ClearlyIdentifyWordsWithinTheHashtag
- Hashtags should not replace text
- Emojis should not replace text
- Emojis should be used sparingly. Avoid emoji spam
- 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 Twitter
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.
Questions and Resources
If you have any questions about this presentation or accessibility in general, you can email your questions to OitAccessibility@BoiseState.edu.
To learn more about accessibility and inclusive design, visit these resources.
- Smashing Magazine – Designing for Accessibility and Inclusion (29 min read)
- Borschoff – Designing Communications for Accessibility and Inclusion (2 min read)
- Content Design London, Readability Guidelines
Boise State Resources
- Boise State Email Standards
- Boise State Trailmix and Beacon Resources
- Boise State Web Content Checklist
- Boise State Social Media content checklist
- Boise State Email content checklist