Flattened Copy on Images

Flattened copy—also known as embedded, expanded, or outlined text/copy—is text on digital assets like JPEG, PNG, GIF, and occasionally PDF files that has been turned into an object upon the file being exported from its program of creation. It is no longer recognizable as readable text by most technology including assistive devices and programs. If you run your cursor over flattened copy or tap it on your mobile phone, you will be unable to select the text.

Unfortunately, flattened copy is a common occurrence on social media, especially when a brand, organization, or public figure decides to post a long statement, proclamation, or apology, and does it in the most inaccessible way possible.

Instead of readable text, digital teams will create a graphic that features an excessive amount of flattened copy and post it as an image on social media. A popular method is writing a statement in a notes app, taking a screenshot of it, and then posting that screenshot in place of readable text.

While it's an understandable frustration that most social media platforms are rather limited when it comes to long-form writing and formatting options, flattened copy is a huge obstacle for accessibility. Sure, you could try writing alt text for all the flattened copy on an image, but that’s also redundant work that shouldn’t need to happen in the first place. 

Plus, let’s be honest, the average social media user probably isn’t going to sit there and read that full statement or even notice it as they’re scrolling through their feeds. If they’re on their phone—which is how most internet users consume their digital content today—they’re probably not going to zoom in on a text-heavy graphic to read it either.

Flattened Copy Situations and Solutions

There are much better ways to share your long-form message on social media without foregoing accessibility best practices.

Post Your Statement On Your Website

If you’re a large brand or organization, you more than likely have a robust website that includes a section designated for news and updates. Any long statements you want to make on social media should live there in a readable format. 

This is great from an accessibility standpoint as well as an archival one. Finding a previous statement in a specific area of your website is much easier than scrolling through numerous social media feeds. After you’ve put your statement on your website, you can then link to it from a post or tweet.

Do you still want a visual to go with your social media content? That’s totally understandable, as most posts perform better if they have an image attached to them. Let’s pretend the below image is the original statement that you wanted to share on social media.

Graphic with a lot of flattened text on it that talks about how inaccessible this practice is.

That’s a lot of copy to slam onto a single graphic and it’s not exactly easy to read. Instead of using the full statement on your graphic, pull a single impactful quote from it and make that your visual for social media, like in the next example.

Blue graphic that reads, 'Graphics created for social media should be treated like billboards.'

Make sure the alt text you add to your graphic includes all the flattened copy on it as well. The alt text for the above graphic could be something like, "Blue graphic that reads, 'Graphics created for social media should be treated like billboards.'" Clear and concise.

Now that you have your full statement on your site in a readable format and an abbreviated visual to complement it for your social media content, you can just write something brief for your post and then include the link to the statement at the end.

The practice of posting vital updates and information on your website is especially important if you ever post anything like an infographic on social media. It's nearly impossible to make an infographic fully accessible through alt text alone, so you'll want to make sure you have all the data from the graphic available in a readable format somewhere on your website. This is a good opportunity to take visual information and repurpose it as a fleshed out blog post!

Make a Video Statement Instead

A relatively simple way to get around any character limitations a platform may have and still post a statement that is both accessible and on-brand is by recording a video. This also has the added benefit of adding more emotion to whatever message you’re trying to convey to your followers.

Don’t forget to caption your video so that users who rely on captions can access it as well. Your full statement should still go on your website as well and be linked in your post or tweet along with your video. A readable version of your long-form statement should always be readily available in an easy-to-find place online for full accessibility.

Skip Posting Flyers Meant for Print

Social media professionals and digital marketers are no strangers to requests that involve posting a wordy flyer online, especially for promoting events and large initiatives like the one below. 

A mock event flyer that talks about how inaccessible the practice of posting event flyers on social media is.

Besides this being an obviously inaccessible practice, it’s also not very actionable if no one can click any of the details or information on your flyer once the copy has been flattened. 

Most flyers are also designed with print in mind, not digital, so their traditionally vertical orientation isn’t ideal for social feeds. This is bad accessibility and bad marketing.

Just like with a long-form statement, do something concise for your visual instead of posting a full event flyer. A nice image or a graphic with minimal copy would work best. Don’t forget to add alt text to your image, too. In the written part of your post or tweet, include a link to a webpage or online form where viewers can respond and find more details about your event.

If you choose a minimal graphic to accompany your event post and put your event details in the written part of the post and your graphic, you don’t need to duplicate the flattened copy in your alt text!

For example, if you were to write a tweet to accompany the below image, you could probably write something like, "Come to our Cool Event happening on March 10th, 2022, at 10:49 AM CST in Chicago! RSVP at [insert link]." The alt text for the accompanying graphic could be, "Promotional graphic for the event happening on March 10th."

Promotional graphic for the event happening on March 10th.

You don’t need to completely repeat yourself in the alt text if the pertinent event details are supplied in the written content in a way that an assistive device can easily access and read.

Make Your Twitter Chat Accessible

Twitter chats have become incredibly popular, especially in the past few years as more people have sought out meaningful ways to engage with others online during the COVID-19 pandemic. 

If you’re not familiar with Twitter chats, it’s a pre-scheduled conversation hosted by a single account centered around a specific topic. Most chats have a branded hashtag, happen at a weekly designated time, and pose a set number of questions that participants are expected to engage with. Many chat hosts turn their questions into graphics to further brand the experience.

An easy way to make your chat accessible is by writing your question in your tweet and then adding short alt text to the question card indicating that it’s the graphic for question number whatever.

For the below example, the written part of the tweet would be, "Question 1: What should people be doing to ensure that their images on social media are accessible? #TwitterChat," and the alt text for the accompanying image would be, "Graphic for question number one."

Graphic showing an example question for a fake Twitter chat.

In this scenario, you don’t need to repeat yourself otherwise someone using an assistive device will just have the same information twice. The graphic still needs alt text to avoid any confusion, otherwise, a screen reader user could be left wondering if they’re missing important context about the question.

BONUS TIP: make your Twitter chat even more accessible by having your questions available ahead of time on your website, blog, or even as a thread of tweets. This will help participants feel better prepared before the chat begins. And if you use a particular hashtag for your chat, don’t forget to put it in #CamelCase!

Additional Resources and Reading

Want to learn a little more about creating accessible images and visuals? Check out the links below!

Arrows that will take visitors back to the top of the webpage.