Reed Piernock – Writing Expressive and Effective ALT Text

ABOUT THE PRESENTATION

As an editor on a WordPress site, your perfectly curated images wonderfully complement your content. You know you’re supposed to provide appropriate alt text for those images, but what exactly will you write? How do you accurately describe that image? Wait, do you even need alt text? Get demystified about this important, yet sometimes overlooked, attribute of the humble HTML image element.

ABOUT THE PRESENTER

Reed Piernock is the Director of Web Strategy and Development at Rowan University. They have been a front-end developer for over 25 years, specializing in accessible websites using intrinsic design and modern CSS techniques. Reed has worked with WordPress themes in the higher education field since 2017 and sits on the board of directors at WPCampus.

RESOURCES

Website: https://reedcodes.com

Follow:

• Mastodon: @reedpiernock (https://higheredweb.social/@reedpiernock)
• Threads: WPCampus Slack channel (https://wpcampus.org/community/slack/)

SUMMARY

At the recent West Orlando WordPress Meetup, attendees were treated to an informative session on the often-overlooked yet crucial aspect of web development: alt text. Led by Reed Piernock, Director of Web Strategy and Development at Rowan University, the third Thursday Meetup delivered valuable insights into making web content more accessible and SEO-friendly.

Understanding Alt Text Fundamentals

Alt text, short for alternative text, serves as a descriptive element within HTML coding that provides context for images on web pages. With over 25 years of front-end development experience, Reed emphasized that effective alt text goes beyond mere description—it’s a vital tool for ensuring web accessibility and enhancing user experience.

Best Practices for Alt Text Implementation

One of the key takeaways from Reed’s presentation was the importance of avoiding redundant descriptions. For instance, including phrases like “photo of” is unnecessary since screen readers already identify elements as images. Instead, the focus should be on conveying meaningful content, whether it’s emotional, contextual, or informative.

Different Types of Images, Different Approaches

Reed outlined three main categories of images and their corresponding alt text requirements:

Decorative Images

For images that serve purely aesthetic purposes, Reed recommends using an empty alt attribute. This prevents screen readers from announcing unnecessary information that doesn’t contribute to the user’s understanding of the content.

Informative Images

These images require descriptive alt text that enhances the user’s comprehension of the content. The description should be concise yet comprehensive enough to convey the image’s purpose and meaning.

Functional Images

For elements like logos that serve as navigation tools, the alt text should focus on describing the action rather than the visual aspects. For example, a logo linking to the homepage should emphasize its function rather than its appearance.

Practical Application in WordPress

The session included hands-on demonstrations using a sample WordPress site, showing attendees how to effectively manage alt text within the WordPress media library. These practical examples helped bridge the gap between theory and implementation, providing attendees with actionable insights for their own websites.

Impact on SEO and Accessibility

Beyond the technical aspects, Reed emphasized how proper alt text implementation significantly impacts both search engine optimization and website accessibility. This dual benefit makes alt text an essential element of modern web development strategy.

Conclusion

The meetup session, coordinated by co-organizer Rob Watson, proved to be both informative and practical. Attendees left with a deeper understanding of alt text implementation and its crucial role in creating inclusive, accessible websites. Through Reed’s expert guidance, the WordPress community gained valuable insights into making the web a more accessible place for all users.

This comprehensive overview of alt text best practices serves as a reminder that small details in web development can have a significant impact on user experience and accessibility. As websites continue to evolve, maintaining these standards becomes increasingly important for developers and content creators alike.

TRANSCRIPT

[Music]

Welcome everyone to the third Thursday Meetup of the West Orlando WordPress meetup group. I’m Rob Watson, a co-organizer and host. West Orlando WordPress is an official WordPress Meetup Group affiliated with the WordPress Orlando and WordCamp US meetup groups. As an editor on a WordPress website, your perfectly curated images wonderfully complement your content. You know you’re supposed to provide appropriate alt text for those images, but what exactly will you write? How do you accurately describe that image? Wait, do you even know? Do you even need alt text?

Get demystified about this important yet sometimes overlooked attribute of the humble HTML image element. Reed Piernock is the director of web strategy and development at Rowan University. They have been a front-end developer for over 25 years, specializing in accessible websites using intrinsic design and modern CSS techniques. Reed has worked with WordPress themes in the higher education field since 2017 and sits on the board of directors at WP Campus. At this point, I’d like to invite everyone to mute their microphones and enjoy the presentation. Reed, thank you for being our presenter. The time is now yours.

Hi, thank you everyone. Like Rob said, my name is Reed Piernock. My pronouns are they/them. I’m the director of web development and strategy at Rowan. Most recently before that position, I was a principal web developer at George University. So been using WordPress on our sites for about 8 years now. So there’s a lot going on with WordPress, and what I’d like to talk about today is alt text. We’re going to talk about writing expressive and effective alt text.

On screen says ‘What is alt text?’ Below that is a snippet of HTML code that shows an attribute of alt equaling image description. Alt text or alternative text is the name given to the short description of an image. It can be a literal description of everything included in the image or can describe the feelings or emotions that the image invokes. Alt text is coded as part of the image tag’s alt attribute. It’s a text-based field that can include alphanumeric characters and punctuation.

Writing good alt text depends not only on the image itself but also on the context of the image and what that image is trying to convey. Sometimes no alt text is the right decision if the image is purely decorative and removing it would not in any way impact the meaning of the page’s content. Other than that, there are decisions that need to be made depending on what type of alt text should be in that image. Because browsers and screen readers already know that it’s an image because of that HTML element, the alt text shouldn’t include phrasing like ‘photo of’ or ‘graphic of.’ This is redundant because a screen reader will announce the image as an image, so a screen reader user would hear like ‘image photo of,’ which is redundant and can get annoying after a while.

Why should we use alt text? There are three main reasons. Here on screen it says accessibility, missing images, and search engine optimization. For accessibility, that is the most important reason for using alt text. It helps people using screen readers and visually impaired users understand what that image is. For missing images, you could have a slow internet connection or images turned off, and even though SEO is affected by what is in the alt text, I wouldn’t say it’s used solely for the purpose of SEO, but search engine optimization can help not only with rankings but also people looking for maybe specific images of something. So that first one, that accessibility reasoning, is the most important. I would put that as priority number one for whatever type of alt text you’re trying to write.

On screen says ‘all non-text content that is presented to the user has a text alternative that serves the equivalent purpose.’ This is part of the Web Content Accessibility Guidelines Success Criterion 1.1.1 for non-text content. Having alternative text content is so important that the WCAG guidelines put it as the very first success criterion that they recommend. The four principles of accessibility have an acronym of POUR: perceivable, operable, understandable, and robust. So right now we’re only going to be concerned with that perceivable because images are covered as non-text content, and so this perceivable principle means that the information and user interface components must be presentable to users in a way that they can perceive.

People with visual disabilities, people using screen reader software need to be able to perceive the same content on a web page as a user with no visual disabilities or not using screen reader software. This is especially important when the image conveys meaning or is complementary to other content on the page. If the image in your content has meaning in some way, whether it is displaying a photograph or trying to evoke emotion, then that image needs alt text in order to be accessible.

Missing images on screen is a little logo of a broken image icon. Sometimes these are shown in browsers when the image is missing. It may also show the file name of the image if there’s no alt text, but if there is alt text that could be shown in place of the missing image icon or alongside the missing image icon. Reasons for missing images could be slow connections, images turned off, they’re removed from the server, or wonky scripts. If a user is on a slow internet connection, images might fail to load. This could be on a mobile phone in spotty cell service areas, old library computers, anywhere that the internet connection itself is causing something to break as the page is loading.

That can often be images because they are usually the most file size drain on the page’s load. And for that reason and maybe for other reasons, users could have turned off images in their browser. Sometimes it is because of their slow connection, sometimes it’s privacy and security purposes, sometimes it could be a visual or cognitive disability where images can be distracting to the user. So we don’t know particularly why a person might have them turned off, but if they’re turned off, they should still understand what that page is trying to convey.

Sometimes in a reorganization, an image might be removed from the server. It could be especially, like in WordPress, unless you have a specific plugin, you don’t always know where an image is being used. So you could delete an image from your media library or an image on the server, but those references are still somewhere on your page. So this is where you’re also going to get a missing image, and if that happens then the alt text will be there to help back it up. And then in some cases, especially if they’re external scripts or using CDN to load scripts, they could get in the way of other things and conflict on content that’s on the page. So this is also causing missing images. Now I made this separate than accessibility, but this still counts as accessibility because even though the image is missing, that text alternative is available for everyone to perceive, not just people using screen readers as in my previous examples. So this is accessibility, helps everyone.

That third reason, search engine optimization – I have a screen grab here of a Google search for sunflower. The first results on the page are images. There are three images of a sunflower in a row. This is placed even above text content and URLs to pages. The images show up first. So alt text can help a page when performing a search or an image search, and nearly all search engines have the option to search by images and not just through the general all search. Having good alt text can help with these rankings. It might not necessarily give any type of preference to those, but if you’re using good alt text, it could come up in the searches if someone searches something specific that is about your image. But also having keywords on the page and that image being surrounded by something that is related to the alt text, that will also help. But I do want to reiterate that accessibility is the most important priority when considering alt text. SEO happens to be a good side benefit.

Context matters. On screen says ‘Why is this image on the page? Is it to showcase what’s in the photo or to complement other information on the page?’ So if the image serves a purpose in some way, there must be alt text. If the image is not serving a purpose and it’s just eye candy, there doesn’t need to be alt text. What can help figure out if you need alt text or not, or what that alt text should say, is the context of that image. They can be decorative, informative, or functional. Figuring out through the content of your page what the context of that image is can then help you kind of form your own mental decision tree on how to go about this and what type of alt text you want to write. So the same image can have separate purposes and be used in a lot of different places on your website, and that alt text depends on how it’s used.

The first type of context is decorative images. On screen, the purpose of a decorative image is to embellish or dress up the page. Decorative images don’t add any content to the page themselves. If the image can be removed from the web page and the user can still comprehend the information on the page, then it’s most likely a decorative image. This could be because the information is provided elsewhere on the page or because that image is there purely for aesthetic purposes, dressing up the page, eye candy, something exciting to grab attention. Images that are purely decorative do not necessarily need alt text. The image element in HTML itself still does need an alt attribute, so the decorative images are then marked with an empty alt attribute. This effectively nulls that attribute, and so even having one space inside that attribute would count as content. If it’s completely empty, then that image is not announced to a screen reader and if the image is missing then nothing displays on the page.

On screen is a picture of a sunflower and next to it is a small snippet of HTML for the image element that has an alt text that is empty. There is no space between the quote marks of the alt attribute. It is completely empty. So if the image is purely decorative, then the alt text is not needed. The image will be skipped over by screen readers. If the image is missing, it won’t show up on the page. So this has no alt text, it says it’s purely decorative. A person that can visually see the screen would maybe say ‘oh that’s a lovely sunflower,’ and then anybody else who using screen readers or text is not going to have this image at all.

In informative images, on screen the purpose of an informative image is to convey information or visuals such as a photograph. The informative image may accompany text content on the page and give additional background or data about the information presented, or the image could be the information itself such as a showcase or gallery or a photo in a news story. The alt text of these types of images should describe what is in the image and what type of information the image is trying to convey, but it should not duplicate text that is already available on the page specifically if that text is directly accompanying the image.

On screen we have the same image of a sunflower that was used previously, and the alt text of this image is ‘a large sunflower sits in the center foreground with a sea of smaller sunflowers in the field behind it.’ If this image were included on a page about various types of flowers, then the purpose of this image is informational and describing the details of what is included in the photo is more effective. With this, it is not literally describing every element that is in the photograph. I could also say that this photograph has blue skies with fluffy white clouds, the sunflower has green stems and green leaves. That’s not necessarily the entire purpose of this image. The focus point in the image is the sunflower and that’s where you want to have that type of alt text describing that, not just the visual of the sunflower but why it’s there. So it’s more of the, not getting too overly into the weeds so to speak – pun intended – about the descriptive text.

Functional images – on screen the purpose of a functional image is to perform an action such as link to another page. So functional images do something. So the alt text of the image should then describe what the image is going to do rather than describe the details of the image. So website’s logo that usually sits in the header of the page will link back to the site’s homepage, and the alt text of that logo could be ‘website home’ instead of ‘brand logo.’ It is much more effective to state what that image is going to do. The link is more important than what the logo looks like. So these types of images are often used as links or buttons.

So again, using that same image of a sunflower as in previous slides, sunflower is on screen and next to it another snippet of HTML, but this time because the image is wrapped in a link that goes to a page called sunflowers, the alt text of the image then reads ‘read the article about sunflowers.’ So that is the function, that is the purpose of this image is to go to that article about sunflowers. But if the alt text here was the same as before about the large sunflower with the background of other flowers, that would describe the image but it doesn’t give a user enough context to what that image is.

Image captions – on screen captions are short pieces of text that can accompany images and are typically displayed on the screen. So captions are different from alt text because alt text is that attribute of the image element itself. Captions can either be a little paragraph below the image, could be a figcaption of the figure element. So the alt text might then state what is visible in the image, the literal details of the image, and then the caption would usually describe a note about the image or the concept behind it, maybe why that image was taken.

So many times if an image has a caption then it most likely is not decorative and will need alt text, but the alt text and the caption should not be redundant. The alt text is the literal description of the image and the caption is more about the image. Again that same sunflower picture, but the alt text here could be as it was before ‘a large sunflower sits in the center foreground with a sea of smaller sunflowers in the field behind it.’ If we were to use this on a page and we wanted to talk more about it, the caption could be ‘sunflowers are one of the flowers that are grown in the campus garden.’ So the caption explains more about what that image is trying to convey in an emotional or why we have this image rather than the literal description of that image.

Now this could be getting into some other things that could be tricky with captions and alt text. You might not need alt text if the caption is actually the literal description of the image, and this often happens with charts or tables where the caption will explain exactly what that image is and so alt text might not be needed in that type of situation.

Now infographics – infographics are charts, tables, or illustrations that present data or information in an easy to scan visual form. So again, visual form. Since infographics are by definition visual information, they can often be inaccessible. So there are a variety of options for providing alt text or alternative text for infographics. You can include the content of the infographic as text on the page, close to or near the image infographic. You could include the content of the infographic as the image’s alt text or include a link to content of the infographic as a separate page and then the link text would be the alt text. This might involve restructuring that infographic content to fit a more narrative form, but providing the alternative content is crucial for that infographic to be accessible to all users.

Now on screen is a very paired down example of an infographic that just says ‘infographics’ at the top with a couple figures and numbers. So this option here is going with a link to a page called infograph that would include all of the text and other content that is in the infographic, and then the alt text would be ‘read the full text content of this infographic.’ So this is still providing information that is critical to that infographic, because information is in that name as well. So if you can’t include the text content of that infographic in some way either on the page or in the alt text because it might be overly complicated or complex, then this is the next best option to link to a page with all of the content of the infographic.

On screen image blocks in WordPress. So I’m going to pull up some pages. Let’s visit a very fake University website used as a sample WordPress site and check out what we can accomplish with core image blocks. So I’m going to pull up some pages, we’re going to check out some images, we’re going to consider the alt text of those images, and also I’ll show you the editor interface of WordPress too and where you can put some of that alt text.

This is again a very fake University. On screen I have the homepage for a university that I completely made up called Emera Dayford University. We have a big cover image here that says ‘Cutting Edge Education.’ It has a blurb about the website and an apply button below it. This is the cover block in WordPress. There is an image behind that text but that image is purely decorative. This doesn’t need any alt text because the information that we want to prioritize for an end user is that title and the apply button. The image is just there to be aesthetically pleasing, it is purely decorative.

Below that is a promo banner. So we have an image on one side and accompanying it is text. It says ‘Our Mission and Values,’ there’s a blurb and a button that says ‘About Us.’ Now the image here is also not directly related to the accompanying text on the page. The purpose of this promo banner is to get a user to click the about us button, to get a user to visit another page to provide information. The image has a student sitting at a desk reading a book in front of their laptop. Now this is pretty and it’s a good image, but it doesn’t really – it’s not critical to the text content that is here. So this is complementing it, it is not informing, so it is another purely decorative image and does not need alt text.

Below that is a card deck for programs. There are three here – one for undergraduate education, one for graduate, and one for certificate programs. Each of the cards has a little image at the top of it, a brief very lorem ipsum educational-sounding sound bite, little text blurb, and then a link below it to the undergraduate, graduate, or certificate programs. Now with this, it is also not directly related to the content that is there. The main purpose here is to give a little blurb and then have the user click on one of the links to one of the programs. So the images here are also complementing that text but they’re not giving information themselves, that is not the primary purpose of the image. So these images also do not have alt text.

I’m going to go down to the next thing. Here is a gallery of images, says ‘Check out EDU in Action,’ and there are three images in a row. The first one has some students walking down the sidewalk, the one next to it has an audience going to a play – that is the stage there – and the other image has some players with lacrosse. The purpose of these photos is to kind of showcase various aspects of university life. The purpose of these images is to inform, it is to say ‘here’s what it’s like to go to this University.’ So these images here all require alt text with fairly effective descriptions so that a user without access to the image can still understand what information is being conveyed by these photos here in the gallery.

Closer to the bottom of the page, it is like a ‘visit us’ promo banner. The image here is functional. So the text here says ‘Come Visit Us’ with some contact information about the university, and the image has a map, like a road atlas map, with a little tiny car figure sitting on top of it. So it is just mostly a very cute image but it’s functional. This will link to Google Maps so that you could get directions for going to the university. So because the image is linking to something that is directly related to the ‘come visit us,’ the alt text here would then be the link to Google Maps to get directions. It would not literally describe what is in the image itself.

So with that I also want to show what this page looks like when the images are turned off. Now we still have the content that is available. So in the top here with the cover block that was a purely decorative image, if we remove it we can still understand everything that this hero is trying to convey. It is more of the little blurb about the university and a link to apply. The image was just pretty. We can take that image away and everything about the hero banner is completely still understandable.

The same with the promo banners that are across the page and the program cards – the images are taken away but we still have all of that information. The main focus here was to go to the about us page with that link, and in the programs it’s the same cards as before but those images are missing and we still understand that these are links that we can go to to find out information about undergraduate, graduate, or certificate programs. The images just were there for show. We can take them away, we still understand everything that’s going on here.

Going down to the bottom of the page where we had that gallery of three images, because those were informational, trying to show what those aspects of university life are, they have alt text and the descriptions here. The alt text will show on the screen because we’re not showing the images so we can still understand the purpose of these images. We want to check out EDU in action so here are some things: ‘Five diverse students walk along an off-campus downtown sidewalk,’ ‘Students perform on stage for a theater production bathed in blue light signifying nighttime in front of a crowded audience,’ and ‘Two women’s lacrosse teams compete during playoffs playing on the field while the goalie blocks the net.’ These are more informative and these are more descriptive alt text because we’re trying to like – these are our great photos and these are the great things that happen on campus.

Below that in that ‘come visit us’ banner where the picture of the road atlas was before, now we still have the link there to go to Google Maps but the alt text that was ‘get directions at Google Maps’ is what shows up on screen instead of the image. A screen reader would go through this as well and that alt text would be read as the link as the text of the link, so a user will understand that that is the purpose of this image. It is not to give all of the details of the image itself.

For an about us page, it’s the same type of cover block at the top of the page because the information here that we’re trying to convey is ‘about us’ which is the page title. The image behind it, which is a dome on top of a building, that isn’t critical to understanding that this is the about page. It is just something for decoration that does not need alt text.

Below that there is another promo banner like we had on other pages, but this one’s a bit different because the text here is ‘President’s Message: A Tradition of Scholarly Pursuits’ with a blurb underneath that would be the president’s message. Because that is the content here and that’s what we’re trying to convey – a message from the president – the photo accompanying it is a photo of the University president. So that is directly related to the text there and would need alt text. And this alt text would be the name of the University president. It doesn’t need to go into too much detail about the literal aspects of the photo, but it still needs to say this is the University president and here is that text blurb next to it.

So these are directly related. This type of image is often used, at least on University websites, sometimes for leadership, list of faculty. In corporate websites, it might show the C-Suite level organizational chart, it might show people in different departments. So these type of images are informative because you might be linking to somebody’s profile, but that is the purpose. So you would have the name of the person.

Instead for this page if we take out the images at the top again, the image of but in the cover block is not there and we completely still understand that this is the about us page – ‘about us’ the title of the page. Taking away the image did not take away anything from that block. Below that, in the promo banner where we had the image of the president, the image is no longer there but the alt text of the image ‘University president Jane Doe’ and then the text accompanying it is that President’s message.

For a news article, we have a featured image at the top. This image on screen is a student going through the bookshelves here. Because the image here is directly related to the news article, it also needs alt text. There is also lower down another in-post image that’s accompanying it and complements the news article. So it is also directly related and this image also has alt text. It also has a caption. So the alt text is different than the caption – the image alt text describes what is in that image and then the caption describes what the image represents.

On this page without images, we still have at the top where that featured image was, it says ‘a student browses the book stacks of the University Library.’ So we understand that this article, probably about the library, has these images here. The one, the in-post image below that is missing, the alt text ‘students sit at rows of tables in a large Cathedral style room in the library, the room is flanked by tall bookshelves’ – that describes what is in the image. And then the caption ‘during student week, students gather in the Jones Memorial room at the University Library studying for their exams or writing their thesis.’ So that is connected not only to the image but what is in the article. So that describes what that image represents.

On screen now is an image in the WordPress admin media library. When an image is uploaded to the WordPress media library, you can edit the image properties in there such as the alt text and the caption. On screen here I have an image of a walkway on campus that has trees on either side and banners hanging from the light post. The alt text here is ‘a tree-lined walkway adorned with University banners and directional signs leads to the main campus lawn.’ That is alt text that you can enter when you upload an image to the WordPress media library. That would be the default alt text whenever you would then include that image on a page or in a post. You can also include a default caption here. For my purposes most of these are credits to Unsplash pages where the images came from, so I include those in the caption. So there’s the default caption as well as default alt text when you upload an image to the WordPress media library.

So this image of the walkway and the trees is used several times across the website. One of those is on the homepage. So on screen now is the edit page screen where you can add the block. So this is a cover block, and because this image is purely decorative, it is in the background. We set that as the background of the cover block, but what we do here because it’s purely decorative is clear out that alt text. WordPress even says below ‘leave empty if decorative’ so that’s really helpful for things like cover blocks because for the most part those are going to be decorative. It’s going to be something interesting to look at but if you remove it, there is no effect of understanding the content of the page.

That same image is used in one of the news articles, and because this is related to content that is on that news article page, alt text is required for that image. So there we have the default alt text that was entered when we uploaded that image to the WordPress media library. There’s no need to update it here unless that image is being used in a different way. If you go back to the media library for this image and update the alt text, it won’t update it on a page you’ve used it but it will update the default for any future time that you insert that onto a page.

I have some notes and references here. Information on the Success Criterion 1.1.1 for non-text content on web pages. Section 508 website has some really good information on writing good alt text. So does WebAIM – that’s Web Accessibility in Mind. They have a lot of really good content about images, alt text, and other types of accessibility. I also put some of the image credits where I got these images.

And I want to say thank you for letting me go on about alt text. I find this a very fascinating topic and I love talking about it with people. If you need assistance let me know. I get a lot of practice with this not just in my job as a – well now director, a web developer – but also because my wife’s a photographer so I help her a lot writing alt text for her website. So again, thank you. I guess we’ll have questions now. I will stop sharing. If you want to see something, I can get these – the link to these slides and the very fake University website out to anybody who wants them.

Thank you so much Reed, this was very enlightening and informative and it was wonderful seeing all of this represented visually because it’s really hard to wrap your mind around it when you’re just staring into the abyss that is the media library and trying to figure out what do I do next. This was this was perfect. I loved every minute of this. Thank you so much.

No, I’m glad yeah.

[Music]