Making Accessible Social Content

Transcript

[00:00:00] Ben: Howdy, howdy, y'all! Welcome back to Some Antics. Today, I am joined by Alexa Heinrich. Alexa, hello!

[00:00:07] Alexa: Hi, thanks for having me!

[00:00:09] Ben: I'm excited to have you on. This is… in a weird way, it's both your first and second time on the stream.

[00:00:17] Alexa: Yeah.

[00:00:18] Ben: A couple of weeks ago, we had Anna Cook on and we were going to be auditing sites and you volunteered your site to be audited for accessibility. And we were able to generate a lot of feedback from that, and I had a ton of fun. So this is sort of a return, sort of your first time!

[00:00:36] Alexa: Yeah, yeah, and that's actually how you and I connected, once I was talking with Anna about how the site audit went. So I was excited to volunteer to be a guest on your stream.

[00:00:48] Ben: Absolutely.! Yeah, so this stream usually focuses on, like, you know, how do you make your own website accessible. But accessibility comes in many forms throughout the web, and part of that is social media accessibility, which is something you've got a lot of expertise in. How did you come to social media accessibility?

[00:01:08] Alexa: So I am a social media manager for a college in Florida. And I previously worked in Chicago for a very large academic system that had several colleges within it. And my main responsibility was social media, but I also worked with some of the digital assets on our websites. And one day I was uploading images to our websiter, and the digital strategist on my team asked me if I was adding alt text to the images. And I had no idea what she was talking about! So, she kind of explained, and I started to do my own personal research into what accessibility meant for digital spaces, specifically social media, and I learned all these things that I just wasn't doing. And it really struck me because in my head I was thinking, "Has my content been an obstacle to someone getting an education?" So I started to learn more and I've been learning more ever since. And now I talk about it nonstop and help other digital marketers learn about accessibility best practices for social media.

[00:02:16] Ben: That's awesome! And you've got some fantastic resources out there. I've just put your Twitter in the chat. And then your website TheRealAlexa.com has tons of accessible social media practices.

One question I had going into this is, I was wondering whether social media accessibility is any different for individuals compared to corporations, institutions, organizations, and the like.

[00:02:45] Alexa: It's really not! Because for the most part, we all have access to the same features within the platforms and outside of the platform. So we can all, you know, add alt text to our images, caption videos, be smart about how we use emojis and hashtags. All sorts of stuff like that.

With corporations and big brands, they just have a much larger audience that they're impacting. I would say there you have bigger moments where they could have accessibility fails. I think one of the biggest accessibility fails that I see typically from major brands and sports teams is they put out a statement on social media and it's, like, a graphic with three paragraphs of text as an image. And none of that is accessible, unfortunately.

So I see that a lot from big brands and corporations, but we are all fully capable of making our social media accessible, which I encourage everyone to do with their personal social media, because it makes you a good person, but it also makes you just better at those practices, so if you do manage a brand for social, it's a lot easier because you practice it all the time.

[00:03:53] Ben: That's awesome! Yeah, so we're gonna dive into several different forms of social media accessibility throughout the day. Yeah, I'm gonna actually start going to your screen. So we can all see your screen now. Can you kinda walk us through the plan for today?

[00:04:12] Alexa: Sure! So I'm going to talk about some different ways to make your content accessible. It's all very easy. Everything is accessible to everyone to use.

The first thing that I'm going to go through is alt text, which is usually the topic that people are the most wary of. They're a little nervous when they're doing it. For those of you that don't know, alt text is basically a short, invisible summary of an image that describes the contents of it so that if someone's using an assistive device, they understand that description just like any of us would. So you can do this on Facebook, Twitter, Instagram, LinkedIn, and even Pinterest, which is great. So when you upload a new image, you all have that ability to add alt text.

So you'll see here that I have my test page for Facebook pulled up, which I highly recommend that brands have test accounts for their social media, because then you can test up things before you publish it publicly. And that's what I do. You can kind of see back here, this page isn't visible. Only I can see it, so this is where I test my content!

So when you upload an image to Facebook, this is what it looks like. You hover over it, you're going to see this little "Edit" button right here. Just click that. And then you're going to see "Alternative text."

Now, Facebook does try to generate auto-generated alt text here. It is not good. I do not recommend that anyone use the auto-generated alt text. I will show you an example of some really bad alt text that Facebook generated for an image that I uploaded for the college that I work for.

But so you would just add your custom alt text here. So, "Close up of a bumble bee pollinating…" — sorry for my bad spelling — "a flower." So, quick and simple for this demonstration. I'm going to copy that so I have it. And then you save, and then your alt texts will be there!

Now, I'm going to post this image, just really quick, to show you because if you decide, "Oh, there was an error in my alt text" or "I want to change that," you would just pull this back up. Click here, these little three dots. And then you can change the alt text. So again, you just go here and you would just change it like that. So it's really easy.

When I was talking about the auto alt text… So this was an image that I used for the college that I worked for. This is our president, who made a speech at a recent event. This was the alt text that Facebook generated for this image. And you can see, it really struggled because it hit on the text that's in the image. It can't really discern what's going on. It can't give you real context. So this was the auto alt text that it generated. And it was just wild when I saw this. When I went in to add this alt text, I was like, "Oh, wow. That is a… that's a doozy for alt text."

[00:07:13] Ben: On the other hand, that school spirit, though. "Titans Titans Titans Titans."

[00:07:17] Alexa: I know! I laughed when I saw that. I'm like, Tonjua Williams would probably love this. She's very "Go Titans." But yeah, didn't do her any justice with this alt text, but this was a very interesting alt text.

So that's Facebook. For the most part, it works the same when you're in Creator Studio, or Business Manager is still getting there. But that's how you would do it through the native platform on Facebook.

Twitter, again, pretty much the same thing. It's very, very easy. So I've uploaded my image. You're going to see "Add description" here. If you're on TweetDeck, it would be "+ALT" down in the corner. So you're just going to see the prompt when you upload your image. This actually used to be something you had to turn on in Twitter, and they changed that last year, which was great. It just made it automatic. Like, why would you want to give people the choice? You should prompt people.

