How to add alt text to wordpress images

Jump to How-To

Over the past few years more focus has been placed on developers, designers and publishers to build their projects to be accessible to more people.

Like people who use assistive technology, people with color blindness, or people with slower broadband networks and older machines. Learn simple writing tips & how to add alt text to wordpress images to include more people with or without pictures in your online content.

While I have been a student of Web Development for years, and amped about building with an accessibility-first mindset, I have found actually implementing accessibility friendly practices difficult.

Developing with accessibility in mind is no easy task, there are literally hundreds of pages you can go through, on the Web Content Accessibility Guidelines website (commonly known as WCAG) to build and design an accessible website.

But while it’s a lot to learn, and though it feels daunting, I still cannot imagine allowing myself to take shortcuts if I have the power to include someone who otherwise would never be able to experience my site.

Luckily, because so many developers are passionate about this topic too, developing, designing, and maintaining an accessibility friendly websites is getting easier and easier.

How WordPress is becoming more Accessible

In their latest update, WordPress states that ‘every release adds improvements to the accessible publishing experience’, which is great news for assistive tech users who are also publishers. These updates make using the WordPress software less challenging for users with assistive devices.

One of the tools that has been around for a long time in WordPress are the Media Attribute tools in the Media Library. Using these tools appropriately can greatly increase the usability of your site for more people.

Why I’m adding Alt text and other image information to my images

I recently met someone online who uses assistive tech to utilize Twitter. I admit, I only dabbled in Alt text for images before I met them. But, one mention from them of not knowing what was in a retweet of an image, really brought into focus how difficult and lonely it must feel to be able to only experience parts of the conversation others are having.

It really framed for me how difficult context must be to come by, and how frustrating it might feel to rely on a close friend or family to help you.

For me it took personally seeing how accessibility issues effect others to enact a change in my behavior, but it really shouldn’t have.

I hope others can consider how their content might be excluding people from the conversation.

My hobby is writing tech support tutorials for ALL people. If I am excluding anyone from experiencing my tutorials I have betrayed the ultimate purpose of this blog already.

I rely heavily on images to direct users to the actions they need to take. But once I learned some basic Alt Text writing tips, I realized I could use the WordPress Media Attribute tools to include more people with or without pictures.

Better Websites for all

How you can get started using Alt Text, Image Title's and Image descriptions easily in your WordPress Media library.

Active Time: 5 minutes

Prep Time: 5 minutes

Additional Time: 1 minute

Total Time: 11 minutes

Difficulty: Intermediate

Start including more people by adding meaningful alternative text to your WordPress Media.

Materials

WordPress

Tools

Media Library Attachment Screen

Instructions

First, go to your Media Library

In the left WordPress Dashboard sidebar Select the Media text

How to Title your images

Go to the Title field
In the Title field enter a short descriptive title of the image. Something that conveys what it is and even how it is relevant to where it is being used.
Example: For an image meant to teach a user how to set up a child profile on their Amazon Tablet, I wrote the following title.
Title: Add A Child Profile Amazon Fire
The important image text reads Add A Child Profile and the device is an Amazon Fire

How to write Alt Text

In the Alt Text field, write a description of the image but make it meaningful to the user. Ensure that your description is focussed on the purpose of the image.
Example: Same as above.

Alt Text: View of the Profiles and Family Library menu with the 'Add a child profile' option highlighted

How to write a description

An image description should be used for a multi-sentence description of the image. In most cases, you will not need to write a description. The rule is to always use Alt Text or Descriptions when the image is relevant to the content. A description should also be well written and should provide a visually impaired user with a clear depiction of the contents of the image. The key is only to use the Description field when it matters.
Example: An art blog article is analyzing a painting, there is an image of the painting which they are discussing at length. A description should be provided.
Description: A painting of a large murder of crows ascending into a bright and muddled blue sky with a low gray-ish sun behind hay colored fields. The artist uses thick, deliberate strokes one after another to blend the colors into a slightly blurry and wondrous scene.

When to use the Alt text and when to use the Description

Alt text should be used when you are describing the purpose of the media and how it is relevant to where it is being used. Alt text is usually a short sentence or statement.
Whereas the Description should be used to enhance the understanding the user has of the media itself. A description is generally a long sentence or short paragraph.

Notes

The trick to using any new feature or product, is being patient. Being patient with computers, software, and yourself will make learning new tech skills, and saving time online easier. Plus it tends to stick better too. So, take your time, you got this!

More tips for making your site more Accessible

The WCAG Writing for Accessibility page walks you through some basic things to remember when publishing with accessibility in mind.

Provide informative, unique page titles
- Informative and specific page titles aren’t just good for accessibility, this is also the recommendation for improving your Search Engine Optimization (SEO) score.
Use headings to convey meaning and structure
- When you are writing a post, the largest heading should be at the top, and from there down each section of your post should have a heading that a user can easily find whether they are scrolling with their phone, or using assistive technology.
Make link text meaningful
- Instead of adding a title to your links attribute, it often makes more sense to tell the user where they will go when they click the link. For instance, this link will take you higher up on the page.
Create transcripts and captions for multimedia
Provide clear instructions
Keep content clear and concise