Accessibility on the web is an important topic that’s thankfully being taken more seriously nowadays. And there’s a few things you can do, as a creative botmaker, to ensure that your bots can be enjoyed by everyone.
Add image descriptions¶
When you upload an image on sites like Mastodon, Twitter, or LinkedIn, you will have an option to add a description to it that will be used by screen readers and thus making it possible for people who can’t see the image to get an idea what’s in it.
And when you make a bot that posts or generates images, you can use the API to do the same. Let me show you how.
On Twitter, we can use the media/metadata/create endpoint. Check out the documentation for it here.
In short, after you upload an image, you can reference its ID and pass it to this endpoint together with an alt_text object that contains the description.
You can see the full code on GitHub, here’s what the relevant part looks like:
T.post('media/upload', {media_data: imageData}, (err, data, response) => {
/* First we upload the image. */
if (err){
console.log('error:', err);
} else {
const image = data;
/* Now we can add image description. */
T.post('media/metadata/create', {
media_id: data.media_id_string,
alt_text: {
text: 'Describe the image'
}
}, (err, data, response) => {
/* And finally, post a tweet with the image. */
T.post('statuses/update', {
// status: 'Optional tweet text.',
media_ids: new Array(image.media_id_string)
}, (err, data, response) => {
if (err){
console.log('error:', err);
}
);
});
}
});And on Mastodon, you can pass the description parameter do to the same.
client.post('media', {
file: fs.createReadStream(filePath),
description: 'Describe the image'
}, (err, data, response) => {
if (err){
console.log('mastodon.postImage error:', err);
}
else{
const statusObj = {
status: 'Optional text.',
media_ids: new Array(data.id)
}
client.post('statuses', statusObj,
(err, data, response) => {
if (err){
console.log('mastodon.postImage error:', err);
}
});
}
});It’s a pretty easy and straightforward way to make sure everyone gets to enjoy your bot.
For some pointers on how to write a good image description, you can read this article from Harvard University.
Properly capitalize hashtags¶
If your bot uses hashtags, another good practice is to capitalize the first letter of each word. So instead #generativeart you should use #GenerativeArt. This is useful for screen readers, but also helps folks with dyslexia or cognitive disabilities.
Don’t use special characters that look like letters¶
When you use characters that look like letters, for example 𝖃 instead of the letter X, screen readers read the full name of such symbols, in our example that would be “Mathematical Bold Fraktur Capital X”.
Watch the video below to get a full sense of what the experience is like.
If you have any more tips, feel free to share them via email or Twitter DM!