So you just click "Add description." You can see there's an option to crop it, though we're going to use the alt text. So I'm just going to use the alt text that I had copied and pasted. And there you go! So then you save, and this would be your alt text!

And as the user — as the original poster… So when I tweet that… There it goes. You'll see, as the original poster, you actually can see this "ALT," which lets you as the poster know "Okay, I did add alt text." Whereas this one, which I didn't add alt text, does not have that. So this would be a flag to me of, "Oh no, I forgot to add alt text."

[00:08:53] Ben: Mhmm.

[00:08:54] Alexa: So that's pretty straightforward, for Twitter.

[00:08:59] Ben: I wanna say — sorry. back on the Twitter thing, that "ALT" badge, I wanna say they recently added a feature where you can click the "ALT" badge there and I think it shows your alt text in, like, a little pop-up. I think it's a brand new thing they've added.

[00:09:14] Alexa: Oh my gosh, it does! This is awesome! I just tested this before and it wasn't doing it. That is… oh, I'm so excited by it. Even just being like…

[00:09:21] Ben: Heyyy!

[00:09:23] Alexa: I love that. 'Cause it used to be just… you couldn't do anything! It just told you that there was alt text there.

If you're on TweetDeck, you can actually hover over images, and if they have alt text, it pops up, so that's really nice. And that's anyone's image.

[00:09:38] Ben: Yeah, and one of the things I know I've heard grumbles about on Twitter is the fact that the "ALT" badge only shows up for the original poster, like you called out. This has led to confusion in the past where people would expect it to show up on every image that people have posted that actually has alt text, and so it would seem like, oh, you didn't add alt text. Well, you totally did. You just, you only see the badge for your own tweet.

[00:10:05] Alexa: I suppose it's the Android users can see all the alt text.

[00:10:10] Ben: Really?

[00:10:10] Alexa: Yeah, so there's some difference between Android users and Apple users, and I just think it's so confusing. Same thing with… So you can add alt text to gifs. Actually, I should show you that.

[00:10:24] Ben: Yeah, let's do it!

[00:10:24] Alexa: You can add alt text to gifs. So let's find one. Here we go. Just do this.

So it's going to generate… Supposedly, when Android users do this on their phones, they get some auto alt text in here, whereas iPhone users don't get that. So it's something with the interface that there's a difference. But so you can, you know, do this. "…saying awww while wearing penguin pajamas." Then you save it, and you would tweet it like you would anything else. You can… oh, Ben Stiller. We know who he is. Sorry. Sorry, Ben.

But yeah, so you can add alt text to gifs if you use the online version of the platform or the mobile version, which I really like. They make it pretty easy. 'Cause I don't believe you can do that on Facebook yet, so it was nice that Twitter does allow you to do that because they have that partnership with Giphy. So, very convenient. But I'm stoked to learn that this works now!

[00:11:30] Ben: Super helpful.

[00:11:34] Alexa: Yeah, it is helpful.

LinkedIn! So LinkedIn, probably the easiest point to find, honestly. It doesn't really give you a chance to do anything else. So, "Select image to share." I'm just going to go down here, grab my bumblebee. And then you see it right here, "Alt. text." And it does kind of tell you why you should use alt text, which is nice. You should just be aware that there is a 300-character limit with LinkedIn. It used to be 150, I think? It was very short. I complained about it and then magically LinkedIn updated it, like, a week later. So it was like, I hope that all of our complaints were part of that.

But yeah, so you can add your alt text. You hit save. And then I would post it. I'm not going to post it. This is my actual LinkedIn. A lot of confused people why there's a bumblebee. But same thing, if you were to post this and you needed to edit your alt text, like with Facebook, you just edit the post and then you can go in and you can edit the alt text again. So, pretty straightforward with LinkedIn.

Pinterest has actually very recently allowed you to add alt text. This is very new, it's the last couple of months. So you basically just upload a pin. I don't use Pinterest a lot, but this was exciting for me. So you just upload any image, you "Add alt text," and then there it is! You have alt text. So that was nice.

If you pin something from someone else, you basically have to trust that they have added…

[00:13:05] Ben: Mmm…

[00:13:05] Alexa: …alt text, unfortunately. Kind of the same thing with, if you pin something from a website, you have to trust that they've added alt text. So there is that caveat, unfortunately.

And I'm actually gonna switch over to PowerPoint and show you Instagram, since I can't really show you my phone. I'll do it here. There are two ways to do alt text on Instagram. There's an alt text field, and then you have some users, like myself, who write it directly in the caption. So I'm gonna show you both ways.

So it's pretty straightforward. When you get to your final screen, you're just going to scroll to Accessibility — advanced features — and then kind of pop through. And it'll take you to this field as you scroll through. And then you can put in your alt text. And then you go back and post your image! So it's pretty straightforward for the most part. You just kind of have to scroll. So I basically went to Advanced Settings, which is down here. And then you go to "Write Alt Text," and it takes you to this field. So that's one way to do it. See, I went back.

The other way to do it, because a lot of users have shared that the alt text field supposedly doesn't get picked up by all assistive devices — and I've tested it, and my text-to-speech program on my iPhone has struggled with the alt text field on Instagram. So that makes me very paranoid as an accessibility advocate. So instead, there are people who write their alt text directly in the caption area of their posts. So that just looks like this.

So, I've already written my caption. Now I'm writing "Image description:", just to make it super clear what this is. And then I have my image description that I've copied. So that also works. It also makes your image accessible for people to view. So that's actually the method that I recommend.

