Register for Be A Digital Ally Session
Jay:
Okay, Hello, everyone. Thank you for joining us to our first ever Knowbility, “Be a Digital Ally.” And today we are covering the topic of alternative text.
All right. So first we want to say thank you and welcome. But thank you really for letting us be a part of your journey, and we just want to set a couple norms for how we like to run our events here. So, first and foremost, we try to create an inclusive and accessible space. We do that by trying to be kind and polite and respectful to all participants and guests. And then, lastly, we will try to ensure accessibility to the best of our ability.
All right. So we're just going to do some quick introduction so we can get into the good meaty stuff of today. I am Jay McKay. I am the Director of Community Programs here at Knowbility. I am absolutely thrilled to be here with you tonight. This is one of my passions in terms of really connecting with people and training, and talking about how to do best practices, regardless of your skill level, and where you're coming at from accessibility in your journey. So, and take it away Molly.
Molly:
Hi! everyone I'm Molly Moore. I'm a Community Engagement Specialist here at Knowbility. I'm a white woman in her thirties, with blond hair, and I'm wearing a blue striped shirt.
I am also really thrilled to be here. I'm still learning a lot of the ins and outs of accessibility, so, putting this together and really working on these basic concepts is really helpful for me, too. So thanks for being here, and I will pass it to Erica.
Erica:
Thank you, Molly. My name is Erica Braverman and I'm a white woman in my 30’s with brown hair and glasses and I'm wearing a black cardigan.
I'm also a Community Engagement Specialist here at Knowbility, but I also manage our AccessWorks, usability testing program. Usually, I see alternative text from the end of, "Ok it's already there or already not there." So it's nice to be here in the planning stage, and I'm excited as well to learn more about writing good alt text. So this is going to be great night for everyone, me included, and is Cesca here?
Jay:
She is here.
Erica:
Okay, take it away, Cesca.
Francesca:
Thank you. Hi everyone welcome I'm super happy to be here. My name is Francesca Castleton. I'm an Asian woman mid thirties, I have long brown hair and a black hoodie on.
And so what I do at Knowbility is I help audit websites. So I'm typically looking through the code making sure that everything is accessible. So I am always checking for the alt text or making better recommendations to help improve it. And yeah, there's always something new to learn so I'm sure there will be something eye-opening for me as well.
Jay:
So just a little bit about Knowbility, and who we are, what we do. We were founded in our flagship program, which was the Accessibility Internet Rally, and that's really kind of what kicked off Knowbility.
We are a 501(c)(3) that is based locally in Austin, Texas, but we operate globally. Like I said before, I'm in Birmingham, Alabama, waiting for a tornado, (laughs) and I know Cesca you are off in California. So we really have our employees everywhere. We work with organizations, people everywhere around the world. And our mission is to create an inclusive digital world for people with disabilities. And one of the ways that we do that is, by having these opportunities to talk about ways to create those more digital, inclusive, accessible spaces.
All right. So just a little bit about Community Programs. So if you like our Be a Digital Ally series, we have some other things that you may want to check out like I mentioned before, our Accessibility Internet Rally is a competition with web designers creating accessible web pages or websites for nonprofits, artists, musicians. So people that maybe do not have the ability or the means to create an accessible website from the ground up. Or maybe they have one, and it really needs to be retooled to be more accessible. It gives the web developers a chance to practice their skills and really do some community good at the same time.
AccessU, and we will talk about that a little bit later, but that is our annual accessibility tech conference. So it's really good in depth training workshops, getting to talk with your peers and looking at best practices. Our AccessWorks program, which Erica runs is our usability testing program that we have. And Erica, I don't know if you want to give us like a 30 second elevator pitch on that.
Erica:
So my 30 second elevator pitch is for companies who have put in the work to make sure that their code is in good shape, but then wants to find out how their product or their digital space presents to real users who have disabilities who might be using assistive technology. We bring in paid participants who identify as having disability to review these websites and apps and other digital spaces and help these clients. These companies make sure that their products are not just accessible, but really usable and pleasant to use.
Jay:
And then our next one is our K-12 Digital Accessibility and for that we have a couple different facets through that, looking at how to ensure that the K12 space is accessible for all students. So we have a monthly webinar with Toolkit Tuesday, talking about different topics, from infrastructure to different types of assistive technology tools. We have our ATSTAR, which is a training module for teams to learn more about the AT consideration process. And they will also have our summer conference, our Access Summit.
So that's just a little bit of what we do, and of course, up at the top, we have let you know if you like the work that Knowbility does, and you've got a couple extra dollars we do greatly appreciate it. We at Community Programs, we try to provide as much of these opportunities for free, just because we feel they're important. So you can do that at knowbility.org/donate.
So why you're here today is to be a digital ally. This will be a monthly series. We will have recordings and the materials available to you after the session is over. But really we created this as a goal to cover basic skills and principles behind accessible digital design. In our work with different communities and organizations, we were seeing a need for content creators of any skill, level, but maybe they're new to accessibility.
So we were thinking of, you know, the nonprofit where maybe that person had to manage the website or the social media platform because they're the ones that have a Facebook account. So now they're in charge of this NPO’s postings and so maybe they're not sure how to ensure accessibility, and that people are able to access their content and engage with their organization. Maybe you are more familiar in terms of web coding and web design, but the thinking about accessibility, and how that plays into that design maybe a new concept to you. So we're really trying to cover a large gambit. But really kind of drilling it down to those basic skills and the principles behind it.
All right so our learner objectives for today, is we will cover a little bit about what accessibility is when we're talking about it in the context of this conversation. Also, what is alternative text. Some do's and don't's when you're creating that alternative text. With some practice, we really want to make sure that you have an opportunity to apply those skills. And then, lastly, we want to see if there are any questions. And I know a few of you have been emailing them to us, so we will cover those for sure, and that any that we see in the chat.
All right. So what accessibility means. And the reason why we want to talk about that is a lot of times when people hear the word “accessible” they think it just means “oh, it's easy to get to. It's accessible because it's available on this multitude of platforms,” and we really want to make sure that we're talking about accessibility in a very specific context. So go ahead and go to the next slide. So for our definition of accessibility, we pulled from a couple different websites. The first is w3.org. They are a great resource in looking at web accessibility, and then also from the AEM center. So AEM.org and so I took both of their definitions of accessibility and kind of smashed them together a little bit.
So for something to be accessible, people can perceive it. Can they hear and see the content. They can understand. Do they know where to go, what to do or what to expect? Navigate. Can they independently navigate using their preferred tools? Interact. Can they come independently complete tasks and explore all areas. And that's something that gets a little trickier depending on, you know, platforms and software and websites that sometimes people think you can interact with It but maybe you can't if you are using a specific type of tool. And then, lastly, can they contribute. Can they fully participate in authentic manner. So that's what we're talking about accessibility, making sure that people, regardless of physical cognitive needs or abilities, can they access? Can they perceive and navigate, interact, contribute authentically using the tools that they use.
So why is it important to design for it? And this was a number that we pulled from the World Health Organization's report on disability in 2011. Fifteen percent of the world's population has some form of disability and that's according to what the WHO’s definition of disability is. Now there are additional people out in the world that may not actually can consider themselves as disabled as defined by WHO. So a lot of times and I know Erica, you can kind of attest to this, when you're looking for users that have disabilities and a specific clients looking for somebody with a hearing, impairment, or difficulties hearing. Several of those clients may not call themselves hearing impaired, but they are using a hearing aid which would mean they would qualify as a user for that study. So it's kind of having to think about the people that maybe they don't necessarily see it as barrier, which is fine, but we still need to design for any potential barriers and make sure people have access.
And then, lastly, there are people who don't have disabilities, but still benefit from accessibility. Right? Think about captions. How many of us, you know, especially with all the streaming going on, how many of us love to have captions turned on? I know I really enjoy having audio descriptions when I'm when I'm streaming my favorite shows right. Yes, thank you, Christie. I absolutely love having audio description available, because, you know, sometimes I'm getting distracted by other things, or I really need to catch up on some other work. I just can't look at the screen, you know my eyes are tired, but I want to catch up on my show, having that audio description allows me to do that.
So we also want to talk about assistive technology because that's something we're going to refer to a lot. No AEM is the accessible educational materials. Sorry about that. Oh, I'm sorry I type in that address wrong. I will fix that on the slides and get that correctly in the chat. I forgot it is AEM.cast.org.
So we want to talk about assistive technology a little bit, because that's going to be something that we refer to a lot in this training. So we've pulled a couple different definitions. So this first one comes from ATIA which is the Assistive Technology Industry Association. “Assistive technology is any item piece of equipment, software program or products system that is used to increase, maintain, or improve the functional capabilities of people with disabilities.” So they’re really, looking at it, this kind of you know, specifically, this is technology. It can be anything. that's going to help improve functional capabilities. And then, also, we wanted to look at the World Health Organization's, definition, and they say, “assistive technology, enables and promotes inclusion and participation, especially of persons with disabilities, aging populations, and people with non-commutable diseases. The primary purpose of assistive products is to maintain or improve an individual's functioning and independence, thereby promoting their well-being.” So again, looking at the function and the purpose of assistive technology is really to make sure people can authentically interact to full capacity.
So just a few examples of assistive technology. We're actually going to dive a little deeper into some of these as we go through the training. But we just want to kind of bring to mind something that maybe you already know about, or things that maybe you never considered to be a assistive technology. So the first is a screen reader, and that is a program that will essentially read everything that is on a computer screen. So some of us see the word screen reader and we think of text to speech where it's just you highlight a section of text, and it reads it to you.
A screen reader is much more than that; it's actually helping a person navigate the whole system of their computer clicking through the different websites, links, file systems. There's also refreshable braille display So for anybody that reads braille and they are using a computer, or they need like some kind of form of electronic braille. That's how they're going to receive that text and and that information. And I know Erica is going to talk a little bit more of how that actually works.
Also we want to think about alternative navigation methods. So not everyone uses a mouse. Some of people out in the world use just their keyboard and use different keyboard shortcuts. They're tabbing through, they have different commands. But they're not using a mouse, so they can't get to like a you know, just oh well mouse over and click, click and drag. Well, that's gonna to be, you know, different steps for keyboard only or switch use. So maybe they're not using a keyboard but they are using devices that are placed, either, you know, maybe near their head, their hands, their feet. Somewhere where they can essentially do whatever movement they have available to them to put those inputs into the computer.
Some that you might already be aware of closed captions which we talked about before. Transcripts, so having, you know all the text from a video or a podcast that you can just read through as opposed to having it auditorily. Magnification, right? That's something some of us already do when we're looking at different websites. Right? We have to like hit that zoom in screen so it's a little bit bigger for us to see it. Dark mode. I know from my phone. I prefer to have it on dark mode or high contrast. So these are just a few of the the types of assistive technology out in the world. We do have a link, and and these slides will be put up on the website by tomorrow for you to be able to have access to them. But we do have some examples where, when you go to that WebAIM site, they do have a list of different types of assistive technology, Some pictures and some descriptions to kind of give you a little bit more in-depth exploration of those tools. So I'm gonna turn it over to Erica here so take it away, Erica.
Erica:
Right. I do want to touch on this quote a bit before to move on, and this is something that's kind of been true for me is, I've started to learn about accessibility. You know, no one is born with this knowledge of how to make websites accessible, or you know, even the technology you need to make websites accessible.
And you know, the first time I started learning about accessibility I had this feeling of, “Oh, no, you know all these things that I've made for my classes are trying to, you know, help with with working on websites. What if I've made inaccessible pages or features? And you know I've offended someone or someone couldn't get to what I was trying to put together.” And you know what do I do? what do I do? and that's not if you're feeling the same thing, or if you're thinking of your own site right now, I'm thinking “Oh, gosh I have no idea if it's accessible.”
You know that everyone has been there, and everyone learns bit by bit, and accessibility was not built in a day, and this will be an ongoing journey. Every month, every week, I'm learning something new that I can use to find my knowledge, and it's the same way for everyone, no matter how experienced you get or how new. you are. You're not perfect right away, and you are in line with a 100% of other people learning about accessibility, and you won't be perfect tomorrow, because things change and you learn more. So you know, do the best you can , you know, keep working away and it's so much better to attempt accessibility, realize it wasn't perfect and refined it then. Just don’t get so worried that you don't start. So you know, we encourage everyone to take those steps.
All right, so I am going to start with what is alt text, it's for images on your site. But what is it really? So I'm starting with the definition from something called the Web Content Accessibility Guidelines. And if you haven't heard of that what that is it's, a set of international guidelines recommendations for how to make a website or digital product accessible, that have been put together by a whole group of web developers and accessibility specialists and assistive technology specialists, and they maintain these guidelines and they update them as technology changes. So their definition says, “alternative text provides non-visual information about images, text refers to electronic text, not an image of text. Electronic text can be rendered auditorially tactile, or visually making it accessible to a broad spectrum of users. “
If you're thinking “well, what- what is that?!” There's a couple ways to really interpret this definition and break it down. The first main principle is the alternative text is simply a written description of what is in a picture. I kind of like to think of alternative text is like a little a clue, really, you know, even if I weren't able to see the picture. This is the description of what it is, and it helps me understand what I would be looking at kind of like if you had a museum piece in a gallery. And it was behind a curtain. If they were going to clean, or something like that. I like to think about text in that way. You can still read the clue. And then the other piece is the different users might use different methods to find and read this to text. That goes back to assistive technology. Different technologies work with this text in different ways.
Then a last note that isn't really in the definition but I find to be very helpful in understanding alt text is, if you visited a website, and you've wondered, “I've never seen alt text. Where is it?” That's because it's really hidden and it's not apparent to, you know, people who are navigating the Internet by eyesight. And so if you've gone online and you've never seen alt text, It doesn't mean it's not there. Usually you don't see it well, there will be an example where we do see it, but usually it's not visual.
So when do we use our alternative text? Well, that definition does help to give us some clues about when we might use it. You know it describes an image, so anytime you are working with images on your site. So you could be uploading a new image or switching out an old image that you don't want anymore. Your site logo should also have alt text. If you have a picture on your website that uses text and I have an example right here.
I have a green roadside with the Texas flag on it, it says, “Welcome to Texas. Drive-friendly the Texas way.” Now, if you live in Texas and drive in Texas, you might be confused by the sign. I am, too.(laughs) But you know this is a great example of an image that also includes text. So there's a flag. But there's also some words that are part of the messaging of this image, and would need to be part of the alt text.
You might also be thinking about alt text when you're designing and we'll touch on this decision process later, whether you're going to add a description of decoration on your site. So maybe if I just wanted to make my site more fun and just have this little star from the flag right decoration I would be thinking about; “Do I want the alt text or not? and we'll talk about that decision later
Why is our alt text so important? We talked a little bit about accessibility. That's our main reason here. Accessibility, in my mind is the most important reason for alternative text. But then we'll also talk about how alt text can help out if you know, someone is experiencing technical difficulties when they're visiting your website, and also how alt text alternative texts can help you with your search engine optimization, which is always a nice perk.
So let's start out with accessibility, Jessica touched on this a bit before. But web users with disabilities might using specialized support tools, you know, assistive technologies, electronic or non-electronic. Something that they have on their own, or maybe something that is inherent to the website, to access information online or in an app on their smartphone. And we're going to be specifically talking about these assistive technologies that take alt text from a web page and make it available to the user.
So think back to that little note in the definition of alt text. It's usually hidden from site, so alt text especially comes into play for users who are not navigating the Internet via eyesight. So users who are blind or death blind, or have some vision, but not enough vision to comfortably use only their vision to get around the Internet. Some people who are using alternative texts, but might have site, are people who have cognitive disabilities that affect how they process images. Maybe a description of what's in the picture could be much more helpful than just the picture.
We're going to talk about two particular types of assistive technologies that bring out this alt text from the image and make it available and make the image accessible without sight. The first one, we have a little video of what's called a screen reader, and you're going to see a gentleman who is blind. He works at a community college, you know, at his desktop, using a screen reader. Oh, thank you Jessica. And he's going to talk a little bit about How this works for him. This is real-time technology ya'll.
Jason:
Hi my name's Jason Holt. I'm with the Universal Access Department and today we will be demonstrating a screen reader. With a screen reader, I as a blind person can navigate to a web page, and I don't use a mouse because I can't see where the mouse is pointing. But I can use a keyboard and JAWS, the screen reader, will tell me where I am on the page, and allow me to read various parts of the page. Ok, let's take a few minutes to actually see how JAWS works. Here we are at my main screen on my computer, and I want to browse the Internet. So I will open up a browser, I'll press the windows key.
JAWS:
Menu, search box edit, type text in this edit field.
Jason:
And JAWS announced that I have a menu. Then I want to find my browser. My favorite browser is Firefox.
JAWS: JAWS 17.0- Internet Explorer sub- Word 2013 sub- Firefox sub menu-
Jason:
Firefox. That's the one I want so I'll press enter
JAWS:
Enter. Leaving menu. Firefox. Mozilla Firefox start page dash Mozilla Firefox. Search-
Jason:
That opens the browser. Now I'll press Alt D to put my cursor in the Navigation Bar.
JAWS:
Alt-D. Navigation bar tool bar, tool bar. Now let's go to our homepage the community college's homepage. So I'll type SLCC.edu. You notice the JAWS repeats to me each character as I type it. That way if I make a mistake, I can hear it, and I can backspace
JAWS:
Slash UHTTP forward slash.
Jason: And I can retype it again.
JAWS:
To search your entered address, edit combo SLCC
Jason:
Now I'll press enter.
JAWS:
SLCC dash Mozilla Firefox. Page has three regions, eight headings and 68 links. SLCC.
Jason:
Oh, it says SLCC, sounds like I'm on the right page. Okay, here we are on our home page,
Erica: So you can go back and watch the rest of the video. He will continue to navigate through the site. But there's a couple of takeaways from this video that I had that I wanted to point out. The first is that he talks about his screen readers called JAWS, and that's one of several main brands of screen reader out there. If you get, you know, more involved with screen readers, and accessibility, which we hope you do, you'll find that if people are using a laptop or desktop computer, the main screen readers are not just JAWS but NVDA, which is on a PC. Or VoiceOver, which is on a Mac, and also an iPhone. If you have an Android. the common screen reader is called Talkback.
And the screen readers are a little different, although they're achieving the same purpose. Jaws is more of the you know sometimes I think it's sort of the Cadillac of screen readers. It's pretty powerful, but it's also very expensive. Whereas VoiceOver in NVDA are free. I mean they're also very good, but you know they don't have you know sometimes JAWS is a little bit stronger there's nuance. You know as technology changes and websites start introducing new features screen readers navigate with them in different ways. So that's what he's talking about when he says JAWS, no sharks involved.
And then the other piece is that if you've never heard screen readers speech before, you might notice that it's sounded pretty fast to you, and you're wondering you know how can this guy understand what he's hearing. People who are regular screen reader users to spend years learning. I mean there are classes available. If you are, you know, receiving education as a blind student, or you know, maybe if you've experienced vision loss later in life, you can find classes in your community chapters of the National Federation of the Blind or Lighthouse of Blind sometimes hold these classes. So it is a learning process to learn to use a screen reader, and comprehend the text and instructions. But the speed is variable, so if you're not used to that fast speed. But you need to be using your screen, reader, all the time. You can lower the speed.
Sometimes, you know, I’ll be on a Zoom call, and someone who's using a screen reader shows me something, and they'll lower their speed if I'm not able to figure out what's in the fast text. So that's a bit about screen readers.
We also have a picture of something on this page which is the refreshable braille display. This is a close-up photo of the the sort of the touchable interface of this display, like a black rectangular tool. It plugs into your to your device. your smartphone, your tablet your computer and it's got some little grids of dots, and some of these dots are raised, forming braille. So what happens is as you're navigating through a site, instead of auditory output, the dots will rise and fall to form the braille letters of what's happening on the page. And this is a great tool if you know you don't want to listen to the screen reader output, if you'd rather interpret it through braille, read it through braille, or for people who are deaf blind. This is a great tool that they can use to access the Internet without eyesight or hearing, and we can go ahead all right.
So how about accessibility? Let's move on to technical difficulties. So you know we're a pretty smart bunch here, so I picked some photos from Harvard University. We're going to use these photos to talk about what happens if an image is not loading correctly on your site, and how alt text can help you out and still help your visitors understand what's in the picture. So, and I learned this through putting together this presentation, on the Harvard University campus, there's a statue of John Harvard and it's good luck if you touch his feet.
So what we have here is a photo of some tourists and they're, you know, posing for pictures, and they're touching the feet of the statue. You know this would be great. I think I found this on the university blog, it gives people an idea of what's on campus, might be exciting to students. You know those Harvard or exams are tough. You need all the luck you can get for them to know about this.
But what if you're trying to get on the Harvard University website, and you're not having good luck, and your Internet is running really slow, won't load the picture. You might be using an older computer, the wi-fi is weak, anything could happen. Well, we have the alt text available, so we have another example. The same image, but it didn't load. There's just kind of a white blank box, and a little icon that says there's a picture that’s supposed to be here, but something happened, it's gone. Well, the alt text shows up in that space and we can read, “Tourist pose for pictures while touching the foot of the John Harvard statue.” So even if I'm having bad Internet luck, I can still use alt text to help me understand what's going on in this image.
And, by the way, we will also have a document available with the alt text and image descriptions of every picture in this presentation, so you can use it to kind of help you understand what we're talking about.
Then the last one is search engine optimization. And if you're not familiar with this term, search engine optimization is how search engines like Google sort of pick and choose which website should come up first and search results so, If you type in something like you know, “Best soccer teams in the world.” They're gonna look for websites that have those keywords and phrases, and the more times that those words and phrases return on a site the higher the search results are. So you know, a website that has those words 87 times is going to be higher in the results than a website that has was only 43 times.
So alt text believe it or not, still counts as part of that page text. And Google and other search engines pick it up. So you know, if you added some images to that website with only 43 terms, you had big photo galleries, lots of pictures with description, maybe you'd bump your results up to 93 returns 93 examples, and then you beat out that other website. And the search results.
So I have an image here of an artist doing plenaire painting, so painting outside, if you're not familiar with the term. My mom's an artist. And this is actually taken from an arts organization. This photo in the area where my parents live in Northern Michigan. And this artist is painting by a big lake Lake Michigan I'm guessing. But they weren't clear in the in the site. So the site where I found this picture, they do a big event called Paint Grand Travers it's the name of the organization, and they do a big outdoor or plenaire painting competition and exhibit every summer. It's huge. They want people to come in from all over the state, all over the country to participate and contribute art and view the galleries.
So the all text for this image is “artist plenaire painting by a lake.” So they're touching on the artist they're touching on the plenaire. They're even bringing in the lake which is a big part of northern Michigan. So I mean, and the primary purpose of the all text is not just for SEO. The accurate description is important and we're going to get into that a bit later. But those words in the alt text can boost the the search results of this page, and hopefully bring more people to Paint Grand Travers and their big plenaire competition.
Jay:
So it's a bonus feature
Erica:
Yeah, it's a bonus, it's a bonus. I like that it's not the it's not the salary. It's a bonus right. We're going to talk about one more piece here about alt text, and you know by this point you might be thinking back on images you've seen online and think, “well, wait a minute. I know lots of images, have captions, pictures and books, pictures and magazines, pictures online. Is that the same thing as alt text?” Or, “why would I have alt text if I could just do a caption?” Or, “are there times when alt text might be better than a caption?” "Or caption might be better than alt text?”
So let's talk about when captions might be better. And you know the first thing you know, from thinking back on your captions. As you know, the the difference is, captions would have visible text. So if you wanted that text to be visible, you know captions are the way to go. But if you're deciding, you know, well I don't know if that's the way to go. Should my text be visible? There's other things you can think about. The first thing is: How long does the description need to be?
Alt text should not be longer than around cut off alt text if it's too long, or interacting with all long sections of alt text gets pretty unwieldy and unpleasant. You don't want that to happen. So if you're alt text, or your description is not going to be short and sweet consider to caption. And then the other piece is, are you sharing information that's not apparent from the image. So in that last picture, I knew there was a lake I was guessing that that's Lake Michigan, just because I've been up by Lake Michigan, but I can't really tell. Could be Lake Huron, could be Lake Eerie, probably not. (laughs) But you know I do know there's a lake, because that's from all text. It's apparent from the image too, you know, I know that's a lake.
I have an image here of an astronaut. What's apparent here is that this astronaut is floating inside a spacecraft. There's no gravity there, but there's also a lot of scientific equipment that I don't know what it's doing. I don't know who this astronaut is. I don't recognize them. So the all texts for this picture is astronaut, you know, floating in gravity and a spacecraft. But there's a caption here to give me some more information and this caption says, “Astronaut Kayla Baron works on a space agriculture experiment that explores how to grow fresh food and space.” That gives a lot more information that, you know. If I was trying to figure out what Kayla Baron was doing in space, or who Kayla Baron is, that would be much more helpful to me than the simple alt text. But the all text does help because it gives me context she's not, you know, standing in a demo of the spacecraft on the ground. She's floating which I think is pretty significant.
So we're gonna jump over to Molly who's going to talk about how do we start writing this alt text once we know what it is and where to put it.
Molly:
All right, thank you, Erica. Yep, so first before we jump into these do's, and don't's, let's just keep in mind like Erica mentioned with that great quote from Maya Angelou that really half the battle is just being aware of alt text and the need for it. There are also some gray areas and personal preferences when writing alt text. And there's also a lot of interesting Twitter conversations where people kind of hash out what the best practices. But in almost every situation some alt text is better than none. So you're really doing great job by just being here and thinking about how you can add your alt text.
That being said, here are some of the best practices for applying alt text to your content. And all right. So the first one is, do be specific and succinct when you upload an image to your site. A good question to ask yourself is, how would I describe this image briefly over the phone? Your goal is to get the information of the photo across clearly and succinctly so the user has a good idea of what the photo is conveying. Like, Erica said, You want to aim for a character limit. So really want to aim for about 125 to 280 characters, about the length of a tweet.
And so okay, let's look at our example for this one we've got an example photo from National Geographic of Jane Goodall interacting with the chimpanzee. So we've paired it with the alt text, “Jane Goodall crouches in a jungle, holding out her hand to the outstretched hand of a baby chimp.” Notice that we only highlighted the relevant details. We didn't mention that Goodall is wearing a khaki shirt and shorts, or that she has blonde hair because those aren't pieces of information that would necessarily help the user understand what's being conveyed in the photo. That being said a context does matter.
So, although describing Jane Goodall's outfit in the last picture in the last example, sometimes it will be necessary. So, for instance, we're looking at 3 side-by-side photos from Vogue of models walking down a runway, all wearing hot pink dresses, and imagine that the headline for this photo and the article is, “Pink is the New Black.” That article and that headline are going to make a lot more sense when you know that this article is also featuring photos of people wearing pink. The understanding being that pink is a really is in style color that year.
So every time you look at your photo, just try to think about what details will help the user understand the page as a whole. What information would they be missing if the image wasn't there?
Okay can move on to our next don't. So this is this is gonna be a tricky one to get used to because it's going to feel really natural at first. But don't start with picture of or image of such as your picture of Jane Goodall. Instead, you'll just want to start writing the sentence, “Jane Goodall crouches.” That's going to feel a little weird, because you know you're talking about a picture, and if you need to, write that out and then delete it. By all means do that.
So in general if you're just uploading a photograph, don't put “picture of,” or “image of.” However if you are if you need to indicate what kind of image it is, you can do that. So we're looking at a cartoon from the New Yorker and we've paired it with the alt text, “New Yorker cartoon of a small dog wearing a turtleneck sweater, walking on a leash, looking happy. The text below reads: Descendant of wolves walking in mildly cold weather.” So the mentioning at the beginning that a cartoon is involved, that will prepare the user to know that maybe a punchline is coming, or that they can take in that information in a different way. So that is an important detail in this case.
Okay, and next up we've got alt text for data heavy images. So this goes for graphs, charts, diagrams maps, etc. Any image that's going to be really packed with a lot of information. This can be tricky, and we've added a bunch of resources at the end. That you can go through and see some really great examples of what to do with these different scenarios, but in general it requires two parts.
First, you have your short description to identify the image and summarize the data. Second, you have your longer description, which is a textual description of the essential information. So the short description is going to serve as the alt text. You'll also include in that alt text description of where you'll find the longer description where all of the data is going to just be written out. Or, if possible, go ahead and link to that longer description. You can also link to the raw data, just so that they have access to that.
And I will look at an example because that one's a little that one can be really hard to wrap your head around. I know I personally had to really think about this one. So here we've got an example. We're looking at a bar graph titled, “Star Trek Most Common Words,” and for our short description we've put in, “bar graph titled Star Trek Most Common Words, depicting the words most commonly used in subreddits discussing the TV show Star Trek.” So that is letting the user know what kind of graph we're looking at as well as the title and a quick summary of the information. Oh! and then it goes on, “the most common word is trek with 1,400 times.”
Then we move on to a description of where they can find the long description; “you can find the data under the source page.” And we go ahead and link to that which just takes us to a word document that spells out the data presented in the bar graph. So the person can easily just tab through and here. is the data read: Okay, so that one's that one can be tricky, but it is really important, and it kind of speaks to this next do: do include text that is part of the image.
I would think how Erica mentioned that with the Texas road sign. But that that's another one that might not be intuitive, because you're looking at an image. But it has text on it so you think, “wouldn't it be redundant for me to put text in the alt text box?” But no, because we don't have access to that text yet the only way to get access to the text on the photo is to put it in the alt text itself. So here we have the alt text example. We have a photo. This is really common. Okay, yeah, so this is commonly used like, imagine you have a screenshot of a Tweet or a screenshot of a text message. You're going to need to write out what is in the Tweet, or what is in that text in your alt text. This also is really common with promotional materials.
Like here we have a flyer image that we used in our newsletter and the Knowbility newsletter for a while, and we've paired it with the alt text, “person points at text that reads: We are hiring open positions. Senior accessibility consultants. Development director. Apply now. Go to the Www.Knowbility.org/careers.” You'll notice that after each line of text, or when here it's really when the text used changes, we put a period. This is so, the screen reader will pause between each idea instead of just reading it as one long thing. So those are some important aspects of that. You might also notice I didn't mention Knowbility in the text. It's because it's not really essential to that image there is the Knowbility logo in the corner, but because it's in the Knowbility newsletter that's likely implied.
Erica:
And just to clarify this is old, so if anyone's on, “I'm a Development Director,” your too late. We have the wonderful Elizabeth Boyte.
Molly:
Okay, great so don't load your alt text with SEO terms. Erica mentioned that one of the incidental side effects of putting in alt texts and a you know, great bonus feature is that it can increase your SEO, and it's really tempting to keep increasing that SEO or really use that, you know milk it for all it's worth especially with SEO. That's really you know can be a big temptation but, like Erica mentioned our primary purpose of using alt text is so that a person using a screen reader can access all the information, or person you know, if the image isn't showing up for whatever reason the thing about the person who's actually going to be using the alt text.
And so, for an example, here I have our AIR logo from 2021. We’ll be talking about 2022 soon. But for now we have the AIR logo from promote. We would love to get it higher on search engine returns, so maybe we'd be tempted to put this as our alternative text, “AIR, Accessibility Internet Rally, accessibility, conference, tech, web design compettion.” Now, if I saw this as the alternative text or if I got this as the alternative text, I would not know what I'm looking at, I'd have no idea, and there'd really be nothing telling me that this is a flyer, or that it's says 2021 Accessibility Internet Rally, or that it gives the web address. I have no clue. So just make sure that you're making sense when you're writing your alt text, and that it's actually conveying what the image is showing.
So do add alt text to images that link, to another website or web page. So this is really common with product websites but really it's used quite often, you know, on most websites, especially nowadays, using images as links or hyperlinks. But the important thing is that you let the person know if you don't include where that link is going to take them without an alt tag. The screen reader won't let the user know where the link is taking them, so they'll just be off and they have no idea where they're going.
So for this example, we're looking at three tubes of Glossier Cloud Paint. This is a great blush. I use it. But so for the alt text we've said, “three tubes of Glossier Cloud Paint. Opens the new tab to product page.” So we've included that it opens a new tab. So they know that we're going to a new tab it's not going to change the window, or it's not going to change that page, and that page will remain the same what open a new window and it's telling us where we're going to the product page.
We can move on to another don't which is, Don't repeat yourself. Erica also got into this with captions. it's pretty common with captions of the temptation would be, “oh, I already wrote a description of this photo in my caption, I can just use that for my alt text.” Since the person who is using the alt text will have access to the caption that would be really redundant, and they wouldn't get any new information from your alt text. So you want to avoid doing that. You also want to avoid repeating anything verbatim from the page itself.
And here we have a good example from the Lady Bird Wildflower Center which every year posts photos of what you might see in spring if you take a springtime visit there and walk the grounds. So they have a gallery of photos of plants and flowers, and below that they have included the common name and the Latin name. So the all text here is actually going to be really helpful, because you while because I might not know exactly what Yaupon Holly looks like. So we've included the alt text, “small red berries on a branch with green leaves,” and that way we haven't repeated ourselves, and we've given new information.
Okay. Next, we have decorative elements. So decorative elements are any nontextual element of a page that contains no additional information. It's things like line breaks or Erica's example of the star in the corner. Images that offer no additional information or not really necessary to understanding the page as a whole. A good question to ask yourself of when thinking is this decorative is, “if this image wasn't here, what would I say instead?” And if the answer is nothing, then it is likely decorative but you don't want to leave your alt text blank, because that will just signal to the screen reader, that an image is there, you just don't know what it is. So they might, you know, wonder if that was an essential element.
So instead, the common practice is to use a double quotation mark in the place of alt text. That being said, this is really an area of personal preference. Some users really like having a brief description of the decorative elements, because it adds texture to the page. Much, you know, which is very similar to the reason you would add a decorative element. So, for instance, here we have a photo screenshot from a website that says “private sessions” then “in person,” and below that is a photo of a humidifier with three succulents. Now the humidifier and three succulents don't really tell me anything about what's private session will look like, or what being in person with this practitioner will look like. But it might kind of lend a sense to what this spa will feel like if I visit it. So this is one where you could put the two quotation marks, or you could briefly describe the photo. It's really, you know, that one is kind of up to you.
Okay, so we can move to the next one. and I think we may have even had a question about this in the chat. But assigning gender. This is another one that really, really depends on context whether or not it's important to include that. But a, you know, big rule of thumb, whether you included or not, is to never assume. So, unless you know for sure the person's gender or pronouns. Don't use it. So most of the time those kind of identifiers are not necessary, and can even sort of bring about an unconscious bias. Such, you know. The big example is, if you see a photo of a male doctor in your alt text, you just put “doctor,” and when you see a photo of a female doctor, you say “female doctor.” So instead, just say “doctor.”
We have this example here that says, “Three doctors look at results on a laptop.” This is better than “one male doctor and two female doctors look at results on a laptop,” but that being said, as I said at the beginning, context matters. If this is an article about the rising prevalence of women in the medical field, then maybe it is important to include that there are two female doctors at the table. Okay, and finally, we're going to revisit screen readers. Yes, Erica.
Erica:
So this did come on the chat. But talking about identifying people's race or ethnicity and I think the same concept applies. So this is very timely that we both, you know, hit the same thing at the same time, you know. Same thing applies context, and then you know, how would that person identify their race or ethnicity, and to add, you know something. Sometimes you might be using like a stock image or something a lot of times the image description on like Pixels or something will carry descriptors that you know you can use that come from the person the photo. So you're looking at a stock image and you're not sure like, “Well, I've never met this person. How should I, you know? But I want to talk about gender.” The example in the chat was a page talking about equity and health care, you know. I want to be able to identify people's race in the picture. See if you can find details in the image description that you can apply, even if you don't know that actual person awesome.
Molly:
Thank you. Okay, So we're going to revisit screen readers, which was the assistive technology Erica mentioned at the beginning. And here we'll see a screen reader demo of a user interacting with different images, some with good alt tag some with bad.
Mark:
I have a couple graphics on this page
Computer:
mark set in hands on a Macbook Pro image.
Mark: So the first one is well described and uses an alt tag to describe what that graphic is all about. Now we go to the next graphic
Computer:
reader 0, 4, 2, 1, 1, 6, dot Jpeg,
Mark:
Much less useful. So it's important to use those elements. It's also true for tables.
Erica:
I'm going to pause this right here but if you do want to watch the rest of the video on your own, and you do have tables on your website or intend to use them section on tables is also very helpful. Yes. So in that video is pretty fast. But you might have heard it for that second photo of the Macbook where there wasn't any alt text included. Instead, it read something like image, you know, 4 or 5, 6, 9. And often if there is no alt text put in many programs or sites will automatically do that for you, and they'll just use the file name, which really is never going to be too a descriptive for using as alt text. Yeah, So that was a quick demo of what it sounds like when there's bad alt text,
Jay:
All right, so we want to start practicing, because now we've given you all this wonderful content. But really the best way to start applying that is, by putting it into practice, and having a safe way to do that with with your friends and your colleagues. And really practice does make perfect when you are writing your alt text descriptions. So we're gonna go ahead and show you a picture and I will describe this picture because we're doing best practices in terms of describing what's on a screen. But if you want to go ahead and put in chat what you think the alt text for this photo would be.
So we have a what we'll assume, is a parent with a child sitting cross-legged on the floor. The child has a set of headphones on, and it looks like they are holding a iPad or some type of small mobile device. Give everybody a minute to to type out.
Erica:
We had a really good comment in the chat from Pam wanting to know the purpose of the site, and that is really important. And this this might not be as fair an activity as it is hard to give the the context of everything. But if I can give a little bit of context, this does have to do with Knowbility’s K-12 Digital Accessibility programming. This is from one of the K-12 activities where we took this photo.
Jay:
But I like the thought process already happening with the group.
Erica:
Yeah, and that that is a very important one. I'm sure we could think of multiple situations where you might encounter a picture like this.
Jay:
So yeah, good point, all right. We have one from Jackie that says “Child, sitting on the lap of an adult on the floor. Child has headphones in a mobile device.” Click on our screen. So what we wrote is, “a child using headphone and a tablet, the headphones on a tablet, seated in their parents lap. They are looking at the tablet screen together.” So here if you noticed we we did not assume gender, but because for the picture, the reason why we used it, it really didn't play a significant role in what that picture was used so we just kept it gender neutral.
Erica:
Another thing that you might assume or want to be aware of assuming is family relationship. You know they're, the only reason we know that this is a parent and child is because when we hosted the event, you know they attended as parent and child. But if you didn't know these people and the information was not in the stock photo description, you couldn't conclusively say that this could be an aunt or a cousin.
Another example here, and this is going to be an example of a text or an image with some text in it. And to describe the image to the the context is that this came from Parade magazine, which is kind of a news culture lifestyle magazine from the west coast I believe. And this is an image. There's kind of a sky scene, a little stormy looking, but a rainbow, and then there are large yellow letters that say, “the way I see it if you want the rainbow you've got to cut up with the rain.” And there's smaller text below it, attributing this quote to national treasure, Dolly Pardon. So what alt text would you use for this image with text?
Jay:
So we wanted to have this example, as you're all writing down your your alt text for this one. I have a lot of people in my Facebook, and in my other social media accounts that will see something like the you know really pretty poster and inspirational quote that they find on a website, and they take us screenshot of it as an image. And then they just post it to Facebook. And they said, “Oh, this is so meaningful to me today.” But if a person can't see that image, if they're you know, having issues with vision, or you know if they need something like a screen reader, or anything like that, all it's going to see is the image unless you give it that alt text. So we were wanted to make this was kind of an example I think a lot of us might run into definitely.
Erica:
Well, while you're thinking we got a good question from Jock, “Is it possible to rate or rank, or test the quality of alt texts for a particular image, except perhaps by asking professionals or consultants?” And you say something so important here, “it seems so much like art rather than science, like cooking or poetry, rather than the weather report.”
Yes, and keep the poetry piece in mind because we're going to come to a resource that will really tie in with that later on, when we share some resources But yeah, alt text can be in art rather than a science, because context and nuance and all these things come into play, and you know it's not so much using like an automatic checker for WCAG. But sometimes it can be helpful to ask a friend or a colleague, especially someone who's not terribly familiar with your website or your organization. You can have them visit your site. You can also, you know, give someone the all text and say, Does this make sense? What do you think, or, you know, describe? You can literally describe a picture over the phone to someone and see what they think of that description. Does it make sense? You could even just make a test page and replace the images with the alt text. I mean you could do this in a lot of different ways but it really comes down to the best test of all texts is real human in terms, and there is no tool that to my knowledge that really evaluates all text for quality. But that's an excellent question. Yes, art, not a science.
Molly:
I also got a few questions about social media. So Instagram, Facebook, Twitter, Linkedin. They all have the function where you can add alt text to any photo you're uploading. We added some videos in the resource section that really walk you through, how to do it for each different platform. But yes, so yes, for Facebook it's you can add alt text to your posts. and for Instagram, you can also add all text to your post. Although putting it in the comment, I see that kind of often as well and I think it's a pretty good practice.
Erica:
Pam made a comment is a disability ministry team for conference at the UCC. You you're starting to be a site where churches can ask to give feedback and you have people with disabilities using your site and I think that's that's great to you know volunteer that information so thank you for that. That you're part of this community of people who want resources and help. That's a great way to get people networking together to check over your alt text from your different sites.
Jay:
Alright let's go ahead and see.
Erica:
Yeah let's go ahead. Dolly Parton. So we wrote, “a cloudy sky on rainbow,” because we wanted to give some visual texture of the page. But then we also add, “a text reads, ‘The way I see it if you want the rainbow, you got to put up with the rain.’ Dolly Parton. Parade.” And we used periods to separate out the sections of the text that's very important because it helps the screen reader not read the entire text as one piece, and also separate the text from the description of the image. And then, when you say, “text reads,” that tells the screen reader user that there is text on the image, and where the text begins and ends. Because if an image it was just an image, and it was, “The way I see it if you want the rainbow you got to put up with the rain.” that wouldn't really make any sense. I mean that's not a picture that's text but unless it says, “text reads,” that could be very ambiguous, because you certainly could have pictures of rainbow and rains. So important to clarify. Let's move on to a very timely picture.
Molly:
We just saw you know we're in the middle of the Olympics, so we thought we should of fun. I mean, I love the ice skating the most of the events. So we added here a photo of two ice skaters skating, and what we're doing here is caption practice.
So below the photo is the caption, “Four years after Olympic heartbreak, Gabriela Papadacis, and Guillaume Cizeron have gone golden.” But we'll give you a few moments to think about what alt text you'd add to this photo that might add some new information.
Okay, I think we should just go ahead and look at what what you might put here. So we wrote, “a male ice skater holds a female ice skater as they both dip towards the ice.” We kept it fairly simple. We could have described their outfits, just because that's a fun- I know people really like the ice skating outfits that's sometimes fun to include. And we did include the genders here, because we know the gender from the article, and from just watching them perform. So we were able to use that and we really I think the most important thing to describe is kind of the position that they're in, especially that the female ice skater is being held up off the ice so
Jay:
So here we have our decorative image practice. And so this was actually from a doula’s website. And this is something we're seeing more and more frequently in websites. Where they are using some kind of decorative images to kind of help break up the space, and help lead people to different types of information. So what we have here is, it says at the top is just the heading for the website, and it says, “supporting birthing people throughout the childbearing year.” And then there are four like medallions I would call them, of like a pink color and then there's a cartoon drawing of a green agava plant, with headings underneath each of those agavae plants. So they say, “inclusivity, respect, advocacy, and love.”
And just so we in the interest of time, I'm gonna say let's go ahead and go to the next one, and I'm I'm assuming you're all practicing in your in your mind. So here what we've done is we wanted to give the texture of those decorative images as opposed to just saying, decorative element, because we felt it did give some texture to the site and provide clues about the businesses environment. And especially when you look at the other images and things that are included in that site. It is this very, you know, kind of naturalistic bringing in nature and things like that, so that's why we did include, “pink medallions with green agave plants in the center,” as the alt text for each of those images.
Erica:
Yeah, and I do want to add, if this was your site, and you elected not to describe these decorative images it wouldn't be bad or wrong. You would still be getting the same information about your services and the text on the site. This truly is personal choice, and and don't let the fear you know these these here in edge of the knife decisions. I've kind of had to learn how to overcome that when I'm writing all text, and just write it if, I need to fix it so. You know, especially decorative images, you know. Trust your gut. Move forward with confidence.
I feel like I haven’t done one of these in a while so I'm going to do this one. This is a photo that doubles as a link so it's not just providing information. It's taking you somewhere, and this is the section of a recipe website. It's called Smitten Kitchen, and if you like to cook, this is a wonderful site. I have never heard a recipe from here fail. And we're going to be specifically looking so to describe what's happening. It's a section of site and it's got the top of two columns of photos showing different foods.
On the left are some round cookies, with hearts in the middle, on a baking rack, and on the right there are some square, I guess, Blondie pastry looking things, maybe with chocolate chips, and there's some text at the top of these columns. It says, “popular right now,” and we're going to be specifically looking at because these are links. If we were looking at that photo of those round cookies with the hearts which are called sweetheart sabels, what alt text would you add to indicate that this is not just a picture, but a link? So what we wrote here was, “a white circular cookies, with red trim and red hearts in the center. Internal link to recipe.” We used a period to separate the actual description of cookies from the direction of the link. And we said internal link, because it takes you somewhere else within the same website. If it was going to take you to a different website we'd want to indicate that too.
Molly:
Okay, So we're just going to talk quickly about adding alt text how you add it. We've talked about all the do’s and don't’s of alt text. Why it's so important, now we'll get to a little bit on how you add it. If you're working with WordPress or directly in the site, and you're using HTML, these are the two that you'll use so for an informational image. You can see the code here and then for a decorative image with an empty alt tag, you can see the code here. The big difference is with the informational image at the end where it says alt text here, that's where you'll put the alt text, and for the empty tag you just put the two quotation marks just indicating that there's a image there that is decorative.
Then we do have all of these resources for adding alt text to various platforms, including WordPress, SquareSpace, WIX, Craft CMS. And the social media platforms link is great. There's I think five videos about the different platforms. So hopefully that'll help get you started on wherever you're uploading content. We also have listed quite a few additional resources. At the top we have the resources that the W3C provided on alt text, that's just another resource page. And the W3C is just a great resource to use when you're learning about accessibility. And then we have two, we have one from Brandeis University, one from University of Minnesota. Then we have two blogs from Knowbility, “An Alt Text Primer,” and “Best Practices for Images, Text Alternatives,” and these are both really great. So recommend those, not to tune our own horn but.
And we have the Perkins School for the Blind, “How to Write Alt Texts and Descriptions for the Visually Impaired.” And Erica mentioned that I think it was Jock's question earlier about or observation really that alt text is more like poetry than science, and this is true. There's this wonderful website called Alt Text as Poetry that's just really great to look through, and use it's helpful as well. And then the last three are all about how to write alt text for data visualization.
Erica:
We have a minute for questions. I would like to address Jack's question: Is alt test is the responsibility of the designer or the developer? And that is a good question, and this is kind of my take depending on your organization and the skill sets of people who are working on your website. This might change a bit.
In my mind, the designer is sort of setting up, and just you know the display of the information on the page. So I would say, if the designer is choosing an image, then they should be able to provide the alt text that goes with the image. You know, and your organization has an accessibility specialist, they might be able to offer guidance on is this appropriate alt text. And then, you know, does it match the context of the image. But then, when the designer hands over all the you know, the wire frames to the developer, the all text should be in there, and then the developer can ensure that the alt text is correctly coded into the site.
But if you have a person, you know, I know some small organizations, their content developer and designer is the same person as their website developer. Then it would be kind of one person doing it all. They might, if it's a a community garden and there's the one person who is doing a part of the garden has, you know images of all their plants, and the designer says, “Well, I don't know what these plants are.” Then you could talk to the expert on that program or the photographer to make sure that the alt text is accurate. The but in my mind that should come in with with all at the content.
And then this is in two pieces; “assume a website's visual prompt includes a photo not just…” So this would be like a short video with alternative and you're wondering if correct me if I'm wrong. Are you wondering if there would be alternative texts for the short video? That's a very good question and that's actually going to take us into a different topic of accessibility. But i'll just mention briefly what it is.
There is something for videos. It's called audio description and that is sort of an added in narrative, that goes along with the video content. It's done in another voice, separate from the people in the video talking, and it describes the visual background. We have some wonderful friends of ours at Art Spark. Their website is artspark.tx.org and we can put it in the chat. They're an arts nonprofit and they specialize in many things, including audio description, for video. So you can definitely contact them with questions if you need help, or if your organization needs audio description.
Also, if you have like a Netflix account or Hulu you can find examples of audio described films. So maybe it's a movie syou’ve seen before you want to see what the audio description would be like just to get a sense of it. I highly recommend that.
Jay:
Mary had the question about the and correct me if I'm wrong, Mary. You had the question about the image that when you hover over it, it gives a slightly different image of the same product. So like if you're on a page and it's an image of a candle and then you hover over that image, and it gives you like a slightly different picture.
Erica:
Yeah, I had some thoughts on that one actually we've got time. I would think about, what are you trying to convey with it. So the context was a picture of a candle and when you hover over it, it's a slightly different image with the lid of the candle removed. I would say, the question to ask would be, What are you conveying with the the switch and images? You know. Are you doing it just to add a little visual texture? Do you want people to see what color the candle is? If it's just to add a little bit of visual interest, my personal take would be having two very, very similar alt texts right in a row might, you know, not be as pleasing to someone navigating with the screen reader, as it would be to someone visualizing the information.
So my personal take would be to leave it out but there's no one right answer again. Art rather than science. Yes, The screen read if it's coded correctly the screen reader would be able to access the alt text. But it might just be a little bit similar, you know. it could be, “Wildflower candle on wooden table,” “wildflower candle, and wooden table with lid removed.” Especially if there's multiple candles being displayed on the page.
Jay:
Patricia has a quick question here about head shots. And I think it's kind of a, I hear different schools of thought on what needs to be included in a headshot. I think some of the resources that we've provided can give you some good examples. But if anybody else has you know a strong opinion one way or the other.
Erica:
I have a lot of feelings tonight. I'd like to make a response. So and we do this pretty frequently, because with our virtual conference, or now a hybrid conference, you know we have head shots everywhere. And you know pretty frequently, and it seems to me and correct me if I'm wrong that when you're displaying this information, the event says the name of the person who's in the headshot.
So for example it might be, you know Patricia Forte has got her head shot. But then in the in the description, it says, “Patricia Forte will be talking about alt text on Wednesday from 2 to 3.” I would say I like to do it, and again, art, not science. But this is the way that I typically see it done on most websites. It's a portrait or headshot just the person's name, first and last. And then all the contextual information about the speakers topic, and when it's going to be that will be covered in the written text description. But it is nice to have the person's name in the alt text for the headshot, just because it gives an idea that even if I'm not taking in the information visually on this page, I know that they're showing me who the speaker is.
And then Jock was looking for a developer.
Jay:
I would say, If you want, Jock if you want to email us what you're looking for, and we might have some people that can give you some good resources, of questions to ask, where to go because I think it's going to be more about what are good questions to ask those people that you want to hire, to make sure that they have the skills you need.
Erica:
And you know, another thought is depending on where you're located, or actually, virtually, because a lot of these meetups are happening online. If you look at meetup.com for a digital accessibility meetup or an accessibility meetup. You know, pretty frequently you might be able to find a referral through there. Or you know they might be able to offer you some resources to help, you know, with your internal groups of development.
Jay:
But let's go ahead and put our next session up for everyone.
Erica:
Oh yeah, definitely. Yeah, we want you to come back.
Jay:
(laughs) So hopefully you've got a lot of good information, and this is just the start of your journey. So we do encourage you to join us for next month we will be talking about descriptive links in plain language. So how are you creating links on your websites or on your social media platforms? And then also you know some good tips in how to write your content and and things to consider. So that will be on March the seventeenth, to get to the descriptor page with little more info. you can go to Knowbility.org/programs/be-a-digital-ally. And then Molly can put that up in the chat for us as well.
And then we'll go on to the next slide, and we want to encourage people if maybe your skills are a little higher than some of us and you're like, “Oh, I want to get into some more meatier topics of accessibility.” You can join us for our John Slatin AccessU This is our annual training conference. It will be May the 9th through the 12th. It's a hybrid event, so you can attend online or in person in Austin, Texas, and for more information you can go to Knowbility.org/accessU.
And then one more slide because we can't get enough of you. We do have a couple other ways to stay connected that is through our newsletter, and we send that out a couple times a month. So it's every other week, and that will be www.bit.ly/KnowbilityNews. You can also follow us on social media. You can always find us @Knowbility, or if you just want to email us directly, you can email us at hello@Knowbility.org.
Thank you. Thank you so much for participating with us. This was a great turnout. We hope to see you again next month. We're really excited about the series, and to really connect and give people some good tools that they can take with them and apply pretty immediately. So thank you again, and of course, if you had a great time you know we'll pass the tip hat around and let you know about our donation page again at knowbility.org/donate. Thank you all.
Molly & Erica:
Thanks everyone!