My name is Cheyne Klein. I live in Christchurch, New Zealand. I'm employed as a happiness engineer at Automattic, and I was previously a web developer with over 10 years of experience, and I mainly created websites using WordPress and WooCommerce. And in the chat, if you'd like to please share where you're tuning in from and what your experience level is with WordPress. That would be really cool.
Okay, so my name is Muhibul Haque. I'm serving as training team reps currently, and I am also working for WP credits and Campus Connect initiatives. I'm really excited to be here, and thanks Cheyne, for this excellent initiative. I hope we will learn a lot from you, and I would love to hear from others.
Thank you so much. We've got Gerald from Arvada, Colorado with five years of experience. Welcome
Maruti. He's a colleague of mine and friend. So welcome Maruti. Good to see you here.
Awesome. Thanks so much. So before we begin, I wanted
to remind everyone that this session will be recorded and put on wordpress.tv, afterwards.
Participation is encouraged. So throughout the workshop, please feel free to ask any questions. Just come off mute or type in the chat and me and Saidul will keep an eye out for those questions
if you know the answer to something, yeah. So please feel free to participate if you'd like to add something to any of the information from your own experience. Please feel free to do so as well. And we've just had a fantastic example of
please stay muted
while.
Please stay muted if you're not talking, so that we don't get any background noise
and
Yeah. More importantly, let's try and have some fun and learn from each other during the session.
So we're going to cover describing images, accurately, being concise with our descriptions. When to include important context, what not to include, mentioning text and the image if it's relevant, avoiding keyword stuffing and then image context, how to treat content and control images differently.
So
let's begin by asking everyone, what is image? Alt text, and feel free to write your answers in the chat, and I'll share share the answers with everyone.
So it's a pretty broad question. So any, any answers at all will be will be fine, don't be shy.
I had very basic information about image alt text, actually, so I thought it's just adding, we are adding, if it's it's for brow search engines. But as you shared few
thing, I mean, the slide with me, and now I know it's about accessibility as well, so I'm waiting to learn more about it. Yeah, perfect. Thank you. That's That's right. It's about accessibility first and SEO second. And we've got a few other answers. Murti saying alternative text that explains the image in a few words. Gerald saying text that describe what the image is about. Jeff describes images for screen readers, and he thinks it originates from the dial up days when they were used in place of images for slow connections. That's really insightful. Thank you. Works for accessibility for screen readers. Yeah,
great stuff. So might as well end the session there, you expert, but we won't do that. I've got to
answer an explanation, which I'll just quickly read off. So Alt Text is a short written description of an image that makes its content accessible to screen readers and provides content context when the image comes.
Seen, and it also supports SEO by helping search engines understand what an image represents, which can improve visibility and image search results when written accurately and descriptively. So that's a pretty technical definition, and we'll dive into what that all means. So
when we're describing the image accurately, we want to focus on what the image shows and not what it feels like. So for this image on the right here, if you were writing alt text for the image, what would you say? So again, if you want to put your answers in the chat, we'll discuss and I'll read the nut for everyone.
The marble has written sunrise or sunset? Yeah,
thank you very much.
Welcome Maurice,
welcome node, good evening.
Um
Maruti has also Jeff has color photo of a sunset over the land and ocean, and Marty's written sun setting behind the mountain overlooking the river, or something like that. So
thank you very much for sharing. I think those are really good answers, and I've come up with one pretty similar, actually. So sun setting over a mountain and a body of water would be a nice descriptive alt text, but something like nice sunset is just a little bit too vague.
So like Maruti has written, overlooking a river. So if we took this photo and we know it's a river or an ocean or a lake, we could add that context. And
if you think it's important to convey that, please add it in. We could also perhaps write that it's the sun setting through the clouds and that there are some boats in the water here, if that's important, write it in, but yeah, we just want to focus on what it is showing. So moving on.
When describing images, accuracy matters first. So Alt text should tell exactly what the image shows, so both screen readers and search engines understand it correctly, avoiding vague or overly interpretive descriptions unless the meaning is essential.
So we've got another example,
and we're going to again focus on the observable content. So describe the actual objects, people or seen of the image. And if you were to write alt text for this, what would you say? So once again, please feel free to include your answers in the chat, and we'll go through them again. I
Hey, Jeff. Thank you very much, Jeff. Has written color photo of a red apple on a wooden table. Maurice, a red apple on a polished wooden table. Maruti, a red apple on a wooden table. So I think
everyone is doing exceptionally well. So my answer would be a nice, accurate one, like we've pretty much all written red apple on a wooden table, and they want to avoid a vague or emotional description, such as a symbol of health and freshness, because while that might be true for me, that an apple represents those things, somebody else might be allergic to apples, and it just kind of loses all meaning in that, in that context. So, yeah, well done.
So
when we are describing the image, we can include feelings if if they matter. So if an emotion or mood is essential to the message, you can mention it, but tie it to what's visible. So in this example,
we could say that it's a smiling child holding a birthday cake, but if we just write happiness to.
Abstract without a visual reference, and tying back to the image. So
why this helps SEO so search engine, search engines, index images based on alt text, accurate, descriptive text makes your images more discoverable in relevant searches. Overly abstract or misleading alt text can hurt both accessibility and SEO.
And there's also another aspect, which is being concise. So if we aim for a short sentence or phrase, around 125 characters or fewer is ideal.
And on the right here we have the image of our dogs in the field, and a sort of non concise description might be photo showing Golden Retrievers, which are very popular dog breed known for being friendly and loyal, playing in the grass with the Tennis ball and enjoying the outdoors in nature. So it is conveying those things, but there's a bit of extra stuff there that we may not need to include. So a more concise
description might be golden retrievers playing in the grass. Or you could even write Golden Retriever puppy and assuming the mother playing a girl, something like that, but we don't need to say that they're a friendly, popular breed all that extra stuff.
So
on the topic of being concise, here's why keeping alt text short and concise is important. Screen Reader usability. Screen readers read alt text aloud to visually impaired users, short, clear descriptions are easy to understand and digest quickly. Focus on essential info. Keeping it around 125 characters forces you to prioritize the most important details, so users get the core meaning without the extra fluff
improves accessibility across devices, so short alt text works better on mobile or when multiple images are read in sequence, long sentences can be tiring or confusing, and the SEO benefit, which comes in secondary, concise, descriptive alt text can also help search engines understand the image content without keyword stuffing,
including important context. Think about why the image is there and what does the user need to know about it. So for example, if we have a blog post about gardening, and we just use the alt text, plant in garden. While that is accurate, we're sort of leaving some details out. So we could say tomato plants supported by a wooden state in a pot, which would give a lot more context, especially on the subject of gardening
and we don't need to include image of or picture of, so screen readers and search engines already know it's an image. Screen readers automatically announce that it's an image. So including phrases like image of is redundant and can make the description feel clunky or repetitive. So we don't need to say image of cat sitting on a sofa. We can say something like cat sitting on a sofa looking out the window.
And we can mention text in the image if it's relevant, so if the image contains important text, like a sign or infographic, we can include it when describing an image, especially for accessibility purposes. We should include any text in the image that provides meaning or context, because someone who can't see the image won't get that information otherwise. So for our example here, we could say road sign next to a road related to drivers and cyclists, reading, be courteous, share the road.
And a very important topic is to avoid keyword stuffing. So Alt Text is for users first, not SEO first. So please don't cram in keywords unnaturally.
So Alt Text serves a primary accessibility function that provides a text alternative for users who can't see the image, for example, people who are visually impaired and rely on screen readers. The goal is to describe the image in a way that conveys its purpose or meaning in context. So if you're running a competitive online shoe store, you might be tempted to write a description such as fire red monkey running shoes. Best me.
Running sneakers, athletic shoes, sport shoes for jogging. Buy top quality running shoes online, something like that, which covers so many
search phrases. But instead, we want to make it user focus, so we could say something like red Nike running shoe with white sole on a red background.
So let's look further into
why we want to avoid keyword stuffing. So if you stuff keywords, sorry if you stuff alt text with keywords, if you try to rank better in search results, two problems happen. And the first is it creates a bad user experience. So screen reader will read out the keyword stuff, alt text, and it won't make sense to the person listening. Instead of getting helpful context, such as Golden Retriever puppy playing with the tennis ball, they'll hear something like golden retriever dog puppy, cute dog spy puppies, tennis ball, dog toy, which doesn't sound very nice.
Search engine penalties, Google and other search engines now prioritize accessibility and user experience. Keyword stuffing can actually hurt SEO rather than help it. Well written user first, Alt Text indirectly helps SEO by making content more usable, not by cramming in extra keywords. So a golden rule is to
describe the image of it explaining as if explaining it to someone who can't see
if the keywords fit naturally. That's okay, but clarity and usefulness always come first.
And we've just had comment from Jeff
saying keyword stuffing is always a challenge. Marketing departments insist on keyword stuffing. In my experience, how do you convince them not to
yes and yeah? Jeff's answer his own question. Google penalty. So I'm sure if as soon as any marketer sees that as a consequence, they might think to us,
thanks very much for that.
So there are different types of images, context matters, content images versus control images. So the topics we've covered are guidelines for content images, like photos, illustrations or graphics that support your content, but there are other types of images that we might use, such as a linked image button or an icon, and these need to be treated a little bit differently. So if an icon is used as a button, the alt text should state what that button does, for example, search or play. And in our example here, we could write stop play and next.
So
yeah, really good to
just check which context the image fits in, and then I treat it accordingly.
So I've put together a quick checklist that we can reference for when we're writing our alt text, and we need to check things like what is in the image, describing it clearly. Why is it there? Include relevant context, keeping it short and concise, and we can use that 125 character guide
and including text in the image, if it matters, we don't need to say it's an image of or picture of something. And, of course, avoid keyword stuffing. So so we've got a comment here from node E
I'm making a web a web site for a travel agency. When I upload a photo, can I put the name of the place or not?
Yeah, I think that would be, that would be pretty helpful, actually, to include the location that's something that is important, like it would be for a travel agency. Then I would suggest that you do. And if anyone else has thoughts, please feel free to reply in the chat.
But that would be my take on it.
So
I thought, well enough talking, let's actually see this in action. So
I've spun up a WordPress playground installation. And if you haven't been to playground.wordpress.net,
before, I highly recommend checking it out. You can quickly get a WordPress site up and running, and you can test things, and,
yeah, just get get it off the ground really quickly you want to test a new plugin or something like that. So first
I.
So let's go to our dashboard and we will, I'll create a post first. So
I'll just write
image post, and
I will upload an image.
So I've got over to the side here, and so immediately, within the media library,
we can break, sorry, enter our alt text into the side panel here.
And because it it shows like quite a small preview. But the demon. For the purposes of this demonstration, I'll enter it in first so we can actually see it a bit better. And I also wanted to show you that the alt text box is available in the Settings panel to the right here, so we can write it in the media library or in the post itself. So for this one, I'll write
a laptop,
notepad, pen,
phone and a coffee on a wooden table.
So
once we enter that in, I'll just publish the post. And I want to show you
where the alt text actually shows so
inspecting the page here and looking at the image element, and you can see here that the alt text is included within the HTML itself. So a screen reader will
find this image and then announce this alt text that we've set. And so will a search engine. We will come and visit the page, and then this alt text will now be associated with that image.
I've got another question here.
Jeff saying, if I write alt text in the post, does it apply only to that post, or does it attach in the media library, which I believe it shows only for that post? So
let's have a look at that theory. So when we click on the image, our alt text is still here, and if we go into the media library
and look at it, it's not there.
So I hope that answers your question, and the next part of my demo is going to be
uploading three or more images into the media library, and then we can use the interface to
suggest, sorry, just saying, so would it be better to do it in the media library?
So that is that would be my preferred option, because you can upload, like I just did, three or more, however many images you want at once, and then cycle through them with these arrows and write your alt text all at once. And then when you apply the image throughout your website,
it'll refer back to that alt text. So you'll essentially only have to do it once. So let's, um, let's, let's fill out this alt text here. So for this, I might say something like four
wine bottles and a wooden rack.
And
this one, we could say to many, say in many different ways, but I will say a glowing
Full Moon with shadowy trees and
the foreground, something like that,
spelling mistake. Sorry about that. Shadowy trees in the foreground and a very interesting image I found as a moose
and a brightly lit
modern
living room, which is a funny sentence to type out, but
it should do the job. So again, we've got our first image which didn't have the alt text included, but it is on the post. And then we've got our three other images, which I've added the alt text for within the media library. So now I want to go back to the post
and
add one of these images
so that you can see
that the alt text applies. So the one in the.
Yeah, so we've got our alt text here, save that view the post,
and then
we've got our alt text for our laptop workstation, and we've got our alt text for our wine bottles,
which is just shown here. So
that's pretty
much the workflow for adding it within WordPress. And there's got quite a few questions coming in here.
So node is saying alt text when I add it into the media library works in every page I use the image, so that's correct.
Yeah, thanks, Jeff. So Jeff saying, if you add the alt text to the Media Library after you add the image to a post, that won't apply to that post,
and we've got Maurice asking, should you add alt text in post when the context is critical.
Should you add alt text and post when the context is critical? I think if you're going to use different like the same image on different posts and it and it relates to that post differently, you might want to change the alt text on the within the posts. I believe you can use it for two different
posts in two different contexts,
yeah. So
maybe some more experimentation, but that's my understanding of it.
So we'll jump back into the slides here,
and I wanted to let you all know, if you don't already know, that loan.wordpress.org
has free educational resources to help you up skill your WordPress knowledge, and I've linked some courses, I think, as relates to this topic, which is web accessibility, guidelines to create inclusive websites, how to test your content for accessibility,
how to optimize images, which helps with SEO, how to improve your SEO rankings
using the WordPress media and text block.
And you can visit learn.wordpress.org
forward slash online dash workshops, to see any more upcoming online workshops, and I believe that they'll also be posted on meetup.com
and these workshops are run by volunteers, so if you want to get involved, you can choose to co host or host, but if you don't feel comfortable with that, you can create the content for a lesson of a workshop, or you can translate the existing workshops or lessons into languages other than English, and you can review and edit the content of a lesson or workshop as well. So if you want to get involved, please do so, and we highly encourage you.
Yeah. Thank you so much node is saying from Venezuela and can translate. So we'd love to have you.
I just wanted to give a shout out to the images that I used through this presentation. If you'd like to learn more about the photographers of the images used, please visit the links below or check out uns.com
openverse.org,
and I also generated one of the images using Google Gemini. So
yeah, please, please check those out if you're interested.
And lastly, I just wanted to say thank you very much for your attendance. I hope you learned something new.
Very special. Thank you to side door for CO hosting, and I hope to see you along at the next one. So with that, I'll stop sharing my screen and come back into the
Zoom chat here,
and it looks like we had some a little bit of confusion around which alt text, like, if you apply it in the media library, will it show on all the pages, or if you just add it into the post, will it just apply to that post? So I think that's actually worth exploring more, so I encourage you to do that, and if you get a definitive answer, you can feel free to let me know.
So thank you very much.
If you have any more questions, I'll hang around for a little bit longer. Do.
And yeah, answer any questions in the chat. Well, please feel free to come off mute.
You're very welcome. Matt,
yeah, Maurice, I'm going to post the recording on wordpress.tv
and I've also got a link to the slides, which I'll post in the chat here, so that you can
check it out again in your own time, and check out some of the links that I've included in the slides and
okay, maybe have covered all the basic and intermediate things. No question anymore. So if anyone have any questions, please ask here, because this is a platform to talk with each other. So by talking with each other, we can gain some more information about alt image text. So I do have a little questions to share that if we don't use any objects in the Image section,
how Google will identify how Google what will identify what the object is? Is there any clue?
Is there anyone to ask any questions?
Maurice, I can post the link to the presentation on the meetup.com, link as well, so you won't have to worry about saving the chat. I'll make sure I post it there for everyone to reference
and say, Do I think were you asking about how will Google know what an element is when it comes to the site? Yes, yeah. So in my understanding, it's all to do with HTML tags.
So if it's an audio or video or image, that's how it identifies what each section or element on the page is, and then within that, like we included the alt text, they'll gather more information about what that is. And you know, we also had with an image, we could add alt text, we could add the title description, we can add a caption, and so it will pick up all of those things and associate it with that element. So that's my understanding.
Okay, so another questions comes from Louisville that do alt text only works for images or any type of media, like video as well,
I believe. So let's have a I can jump back into
the WordPress playground.
Upload a video, please. I have one.
Okay, so Lonnie replied that
I never see that for videos. So let me see also here. I
Uh,
okay, so
I'll share my screen again.
Share my screen. Okay, so I'm back in the media library, and I've got a video here, so I'll upload it,
and we'll see what happens. Okay, so it's slightly different, so we've got title, caption and description, but no optics, so I.
Yeah, thank you very much for that question. That was a
ti l for me,
yeah, here we go.
There's a very fantastic questions asking
Mori up,
can upcoming events are on the meetup.com
website, where you may have signed up for this, and also the learn.wordpress.org
website, and I can
get you a link, if you
Yeah, I'll post this link here
into the chat.
Yeah, so all the upcoming online workshops, you can access that link and Yeah, watch that space. I think we've got a really cool team assembled to keep delivering online workshops over the coming months about all sorts of different topics, so I just identified this as a topic that I would like to present, and other people will do the same. And if you'd like to create an online workshop about any topic related to WordPress, please feel free to do so, but a whole team behind the scenes that'll help you
you know whether or not, if you've written all the information, we can review it and check it and give you feedback. So yeah, you're not alone, is what I'm trying to say. Yeah,
awesome. Well, I think I'll end things there, and just want to thank everyone again for your participation.
Maurice green,
do you want to tell something? I thought that you want to do something you do. So do you have any questions to ask him?
No,
okay, thank you.
But I got everything
cool.
Thank you. Thank you all. I have it here.
Yeah, thank you very much. I'll be sure to post and the meetup.com event with the presentation notes. And yeah, feel free to engage with me there if you have any further questions. But I'll, I'll end things there. So yeah, thanks again, and we'll see you in the next one.
Awesome. Thank you. No
worries, bye, bye. You.Transcribed by https://otter.ai