And it has the added benefit of people then see that you're trying to make your images accessible, so it kind of gives you that little good humanity boost that you're, you know, you're doing the right thing. You're making your images accessible. We recently switched over to doing this method from the college that I work for a couple of months ago, once I learned about this kind of glitch. And shortly after we switched over, I had a student send a message to the college Instagram saying, "Hey, I just wanted to let you know that I'm really thankful that you're making the images accessible." She's like, "I don't need alt text, but my sister is blind and she relies on it, so I really appreciate that the college does this." And it was very touching here, and I was glad that it was… you know, what I was doing was making an impact and making our content more accessible for other people. So that was nice to hear.

So that is alt text for Instagram. That's all five of the major platforms.

I've gotten questions before about alt text with, like, Instagram Stories, Facebook Stories. There are no story features currently where you can add all text, unfortunately. Twitter Fleets were the only one where you could, and they don't exist anymore.

[00:16:25] Ben: RIP, Fleets!

[00:16:27] Alexa: Yeah, seriously. Their moment was… fleeting.

[00:16:30] Ben: Ayyyy! They barely lasted a Quibi!

[00:16:34] Alexa: Yeah, I know! I know.

[00:16:37] Ben: We've actually got a question in the chat. It's not about stories, but it's about alt text and specifically around image-heavy sites like Pinterest. This is a question from Ed, who's asking, "So is there actual benefit for mainly image-specific websites like Pinterest to add alt text to images?"

[00:16:54] Alexa: So, I have not tested the… basically the SEO impact of alt texts within Pinterest, obviously there's the user aspect, so if someone is using an assistive device. And as far as a marketer, is there a benefit for a marketer? Well, more people can access your content. So that's always what I tell people. From the marketing standpoint, you make your content accessible, more people can access it, which as a marketer is all I ever want.

[00:17:26] Ben: Mhmm.

[00:17:26] Alexa: I want as many people to see my message as possible. From an SEO standpoint, I can tell you that the alt text field on Instagram, depending on what you write in there, can affect your search results within the app. So if you have a certain keyword that makes it into your alt text field on Instagram, you may see a boost in the engagement on that post. There have been people who have touted the alt text field as an SEO artifact. So they basically just clog the alt text field with a bunch of random keywords. I do not suggest that. You want to use that field for accessibility. If you can logically work your keywords into your image description, awesome! Go for it. But if you're just listing a bunch of random words to boost your SEO within the app, that's really bad. That's the opposite of accessibility.

[00:18:19] Ben: Mhmm.

[00:18:20] Alexa: So I do not suggest doing that.

And then I'm currently running a year-long test on alt text and engagement for Twitter which, Ben, I know you probably see every day if you haven't muted it yet. But I'm testing to see does alt text on images impact the engagement of images within Twitter. So we'll see how that works out. I'm about three months into it. So yeah, it kinda depends. But alt text is not indexed with search engines…

[00:18:49] Ben: Mhmm.

[00:18:49] Alexa: …the way that web images is, unfortunately.

[00:18:52] Ben: Yeah, and I think what Ed might be getting at is more on the user experience end, where, like, with perhaps the question of, you know, if you've got an image-heavy site, is that even likely to have a strong, for instance, vision-impaired audience. Right? And so is there, like, quote unquote, "really a benefit?" I would say, like, yeah. I would say there still totally is because, I mean, you don't want to be unnecessarily exclusive, honestly. Right? Like, folks are still gonna use it.

[00:19:23] Alexa: Yeah.

[00:19:23] Ben: Folks are still gonna, like, use it to bookmark their recipes and such, right?

[00:19:28] Alexa: Mhmm.

[00:19:29] Ben: Yeah.

[00:19:29] Alexa: Well, and also I think it's important to remember that disability is a full spectrum of situations, possibilities. You know, people who are blind are not necessarily totally blind or permanently blind. You could be injured and have a temporary disability. I got so sick one time with an ear infection that I lost my hearing for a couple of days. So it's really important to remember that there are a lot of different scenarios when it comes to disability and the people who may engage with your content. So I turn on my text-to-speech program a lot of nights because my eyes are just tired. So I just use that to navigate through different apps because I just don't want to stare at a screen anymore! So it's important to remember there's a variance of possibilities when it comes to your content.

[00:20:19] Ben: Awesome! I wanted to call out a few people who've resubscribed. I see Joe has, Ed has, Alex has. Thank you so much for resubscribing. Remember that the subscription income is going to be used to fund, I mean, professionally made closed captions for these recordings. Right now, that's a very manual process. And so just that's what your subscriptions are going towards. Plus, we're going to work on getting more emotes in there, so don't worry, those are coming. So thank you, thank you all for subscribing!

[00:20:53] Alexa: And thank you, Ed, for your great question. I do appreciate questions like that because it's just a good way to remind people about disability and accessibility, so thank you.

I'm going to show a quick demonstration of basically what a tweet sounds like with alt text and without alt text! So obviously this one doesn't have the little marker. So this is what your tweet sounds like when it doesn't have alt text.

[00:21:18] Text-to-Speech: Alexa, @AltTextAlexa. Alt text makes your images accessible for blind and low vision users! Image. 25 seconds ago.

[00:21:27] Alexa: That's all you hear. You just hear "image," and… that's it. So you might as well just not tweeted an image at all. Whereas with alt text…

[00:21:35] Text-to-Speech: Alexa, @AltTextAlexa. Alt text makes your images accessible for blind and low vision users. Image, eight translucent pink jellyfish float aimlessly through dark blue water. 11 seconds ago.

[00:21:48] Alexa: So I think that was way more descriptive. It gives you a better idea of what the image is. So that's kind of what you want to keep in mind when it comes to alt text. If you're not going to include it, then you may as well not include the image at all.

So… and I know for anyone who's within web development, web design, I've gotten this question before. There's no such thing as a decorative image on social media. If you choose an image to go out with a post or tweet, there's a reason for it. It's not simply there as decoration. I know within websites, there are such things as decorative alt attributes. We don't really have that within social media. Nothing's ever going to be decorative for an image that you post. So it's something to keep in mind.

[00:22:31] Ben: Mhmm.

[00:22:31] Alexa: 'Cause I've gotten people commenting on that before. I'm like, no, that's not a thing for social media. So, we're going to move on to…

