Adding Alt Text To Twitter Images Using C#

Some folks may follow me on Twitter and see my daily tip tweets around C#, F#, and .NET in general. Recently, I’ve been thinking about accessibility and helping folks with vision impairment enjoy the tweets as well. My tweets are published daily, with much of the media encapsulating the content. Unfortunately, images with embedded code make consuming content with screen readers difficult. So I set about exploring adding alt text to my pictures and potentially reaching a new audience.

In this post, we’ll look at how to upload an image, update the alt text, and then send the picture with alt text in a tweet.

Setting Up A Twitter API Project

Twitter recently updated its developer program to add more access levels and configuration options. If you’re new to Twitter API development, you can sign up at the developer page. You’ll need to set up a Project in Twitter, as only apps within a project can access the v2 API. In general, projects help Twitter track your usage of their API and whether you’re within the limits of their usage allowances.

Once you set up your new project, you’ll need to create a new application and retrieve the following pieces of information:

API Key and API Secret
Access Token and Secret

These will be essential to call the Twitter V2 API programmatically.

Using LinqToTwitter

The first step is to add the LinqToTwitter package to your .NET project. I recommend this package as it has the V2 API endpoints necessary for alt text.

dotnet add package linqtotwitter

Now that you have LinqToTwitter installed let’s set up your TwitterContext class. I have also taken the liberty of installing the Microsoft.Extensions.Configuration package, so that I can access the configuration found in my appSettings.json and user secrets location.

dotnet add package Microsoft.Extensions.Configuration
dotnet add package Microsoft.Extensions.Configuration.Json
dotnet add package Microsoft.Extensions.Configuration.UserSecrets

You’ll need the following code to create a configuration instance.

using Microsoft.Extensions.Configuration;

var configuration = new ConfigurationBuilder()
    .AddJsonFile("appSettings.json")
    .AddUserSecrets<Program>()
    .Build();

Once the configuration is ready to use, you’ll need to create a SingleUserAuthorizer. This is necessary for using your app’s credentials to talk with the V2 Twitter API. LinqToTwitter has many other authorization approaches, but this allows you to interact with the API on behalf of your account, without having to worry about authenticating every single time. Note, please make sure you have your configuration keys set correctly, or modify the keys to match your configuration.

var auth = new SingleUserAuthorizer
{
    CredentialStore = new SingleUserInMemoryCredentialStore
    {
        ConsumerKey = configuration["consumerKey"],
        ConsumerSecret = configuration["consumerSecret"],
        AccessToken = configuration["accessToken"],
        AccessTokenSecret = configuration["accessTokenSecret"]
    }
};

Next, you’ll want to pass that auth instance to a TwitterContext constructor call.

var twitter = new TwitterContext(auth);

Now you should be ready to start making tweets.

Let’s Send A Tweet with C#

In my opinion, the Twitter API is a bit strange when it comes to attaching media and alt text to a tweet. You need to make three separate calls:

Upload the media file
Attach alt text to the media resource
Attach the media to a tweet

It makes sense when you realize you can reuse media identifiers in different tweets, but if you were expecting to do this all-in-one simple API request, then you might be a bit disappointed.

Uploading the Media

The first API call is to the upload media endpoint. You’ll need a byte[] representing the file, a media/mime type, and a media category. Media categories include: tweet_image, tweet_gif, tweet_video, and amplify_video. In your case, you’ll want to use tweet_image as the media category.

var media = await twitter.UploadMediaAsync(
    bytes, 
    "image/png",
    "tweet_image");

Once you call this endpoint, and assuming the request was successful, you’ll have a Media instance. The next step is to attach our alt text to the media instance. You’ll do this by calling the CreateMediaMetadataAsync method.

await twitter.CreateMediaMetadataAsync(
    media.MediaID,
    "This is my alt text");

Twitter’s alt text has a limit of 1,000 characters, so you can get very descriptive.

Finally, let’s create a tweet with our media instance attached.

var result = twitter.TweetMediaAsync(
    text: "something insightful and witty",
    mediaIds: new[] {media.MediaID.ToString()}
);

If you’ve done everything correctly, you should see your new tweet in the timeline with an image containing alt text. Great! You can now use this approach to automate image tweets and still make sure they’re accessible to the widest audience possible. The other nice side effect of Twitter’s API design, is it allows you to find any past media and attach alt text to it. That means it’s never too late to add accessibility to your images.

I hope you enjoyed this post, and please share it with your friends and colleagues so that they can learn about this important feature.