Tips
action design tips

403 Forbidden & Alt Text

I have a habit of breaking WordPress websites and putting them back together again. I’ve done so at work a few times and with this particular site.

When I say “break,” it’s not that I’m trying to make them completely inoperable. What I’m attempting to do is make them more efficiently operable, usually by combining two separate sites.

A little over a year ago, when the pandemic first hit, I didn’t have the energy to keep two personal blogs operational, so I decided to roll “The Pragmatic Historian” into this site.

WordPress makes some of this easy. You merely export a file of the blog content you want to combine into another one, open the dashboard of the other blog and import the file. The content will mostly be there, but there will be problems.

For one, when I uploaded posts from The Pragmatic Historian to this site, none of the photos loaded properly into WordPress. I had to monkey around to figure out how to get them back into my Media Library. If I remember correctly, I needed to install a plugin to do so, but I can’t recall the name of the plugin. I also needed to relink the photos to each blog post, which I discuss in this post from April 4, 2020 (Website Work Continues).

I never quite got around to finishing this relinking process, which came back to bite me recently.

At work, I use a plugin that checks for broken links in our website. Search engines don’t like broken links and if you have too many in your website, your site will end up ranked lower in search results.

When I combined several sites into one at work, the broken link checker I used helped me find where links had broken internally (we reference other pages on our website often and had linked to items between our different websites) and externally (links we referred to outside our own site).

When I first ran the broken link checker (literally called Broken Link Checker[https://wordpress.org/plugins/broken-link-checker/]), it returned hundreds of broken links (like 700-800). It was a tedious job to get them all relinked, but when facing a challenge like this, I get determined and I plowed through the task in a few days.

I like the Broken Link Checker plugin so much that I decided to install it on this website a few weeks ago. Once again, I discovered hundreds of broken links, most of them caused by rolling in the content from The Pragmatic Historian.

Some were garden variety links to content outside this blog. When someone tells you nothing ever disappears on the internet, don’t believe them. Content disappears all the time because organizations/people move or remove it. Links to newspaper stories are especially prone to vanishing, as my Broken Link Checker indicates. The great thing about the Broken Link Checker plugin is that it will sometimes provide you with an archived link that you can use for relinking a broken link, but it won’t usually provide this for newspaper items.

The vast majority of my broken links were 403 Forbidden errors, which were caused by photos. Strangely, when I was logged in to WordPress and looking at a post that had a 403 Forbidden error, the photos still appeared in the post. I could not understand what was causing the error and I had a great swear-fest one day looking for and not finding a solution online.

I finally decided to look at my website through my phone while not logged in. That’s when I could see that the photos referred to by the 403 Forbidden errors were not appearing. They only appeared for me when I was logged in. I had to fix the issue by going to each post with an error, deleting each photo, and adding it again from the Media Library. (I did not find this solution when looking for it online, so if you’ve got a problem with photos not appearing on your WordPress site, try this.)

I also discovered that these “broken” photos no longer had captions or alt-text.

If you aren’t familiar with alt-text, this is text that would appear in place of a broken photo on old HTML websites. Internet speeds used to be much slower and not all photos would load, so the alt-text would load first and you could read a description of the image, so long as someone had entered alt-text and had done a good job with the description. That alt-text served another important function. It helped, and still helps, people who have vision or other accessibility issues to understand the full content of a web page.

I have had extreme nearsightedness since I was in third grade and the older I get, the more I become concerned about losing even more of my vision. Alt-text and other computer accessibility features are on my radar now more than ever.

When doing website work, I always fill in the alt-text for images that aren’t purely decorative, normally by copying and pasting the caption text into the alt-text box.

After reading a Twitter thread by Dr. Amy Kavanagh @BlondeHistorian about the importance of alt-text for blind people [https://twitter.com/BlondeHistorian/status/1422285788725878793]** and how to make this text more accessible, I realized I could do a better job of describing my images. I can continue to copy/paste my caption text into my alt-text box, but I need to write captions that are more descriptive, like the one below an image of Dr. Kavanagh’s tweet.

Tweet by Dr. Amy Kavanagh @BlondeHistorian: "I’m just a blind girl, standing in front of tech twitter, asking you to describe images. That’s it. No demands, nothing unreasonable, just a request to tell us blind folks what is in your pictures so we can enjoy them too. (I’ll even show you how to do it Down pointing backhand index)," August 2, 2021.
Tweet by Dr. Amy Kavanagh @BlondeHistorian: “I’m just a blind girl, standing in front of tech twitter, asking you to describe images.
That’s it.
No demands, nothing unreasonable, just a request to tell us blind folks what is in your pictures so we can enjoy them too.
(I’ll even show you how to do it Down pointing backhand index),” August 2, 2021.

As I was working through my hundreds of 403 Forbidden errors, relinking my photos and adding captions and alt-text, I tried to add a bit more description to some of them. Certainly not perfect, but I was also trying to get them all relinked in a reasonable amount of time and not belabor the process.

As I move forward with adding posts to my blog, I’m going to follow Dr. Kavanagh’s basic tips for alt-text, which she summed up in one of the tweets in her thread [https://twitter.com/BlondeHistorian/status/1422287809524678663].

Tweet by Dr. Amy Kavanagh @BlondeHistorian: "My top tips. 1. If there is text, include it. 2. What stands out to you in the image? A red coat? A skyscraper? A dog? Describe it! 3. Think about context. If it’s a fashion picture tell me about the clothes. If it’s a group photo I don’t need every outfit described." August 2, 2021.
Tweet by Dr. Amy Kavanagh @BlondeHistorian: “My top tips.
1. If there is text, include it.
2. What stands out to you in the image? A red coat? A skyscraper? A dog? Describe it!
3. Think about context. If it’s a fashion picture tell me about the clothes. If it’s a group photo I don’t need every outfit described.” August 2, 2021.

With a little extra time and thought, we can make our websites more accessible for everyone.


**I am entering the link text for Dr. Amy Kavanagh’s tweets into this post because Twitter links break when people delete their tweets. Alas, someday in the future, my Broken Link Checker may flag these links.

Thoughtful comments welcome.