[00:22:42] Ben: Yeah, I wanted to say, with the alt text that you provided for the jellyfish, I really loved the inclusion of the word "aimlessly."

[00:22:49] Alexa: Thank you.

[00:22:49] Ben: Like, that I think was very vivid in a way that I really appreciated.

[00:22:56] Alexa: Yeah. I like to remind people that writing alt text is a completely subjective exercise. I get a lot of people who are stressed about writing alt text. Is my alt text too descriptive, not descriptive enough, too long, too short? It completely depends on the image, the situation, the rest of your content, how it plays into that. So yeah, it's always going to be different. It's different image-to-image and creator-to-creator. So as long as you feel that you are providing the most important details that you want the viewer to understand, then your alt text is great and you're probably doing more than what a lot of people do on social at this point. So yeah, I try to keep mine pretty clinical, but throwing in words like "floating aimlessly" kinda, you know, gives you that jellyfish feel. They just kind of bob around. That's their existence. So thank you, Ben!

Alright, so I'm gonna talk a little bit about some things that you don't want to do when it comes to social media. So, we're all very familiar with emojis. We've started to see alternative characters on social media. We've seen stuff like ASCII art right here. So there are different ways that these impact the accessibility of your content, especially if someone is using an assistive device like a screenreader or a text-to-speech program, which is what I use on my phone to test content.

So emojis, for those of you who are not familiar, they all have unique descriptors assigned to them that make them unique! They are coded that way. They have different appearances in different browsers, different platforms, but they all have to have a unique descriptor assigned to them so that they can be coded on the backend properly essentially. Even the emojis with custom skin tones will get an extra identifier. So you could have "waving hand," but then you could change the skin tone and it would be "waving hand, light skin tone." Something like that.

So it's important to keep in mind, especially when you use them in content, because if you put them in the middle of content, you could make your message confusing. Using your emojis as bullet points is very popular right now — it's aesthetically pleasing — but it can make your content confusing, which I'm going to demonstrate here.

[00:25:16] Text-to-Speech: Using emojis as bullet points or in the middle of your content can be problematic. Their assigned descriptions may:

Party face with a party horn, hat, and confetti, not be appropriate for your content.

Overturned hand with medium-light skin tone gesturing with fingers pinched together, make your content much longer than intended.

Brain, cause clarity issues.

[00:25:39] Alexa: Are you guys… Do you kind of hear there that those emojis are very confusing? The party hat one and the hand one were very long. You heard the skin tone described in the hand one. The brain one was just like, "Brain, cause clarity issues." Very abrupt. So when it comes to emoji, I always suggest that people put them at the very end of their written content so that they don't cause any clarity issues or make your content confusing.

I love emoji. People assume that I don't because of this tip. I'm like, "No! Use them. Just try and use them in moderation and try to put them at the end of your content whenever possible." So that's kind of the major tip with emoji.

[00:26:24] Ben: Joe wants to know if you know whether there's a resource for how the emojis are described by a screenreader. Like, how might someone be able to, like, predict what it's gonna say?

[00:26:33] Alexa: Yes. So the best website out there — I love it, I have it bookmarked — is Emojipedia.org. This website lists every known emoji along with their different appearances and descriptions across browsers, platforms, and devices. So you can see them all listed out for apps that I've never even heard of. It's great. It'll show you if they have skin tones that you can assign to them. So it's an excellent website. I visit it all the time. They do have… Some of them do have different names, so you can't always predict how someone's going to see it, just because you could be creating content on an iPhone and someone's looking at it on Android. So it's really… it varies. That's why I always encourage people to be really smart about how they use their emojis. But yeah, Emojipedia.org is excellent. Outstanding website. Their Twitter account is very funny, too. It's very cheeky, and it talks about the new emoji coming. So I definitely highly recommend Emojipedia.org.

It's also worth noting with emoji, if you use… like, if I were to use ten brain emojis in a row, some assistive devices, instead of saying "brain, brain, brain, brain," it'll just say "ten brain." And that's it! So it's kind of funny that way, when you have uninterrupted emoji icons.

So that's basically emoji. It's pretty straightforward. You want to put them at the end of your content and try not to go overboard for them. Though I do like emoji, I promise.

This next tip is probably the one that I get the most annoyed with because you don't want to do any of this, essentially. So you kind of see I have this Instagram post here. And I have this typeface that doesn't match the default fonts for Instagram. So I had to go to an external website to copy this over. So you probably see it a lot on Twitter and Instagram, where people find ways to do bold and italic and script fonts. These are Unicode characters that, yeah, are coming from external websites.

Unfortunately, not all assistive devices can decipher these characters. They're either going to skip over them completely or turn them into strange indistinguishable noises. So this example is going to sound very funky because my text-to-speech program skips right over it. This is what it sounds like.

[00:29:13] Text-to-Speech: alttextalexa, The that in is the and of all. Hashtag Mulan.

[00:29:18] Alexa: Gonna play it again, just to hear it a second time.

[00:29:20] Text-to-Speech: alttextalexa, The that in is the and of all. Hashtag Mulan.

[00:29:24] Alexa: It sounds weird because…

[00:29:26] Ben: "The that in is the and of all." Wow! Wow.

[00:29:31] Alexa: Yeah. That is all it said. And that's why I played it twice, because when I recorded it, I was like, "Wait."

[00:29:37] Ben: "Is it done??"

[Ben laughs]

[00:29:39] Alexa: Yeah, it was very strange. But yeah, it struggles with those. So I've come across ones where it starts just making random noises, or it describes them as mathematical characters.

[00:29:54] Ben: Yes!

[00:29:55] Alexa: It's wild.

[00:29:55] Ben: I've definitely heard of the mathematical characters one, where it'll be like… you'll have these, like, alternate character sets and you'll spell out a word in that, like maybe you're spelling out "Alexa," right? And it'll be like, "mathematical letter A, mathematical letter L," and so forth, like, to spell out the entire word. It's atrocious.

