Crystal Preston-Watson (00:03): Hello, everyone. Welcome to A11y Savvy. The podcast that explores how to design and develop for web accessibility. I'm your host, Crystal-Preston Watson. This is episode one, Do Blind people Dream of Electric Memes?
Crystal Preston-Watson (00:17): [instrumental R&B music]
Crystal Preston-Watson (00:27): So today is all about the basics of alternative text, or what it’s more commonly referred to - alt text. It's also about memes, but we'll get into that a bit later. Alt text is text descriptions for visual content on the web. The purpose is to provide an alternative form of conveying information that isn't visual, and you'll see it used in various ways. One is web accessibility when assistive technology like a screen reader interacts with an element that has alt text. The screen reader will announce the text. That means people who are blind and visually impaired will be able to understand what the elements are about without having to see them visually,. Alt text is also very useful for some individuals with cognitive disabilities, who might need to turn off a site's images to block distractions and help with concentration and focus. Another use is search engine optimization, Google and other search engines will index all texts for algorithms that make search more efficient for users and helps rank search results. I'll touch on this use again later when discussing how to write alt text.
Crystal Preston-Watson (01:39): Alt text is also great as a fallback. If image files do not load for whatever reason, instead of a visitor being presented with a ton of broken images, they can instead read the alt text. To implement alt text on your site. You will insert it in the alt attribute of an HTML IMG image element. There are some other techniques that I'm not going to go over today, but know the preferred and most commonly used way to provide alt text is using the alt attribute. I should also note that the alt attribute isn't required for a valid image element. There probably won't be any errors if you leave it out, unless you use a linter that specifically checks for accessibility.
Crystal Preston-Watson (02:30): Okay. Let me take a few moments. Are you wondering what a linter is? It's okay if you are. A linter is a tool that analyzes code for errors in real time, they're usually plugins or extensions that you install in a code editor. This is also a good time for me to say that every show will have notes that includes transcripts, code samples and links to in-depth resources for terms and concepts that I mentioned here.
Crystal Preston-Watson (02:55): The attribute not needed for element validity, but it's absolutely necessary to meet basic accessibility guidelines. When a screen reader interacts with the image element without an alt attribute, the screen reader will announce the SRC source attribute. Instead, this is usually the file name, something like H four X, zero R dot P and G, which doesn't do much for the screen reader user who wants the context of that specific image, but might show that the file creator really likes movies from the nineties. This all might seem simple on the surface. You always include the alt attribute, but this does cause some confusion. And that's because the alt attribute for an image element can be empty or no.
Crystal Preston-Watson (03:46): Yes, not all images need alt text. And there are two big reasons why first it is possible to provide all information and meaning needed with the text that is adjacent to an image. I have to be honest here and say, this can be tricky to do well. So I encourage the usage of alt text. If you have examples of this done successfully, please message me as I would love to have them as references. Second reason is images that are used for decorative purposes, like spacers, backgrounds, and borders, which do not convey any meaning or provide information. In these cases, you would use null/empty attribute. This notifies a screen reader to ignore the image and not announce it. And speaking of decorative images, this is where CSS comes into play. You usually don't need to worry about the alt attribute, if you use CSS to present a site's style and design.
Crystal Preston-Watson (04:47): So images that are decorative, you don't need to include alt text, but if your images are important to convey information, context, and or have a functional purpose, you need alt text.
Crystal Preston-Watson (05:00): Informational images are pictures, photos, and illustrations that convey concepts, context and information on your site. Functional images are buttons, links and other graphical content that initiate an action. I want to know there's a subset of informative images that are complex images. Things like maps, charts, flow charts to make these accessible takes a bit more finessing than an average image. Since they were doing more of an introduction, I'll cover those in a future episode, that goes a little deeper into complex images.
Crystal Preston-Watson (05:36): When it comes to writing alt text, there are four major things you want to consider.
Crystal Preston-Watson (05:40): One, you want to be as accurate as possible. Alt text is not for you to add any special notes or surprises it's to communicate information of the images. And that means not stuffing it with SEO keywords. If you're a digital marketing strategy is stuffing your image, alt text with a bunch of random words to game Google, you deserve to be banished to the fifth page of results. Two, keep it short. You aren't writing the great American novel. Well, there is no limit to the amount of texts you can have in the alt attribute. The popular consensus is to keep the text as short as possible while still giving a good amount of context. Also some screen readers like JAWS might start to announce the text in chunks past 125 characters. If the settings haven't been adjusted. Three, punctuation matters. Depending on the screen reader and user settings, the screen reader might announce punctuation or use a pause. Voiceover, the screenreader developed by Apple uses inflections when a question mark is used and will also have slightly longer pauses after commas, colons, and semi-colons. Four, don't include the phrases "image of," "picture of” They aren’t needed as most screen readers will add those phrases by default.
Crystal Preston-Watson (07:07): These four guidelines will serve you well as you create your alt text, but please don’t take them as be-alls and end-alls.. This is an introduction of the basics from my experience. There are always situations that require closer examinations and considerations in the show notes, I'll link to guides and resources that go further into detail to help you as those situations arise.
Crystal Preston-Watson (07:44): When it comes to accessibility of social media platforms, many are just beginning to address issues, Twitter, Instagram, and Facebook in the last few years have added support for users to add alt text to images. Since I have experience with creating alt text with Twitter that will be my focus today. Twitter supports alt text for static images and animated gifs. Before tto make pictures and gifs accessible you had to add alt text in the body of your tweet. With a limit of 20 ... 280 characters, which was only increased from 140 in 2017. This could be tricky. Many would add all texts in a separate followup tweet, which personally, most of the time I had no clue was there. With image description support, you now have a thousand characters to work with. There have been a number of great guides on how to write alt text for images on Twitter. And I will link to them in the show notes, because if it's already been done well, it's no I'm not gonna, I'm not gonna read iterate all that really good stuff. Though I have noticed there isn't much on how to handle meme alt text. Memes are notoriously inaccessible. They have a huge amount of information, context, subcontext and shade that can be communicated. This isn't exclusive to Twitter. And there are initiatives that are addressing the issue with developing templates and software, but those most likely can't be utilized on Twitter's platform. Unlike other complex images where you might link to a separate page that provides a long description. I can tell you right now with quite a bit of confidence that the majority of people on Twitter are not going to do that for a Michael Jordan, F them kids meme. Memes and making them accessible is complicated. This leads to people who are concerned about accessibility to avoid using memes on Twitter.
Crystal Preston-Watson (09:39): I'm not one of those people. I love memes. I use them a lot. I probably overuse them. So I will say there are some memes that probably should be avoided because they just are a bit too complex, but I don't think that's true for the majority. Now, what I'm about to say is going to contradict some things I said earlier, and it could be controversial, but when you're writing memes, alt text memes on Twitter, use as many characters as you can. If you need all thousand characters then do so. I think in this case, being wordy wins over being concise. I mean, if you are a prose necromancer and can convey a memes, context and information in like a very limited amount of characters I say, go for it.
Crystal Preston-Watson (10:39): But most people are probably not going to be able to do that. Personally. I would rather have some rules broken than to have people completely shy away from trying to attempt to make content accessible. Before I bring things to a close, I wanted to share an example of a meme. I recently tweeted and how I created the alt text. So what I'm about to share stands out because I think it's lacking in a proper description. It's close, but not quite there. For Background this was a phone call I had with a pharmacist over a refill. Here's the post I wrote.
Crystal Preston-Watson (11:14): Pharmacist: This prescription is past due do you want us to refill it or not? Me: I don't know. Do you want to explain why you're now charging me $174 instead of the $3 I paid two months ago though nothing about my insurance changed? Pharmacist: … Me: …
Crystal Preston-Watson (11:37): Then there's a gif The alt text that I added Diddy and a reality show contestant stare each other down because testing gives Diddy a slight smile. If you're unfamiliar with the meme, it's an animated gif taken from the reality competition. The Four, which I just assumed was The Voice. I don't know, Diddy or puff daddy. If you're like Gen X or Millennial is a judge on the show. The gif is taken from a portion of an episode where Diddy had just told contestant Elijah Connor, that he didn't like his performance. Elijah is then eliminated from the competition. He stares in disbelief for an awkwardly long time at, at the judges. Diddy takes off his sunglasses and returns a deadpan glare for almost 30 seconds before Elijah starts to smirk turning away. And I'm assuming accepting his fate. Now the gif only covers a few seconds of the encounter right before Elijah turns away after smoking.
Crystal Preston-Watson (12:46): But those few seconds are loaded with context. I don't think my alt text is the worst, but it should have more information, especially since I was connecting it to a contentious phone call. If I use this meme in the future, and that is a given here's how I would update the alt text.
Crystal Preston-Watson (13:03): Diddy and a contestant from the show, the four stare at each other after the contestant has been eliminated from the competition, did he is deadpan while the contestant has a look of disbelief, the contestant finally gives Diddy a slight smile. The original alt text I created has 101 characters. The updated text is 232 characters. Now the original fits within the guidelines of keeping alt text short, but it lacks some major context. The updated text is long, but I absolutely believe it is necessary.
Crystal Preston-Watson (13:47): That's it for this first episode of A11ySavvy. I want to thank you so much for listening. Join me next time as I take a step back and give an introduction to web accessibility. And as I say that, I realized that should have been this first episode, but whatever for S [laughs] show notes and resources from this episode, head over to anchor.fm/a one, one Y dash savvy. While there you can also subscribe to this podcast. I'm not on iTunes because I literally do not know how to do that. And yeah, anchor makes it, [laughter] you're someone who's listening, you can, someone wants to help me do that. I would really appreciate it. If you have questions, comments, or want to share some dank means with me, you can reach me on Twitter at a one, one Y savvy. So A11y Savvy all smushed up together until next time, keep it savvy.
Crystal Preston-Watson (14:50): [music fade out]