Skip to Content

Why I’m adding Alt Text to my WordPress images (and why you should too).

Sharing is caring!

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.

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.

An open laptop with a blank computer screen sits on a white background with a mouse, cup of coffee, notepad and pen holder
Yield: 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
Total Time: 10 minutes
Difficulty: Intermediate

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

Materials

Instructions


First, go to your Media Library

A view inside of the Media Library with an arrow pointed at the Media option in the Main WordPress sidebar to the left

In the left WordPress Dashboard sidebar Select the Media text

How to Title your images

View of the image attachment details settings for an image in the WordPress Media Library. Arrows are pointing at the Alt Text field and Title Field


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!

Recommended Products

I'm not currently an affiliate of any program. My Recommended Products are just products I recommend and make no commissions on.

Did you find this tutorial helpful?

Please share if you think it may help anyone you know. Sharing is caring!

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
  • Create transcripts and captions for multimedia
  • Provide clear instructions
  • Keep content clear and concise
Back to school must do's to prepare for your kids remote learning.
← Previous
Set up a Child Workspace in Google Chrome
Next →
shares