[00:30:15] Alexa: Yeah, so I see a lot of major sports teams unfortunately use this with their social media. I get it. We are all just dying to have the ability to bold type and italicize type, but, you know, unfortunately, because you're dragging this type in from an external website, it's not being hardcoded into the platform, so there's no coding on the backend for whatever device they're trying to access that. There's a lot of people that talk about how the devices should update so they can, you know, pull these in, and I personally just…

[00:30:52] Ben: Mhmm.

[00:30:52] Alexa: …don't like them. Even if my text-to-speech program could read this, I have… I struggle to read this visually.

[00:31:02] Ben: Yeah.

[00:31:02] Alexa: Like, this is not an easy font. I think people should just stick with…

[00:31:06] Ben: Mhmm.

[00:31:06] Alexa: …the default fonts and formatting options that we have. Plus, from a branding standpoint, this probably doesn't match anyone's brand. Unless their brand is really bad! So, yeah, no, you should avoid using these alternative characters whenever possible. Stick to the default fonts and formatting options that are built into the platforms. Otherwise, you could cause major accessibility issues.

[00:31:29] Ben: Yeahhh.

[00:31:29] Alexa: So these are a huge no-no.

[00:31:32] Ben: And even if assistive technology could look at, like, a character like this and go, "This is pretty clearly meant to be an F," right, there's oftentimes where it will never be able to do that. Like, I know especially in Greek life, fraternities, sororities, it's common to use Greek letters that look like English counterparts. And, you know, we still want assistive technology to treat Greek letters as Greek letters, not as English letters. Like, just because you used a capital sigma because it looked like a capital E doesn't mean the screenreader should be treating it as an E.

[00:32:06] Alexa: Right. And I will say that, you know, assistive devices are very advanced! I did a masterclass for a Jewish marketers group, and they asked, "How does this screenreader handle Hebrew?" I was like, "You know… I don't know! Let me test that and get back to you." So I tested it after the masterclass was over and my text-to-speech program handled it just fine. It understood Greek lettering, Russian, Cyrillic, Hebrew. I did a bunch of them. I did Mandarin. So you could hear the voice switch for the text-to-speech program, which is basically the program saying, "Ah, this is the different alphabet. I need to switch to the correct voice that I need to read it."

[00:32:50] Ben: Mhmm.

[00:32:50] Alexa: And I sent it back to them like, "Did the program say it correctly?" They're like, "Yeah, it did, actually!" So yeah, if you have a different alphabet, a text-to-speech program will pick that up, but it has to be something that's available on your device.

[00:33:04] Ben: Mhmm.

[00:33:05] Alexa: So, yeah, it's very interesting that way.

[00:33:08] Ben: Yeah! Kilian wants to know, he's asking for your opinion on should social media replace these, like, flowery alternate characters that you're using. Like, should social media be replacing those characters with English counterparts? Like, the Latin alphabet counterparts?

[00:33:24] Alexa: I don't know if it should replace it, but I've said before, especially when it comes to, like, alt text and stuff like this, I wish that there were more prompts from the platforms of like, "Hey, we notice you've done this," and then have a suggestion. Like with images, if you were to post a tweet and it has an image and you didn't write alt text, I would love for Twitter to prompt you like, "Hey, we noticed you're about to post a tweet with an image. Do you want to alt text or an image description?" I wish it would do that. I don't know if it could logically always be able to replace those characters, just because some of them are coded really funky, but a prompt would be really nice if the platform would notice like, "Hey, we noticed you're using alternative characters. Here's why you probably shouldn't do that!" Something like that. So I wish that the platforms were more proactive about that. I mean, I give, like, Twitter props. They try pretty hard with their accessibility features now. They've been working on them a lot in the past year, but I think even more could be done.

[00:34:25] Ben: Mhmm.

[00:34:25] Alexa: But yeah, a prompt would be great! So I'm sick of seeing these fonts all over Twitter. They're supposedly really bad on Clubhouse, too.

[00:34:35] Ben: Ooh, I can believe it.

[00:34:37] Alexa: Yeah, Clubhouse is just not accessible at all.

[00:34:40] Ben: I'm hard of hearing, so I never, never was tempted to join Clubhouse.

[00:34:46] Alexa: Yeah, it's super disappointing. Supposedly they are… So, for those of you who aren't familiar with Clubhouse, Clubhouse is an audio-only platform. They've been around about a year and a half. They were very popular at the beginning of the pandemic. They do not have a captioning option. They don't have a transcript option. There is basically no way for deaf or hard of hearing users to participate on Clubhouse unless someone is willing to somehow record their room and then upload it somewhere else and do a transcript or do captions. So it's really disappointing, especially because Twitter has an audio-only feature, which is Spaces, and—

[video briefly cuts out]

[00:35:29] Text-to-Speech: —vertical line, vertical line, vertical line, fresh ice, vertical line, vertical line, cream is, vertical line, vertical line, the best, vertical line, vertical line, five underscore, underscore, vertical line, backslash, underscore, underscore, slash, vertical line, vertical line, bullet, [briefly speaks Japanese] vertical line, vertical line, slash.

[00:35:52] Alexa: So that's a wild way of doing content. I see ASCII art a lot. Again, unfortunately, that's how the screenreader handles it. If you want to do ASCII art, the only accessible way to do it is to screenshot your creation, so if I wanted to make this in, let's say, Microsoft Word, I would. You screenshot it, you turn it into an image, you upload it to your tweet as an image, and then you would write alt text to describe your image. So you would… that's the only accessible way to do ASCII art. Screenreaders are probably never going to have the ability to see this entire illustration as an illustration, unfortunately.

It should also be noted that ASCII art, depending on which device or platform you make it on, can look different across platforms. So you could make something in the mobile version of Twitter and it looks different on the web version of Twitter or TweetDeck. It was a few months ago that a very popular graphics platform — I'm not going to name it — did a piece of ASCII art on the web version of Twitter, and it was this little pathway of arrows that led to the phrase "Drink more water." It's very cute, very harmless. But when I saw it on TweetDeck, it looked like a swastika. So I do not recommend using ASCII art in its traditional form. The best way to do it is to create your ASCII art, and then screenshot it and upload it to your post or tweet as an image and add alt text to that image.

So that is my spiel with ASCII art. It's… it's problematic. It's just, it's a lot, so. Same thing with emoji illustrations, you see a lot of people feeling emotionally illustrations for their content. It's kind of the same deal. It's not going to identify the illustration. It's just going to read all the emojis as they exist.

[00:37:57] Ben: Yeahhh.

[00:37:57] Alexa: So that's my big thing with ASCII art.

[00:38:01] Ben: Yeah. I just realized now I had muted. I had a temporary internet glitch. I think we are back. But I just realized I was muted!

Yeah, that is… yeah, the ASCII art being so dependent on exactly such and such many characters per line, like… and also I've seen the emoji art too, and yeah, that also just…

Sighted users are going to see a picture, right? But, like, folks who have to use text-to-speech are going to encounter everything, you know, character-by-character or word-by-word, yeah.

[00:38:39] Alexa: I have a demonstration on my website for ASCII art, and I went looking for the most complicated ASCII art I could find, just to really drive home the point. And it was a helicopter with a ladder dropping down and a little person hanging off the ladder saying something. It takes forever to get through the entire recording. I think it's, like, three minutes long or something of the screenreader trying to read the ASCII art.

And obviously, you know, I've had screenreader users tell me before, you know, if something is like that, we're just going to skip it. They shouldn't have to do that, is the point.

[00:39:18] Ben: Mhmm.

[00:39:18] Alexa: They shouldn't have to be inconvenienced like that by your content. So, yeah, ASCII art is just a whole beast of inaccessibility when we use it like this. It's… it's a wild thing.

I don't have a demonstration of it here, but I was just going to briefly mention hashtags. I feel like most people are pretty familiar with this particular tip, but when you do hashtags on social media, you want to write them in camel case. So I'm going to write one really quick so you can just see what I need here.

Oh no, where'd my clicker go? Hold on. My mouse does this sometimes where it, like, disappears for whatever reason, so let's do this. There we go.

Alright, so… this is called "camel case" or "Pascal case." Some people call it "title case." Basically, it just means that you type your hashtag like that. The capital letters or spaces or punctuation is how a assistive device is going to denote separate phrases or words. So it needs these capital letters to know to say "Camel Case," and not to say this as one word, which it would if you wrote it like this.

This gets tricky on social media because most of the platforms want to prompt you to use all lowercase. I don't know why. It drives me up the wall. But you want to write your hashtags like this when they're compound, not this. So there's some very famous hashtag fails out there where people… when you wrote them in all lowercase, they look inappropriate or wrong.

[00:41:04] Ben: Mhmm.

[00:41:04] Alexa: We can all google some that are pretty famous. If you go google "Susan Boyle hashtag," you'll find a pretty good one. But yeah, so you always want to write your hashtags like this, so camel case or Pascal case. Even if you do write it in the true way to do camel case as a web developer, which is like this, this will still work.

[00:41:24] Ben: Mhmm.

[00:41:25] Alexa: So it'll still know to keep reading it as "camel case case." So that's, you know…

I know, I've gotten web developers telling me that camel case… I'm like, "I know, I'm sorry. I don't know how marketing screwed it up, but this is how I learned it."

But, so that's how you do hashtags.

[00:41:40] Ben: Yeah. One example I've heard — 'cause usually screenreaders and assistive technology are usually pretty good at figuring out the word, even when they're all lowercase. It's just a couple of times here and there. But what I've heard is that these capitalizations can make the difference between "not all men" and "no tall men."

[00:41:58] Alexa: Mhmm, yeah, yeah. And technically, this case is easier for literally everyone to read, because it's just how our eyes track movement. So this, I mean, plus, aesthetically speaking, this is just… this looks better.

[00:42:11] Ben: Yeah.

[00:42:12] Alexa: Like, it looks like a real word that you could read. When I write out my URL for promotional reasons — so I don't expect people to click it — you know, I usually write it as "TheRealAlexa" — oops — ".com." Like, I know that the URL's not going to stay like that when you click it, but this just makes more sense visually because people can actually read it! So.

And the last thing I'm going to quickly show everyone is the easy way to do closed captions. So I know there's a lot of apps out there if you want to do open captions, but let's say you wanted to do closed captions. You either wanted to upload something directly to Facebook, Twitter, or LinkedIn with an SRT file, or you just wanted to have closed captions. I prefer closed captions.

[00:42:55] Ben: Real quick, what is the difference between open and closed?

[00:42:58] Alexa: So… I'm glad you asked! Closed captions are basically captions that you can turn on and off. We see them on streaming sites. We see them on YouTube, Vimeo. You get the option. You get the button that you can turn CC on or off.

Open captions are currently burned onto a video in post-production and you can't turn them off, so they're always visible. So I kind of get a kick out of people on TikTok. Before they had their closed captioning option, which has been rolling out to more people, people would do open captions using the text tool in there, and they would write "CC" and then their captions. I'm like, "Those are open captions! They're not closed captions!" But I got what they meant. So I understood that they were trying to do.

So, yeah. Closed captions can be turned on and off. Open captions cannot. So that's the difference. I don't know why it's "closed" and "open." I don't understand that part. But that's the different between the two.

[00:43:50] Ben: There's, like, a historical, technological reason, like with the, like, original, like, broadcasting feed captions.

[00:43:57] Alexa: Yeah, probably.

[00:43:59] Ben: Yeah.

[00:44:00] Alexa: And then if you see anything that says "subtitles," it's just another word for captions. Subtitles are typically though for translating language. So they're a form of caption that deals with language that the viewer either doesn't speak or understand.

[00:44:14] Ben: Mhmm.

[00:44:14] Alexa: But people use them interchangeably. So it's…

[00:44:16] Ben: Yeah.

[00:44:16] Alexa: …not a really big deal.

[00:44:18] Ben: I think this, again, is one of those… like, another, like, bit of semantics here where, like, sometimes folks will use "subtitles" to mean, like, "I am just writing down the words that are being said."

[00:44:30] Alexa: Right.

[00:44:30] Ben: Whereas closed captions — well, captions in general — could be, like, any useful bit of audio, so including laughter or door closes.

[00:44:39] Alexa: Yeah. Exactly. 'Cause you definitely want to include those. If there's important noises in your video, you would want to include that.

So, when I want to make closed captions, I rely on YouTube. I will upload my video as unlisted to my YouTube channel — which, anyone could have a YouTube channel if you're an adult. It's free, it's great, it's very useful. So I upload my videos as unlisted, which means they can't be searched. And then I let YouTube have a little bit of time to generate auto captions for me. Now you never want to just publish the auto captions because they're not very good.

I'm gonna show you. So I did this one earlier today. It's only nine seconds long. So you can see I'm in the "Subtitles" tab here. I have languages. One is available. So I click down, and you see "Automatic" here. And I duplicate and edit. So when I click this, that's brought up my video, and this is the only dialogue I have in here. And you can see there's no capitalization, there's no punctuation, it doesn't understand proper nouns or names. So that's the extent of what you'd see. If there was more dialogue, it would be a whole block there.

So you basically have to go in and clean it up. So I would clean this up. "This is a test video to show you how the auto caption function works on YouTube." So this would be good to go. I could test it. I'm not going to do that 'cause it would be loud. But you can test it as you go along to make sure that all those captions are correct. I have a speech impediment, so sometimes when I speak, when I record video, I mumble or I misspeak words and this captioning system won't understand what I said, so I have to go in and just kind of fix the words when it can't understand me.

But then you're basically good to go from here. So once I'm okay with how my captions look, everything's synced up properly, I would hit "Publish." And then YouTube is actually going to save it for me — it may take longer depending on how big your video is — and it would sync up the timings. So then, you can see, I have this "Published by creator" here. I can edit it if I want to. You can see that YouTube has synced the timing for me, so that's very, very helpful. These are in microseconds. So I'm going to get out of that.

Now, the part that I really like about YouTube is that once I'm done, I've created my captions, look at those captions, they look good… if I need them for something else, I can download a file to use. So I typically would download an SRT file. So you can download this SRT file out of your video and then use it if you upload your video directly to Facebook, Twitter, LinkedIn, or basically any platform that allows you to do direct upload with an SRT file — which Twitter is working on doing that directly from their "Compose tweet" window, which is exciting.

So that's a really nice… it's kind of a hack, I guess, to doing closed captions easily without, you know, paying a bunch for it or, you know, trying to use a service. If you just need a quick way to do it, this is the great way to do it.

[00:47:45] Ben: That's awesome!

Yeah, so… I guess now's a good time to call out, like, if you've got any questions in the chat, y'all, drop them, let us know, 'cause we've got a bit more time with Alexa to answer any questions you've got.

Yeah, so with regard to… I guess one question I was sitting on with the alt text is how do you… like, what is your process for coming up with good alt text, I think. Like, what kinds of things are you prioritizing there when you're writing your alt text?

[00:48:22] Alexa: So for me, when it comes to writing alt text, it's really dependent on what kind of context I have with the rest of my post. So let's say this post was about conservation. I would definitely want to talk about, you know, this is specifically a bumblebee that's pollinating, you know, a flower. So it depends on how your image corresponds with the rest of your text. So it, again, it kind of varies depending on that but it's really, in your mind, what do you want the user, the follower, the viewer to understand about the image? What's the most important part?

I think something important to note about alt text when it comes to images as well, is that if you have — we kind of saw it earlier when I showed that bad auto-generated — usually a assistive device is not going to pick up on this text unless it's in the alt text. It cannot identify that this is spelling out "Welcome" vertically. It would not know that. So you need to put it in the alt text. So if I'm given a graphic that I need to put out, definitely having the text in my alt text is super important. But that's, again, very situational, dependent on what the rest of the context is. Yeah, it's very subjective. It's so hard to tell people…

[00:49:48] Ben: Mhmm.

[00:49:49] Alexa: …what good alt text is, especially because I personally do not rely on alt text. So all the information that I share here is coming from a perspective of a marketer who has done her research. So I, in my current state, cannot tell you what makes for good alt text because I don't personally rely on it, so I always try to stress that with people.

[00:50:11] Ben: Mhmm.

[00:50:12] Alexa: I'm just doing my part to make the world more accessible, but I don't rely on these practices in my current physical state.

[00:50:18] Ben: Mhmm. Yeah, and Alan is asking — we kind of actually just touched on it just now — but he's specifically asking about automatic image alt text tools. And, like, Facebook we've seen is trying that, right? But those in general are going to struggle because it's just basic image recognition that's totally divorced of the context of the thing, right? So it might be able to say, "There's a person," but it doesn't really know who that person is, unless they're, like, incredibly famous, right? So what is the context of this person even being in the image, right? When you showed the example of your university president, right?

[00:50:58] Alexa: Mhmm.

[00:50:58] Ben: The AI probably isn't going to know who that is and why they're on the stage.

[00:51:03] Alexa: Yeah, and Facebook and Instagram — since Instagram is owned by Facebook — it does use an AI system for its captions and its alt text that is supposed to learn over time. I… I think it stopped learning, seriously, because it's not very good. It's gotten better for captions, so understanding that you don't meet every "uh" or "um." But when it comes to alt text, it just doesn't do the job. I don't think any system or robot or android is ever going to be advanced enough to write alt text the way that we as humans and marketers are going to write alt text.

I do know that a nice thing about Twitter — so, if you tweet out an image with alt text on Twitter and you need that image again later for another tweet, you can actually go into Media Studio for Twitter, which lives here. And this will show you all the images and videos you've ever tweeted out. If you tweeted out an image with alt text, that alt text lives on in Media Studio attached to the image. So you can easily go in there, compose a tweet from Media Studio, and it already has the alt text for you. Or I've done it before where I know I'm going to use an image several times, I have a file saved off on my computer that has image alt texts saved ahead of time so I can just copy it really quick. I know I'm going to need it for a series of stuff, and I just save that, so.

[00:52:35] Ben: Alright! And then another question I've got for you is, are there any… So you've shown us how, in the different social media platforms, you can add various accessibility features like alt text and the like. Are there any tools you like to use to make that job even easier for you or to validate what you're doing?

[00:52:56] Alexa: Sure! Definitely when it comes to captions, I have a captioning app on my phone called MixCaptions. Love it. It's great for if you're working out in the field and obviously can't pull up YouTube as easily to do closed captioning. It's a great tool, it takes almost no time. It's very inexpensive, which I like. Like, you can buy just hours of time for almost nothing on there. It's got a lot of versatility to the different ways that you can customize the captions, so the background on them, how big they are, the placement. So I really like MixCaptions. It's a great tool.

Also when it comes to — I didn't really touch on this because it's kind of beyond social media — but when it comes to, like, color contrast, Adobe Color has a great contrast checker. So that's more for, I feel, more for web developers and designers. But you know, social media professionals, we sometimes are multiple things. But yeah, the Adobe Color site is just phenomenal. They have a colorblindness checker and contrast checker, so I really like those tools as well if I need to create a graphic. They're very handy to use.

[00:54:13] Ben: Alright. And then I guess one other thing is… so, a lot of social media sites really thrive around the idea of sharing other people's content, right? Like retweeting tweets or resharing someone's pins on Pinterest. Do you do anything to ensure that, like, the stuff that you're resharing is also accessible?

[00:54:35] Alexa: I try to. I'm not perfect all the time.

[00:54:39] Ben: Sure.

[00:54:39] Alexa: Sometimes I'm moving so fast and I feel like the written part of a tweet is super important, or the story it links to, and I fail on that part. But I do try to be aware of that when I'm retweeting content. I get people who ask me how do I know if there's alt text, and I always tell people, you should try using the text-to-speech program that's built into your phone. So iPhone has VoiceOver, Android has Talkback. Or if you use Google Chrome, you can right-click on an image, do "Inspect" — so I'll do it here. You can inspect the image. You get this panel that pops up, and then you go down to "Accessibility." And if there's alt text, it'll be tagged here. So you can see it there.

[00:55:23] Ben: Mhmm.

[00:55:23] Alexa: And then obviously we now know that this little dude works, which is nice, so you can do that as well. So that's the way I try to do it. That's some ways to check it as well. But great question!

[00:55:35] Ben: There's one bookmarklet I've been using. This is by Chris Johnson. And you know what I'll do, is I'll put this in our chat so that you've got it, but I put it in the Twitch chat already. Let's see. Hang on, I need to pull up… where's the chat? I'll send it to you after the chat, but it's called Inaccessible Twitter. It's a little bookmarklet that you can put in, like, your bookmark bar, and you click it and any image that's been posted that doesn't have alt text is going to be, like, wildly blurred.

[00:56:05] Alexa: Ooh.

[00:56:05] Ben: And if it DOES have alt text, it won't be blurred, and there'll be, like, a little banner above the image that reads out the alt text for you. So it's one thing I like to use, like, to ensure I'm not retweeting inaccessible images and the like.

[00:56:17] Alexa: That's a great tool.

[00:56:20] Ben: Yeah!

[00:56:20] Alexa: Yeah, there's a lot of extensions out now where you can do alt texts. There's an alt text reminder account that's basically a bot set up to remind people, like, "Hey, you forgot to do alt text on the image." So, yeah, people have gotten really savvy. I wish that the platforms would adopt some of these methods for reminding people about alt text and other ways to make their content accessible.

[00:56:43] Ben: Alright! Well, we're getting close to time. I would love to — first of all, thank you so much for coming onto the stream. I've really appreciated this. There's been so much wisdom here. Is there anything you'd like to promote? Anything you've been working on?

[00:56:57] Alexa: I am just continuing to build my website, at TheRealAlexa.com, to be a one-stop hub of information on accessible social media practices, because when I started about this, I had to do a lot of googling, so I'm trying to alleviate that. I also have a newsletter that I send out once a month that kind of runs through some of the different news, different insights and resources that I've found in the past month on Twitter, Facebook, all the different platforms. And I'm writing a book that I have no idea when that will be done and out, but I will be sure to share it so please connect with me on Twitter at @HashtagHeyAlexa, and you actually have to write out the "hashtag."

[00:57:38] Ben: Yeah, so I'm putting the Twitter in the chat. There's that. And then… there's your newsletter! Your Substack, right?

[00:57:49] Alexa: Yeah, thank you, yeah! For everyone watching this, this is not my actual Twitter. This is my test account where I test content, which is why it's locked, so don't try and follow that one.

[00:57:58] Ben: Yeah!

[00:57:58] Alexa: Though I don't know why you'd follow me!

[00:58:01] Ben: Well, thank you again so much for coming on. And, chat, thank you so much for joining. To everyone who resubscribed, thank you so much. I really appreciate that.

And y'all, y'all should join us next week fo some more web accessibility stuff. It's going to be 12pm Central next Tuesday, right here. We've got Rachele DiTullio coming on. We're going to be talking about building accessible forms, which I'm super excited about because forms are… They feel deceptive to me. Like, every form — I look at a form and I'm like, "This looks dead simple," and then it's never as simple as you think. So if that's you, if that's an experience you've had, you should join us next week. We're going to be talking about how to make those forms accessible.

Stick around, y'all. We're going to figure out someone to raid. And yeah, thanks for coming! Bye, y'all!

[00:58:49] Alexa: Bye!