Learning something new I want to share

Since I used Microsoft’s Co-pilot to make TSB’s logo, I knew i needed alt text.

So, I decided to use the description tht picture smart gave me when I took the 4 photos to decide which one to use and then to ask how to size it up. Unfortunately, I ended up with a problem and I thought I’d share how I solved it.

First, I wanted to find out why the alt text was just ending after a certain point. According to research, the alt attribute is only about 150 characters long. So on EMHS’s page, it currently says for the alt text

The Security Box logo. The image depicts a cube-shaped security box on a red surface. The box is predominantly red with black accents and features a combination lock on its front. The text

As you can tell in that quoted section, that just doesn’t work for those who can’t see, as it isn’t complete.

Here’s what that code looks like.

img src=”TSB_logo.jpg” width=”800″ height=”800″ alt=”The Security Box logo. The Security Box logo. The image depicts a cube-shaped security box on a red surface. The box is predominantly red with black accents and features a combination lock on its front. The text”

To get it to display, I’ve left out some code, but its pretty much correct with the correct less than and greater than signs in place.

As you can see I did it correctly, and had no idea that this was an issue until I searched for the length of alt text, otherwise known as alternitive text.

So what did you learn?

I went searching for how to go ahead and have a caption to the image like we’ve seen in many articles. Since Tables have them so they’re not numbered, I thought this should be a simple fix.

I was right.

I recently learned about a new HTML code called figcaption (figure caption) which works like the title tag for titling tables and other things. So I decided to put the new code in place with the full description from Jaws Picture smart so that everyone regardless of whether they have images on or off can know what the intent is.

As we know, alternitive text can be shown by hovering the mouse over the picture, or read by a screen reader.

I assume the caption is below the picture in plain text.

center img src=”TSB_logo.jpg” width=”800″ height=”800″ alt=”The Security Box logo.” figcaption The image shows a red and black cube-shaped security box with a combination lock on the front. The top of the box features the text “The Security Box.” The design is sleek and modern, with metallic edges and visible screws. The combination dial is prominently displayed, indicating security features. The background is a solid red, complementing the design of the box. /figcaption /center

Again, so the code shows, I’ve removed less than and greater than signs, but the code I’m presenting works. Tried to put it within code tags but it isn’t showing like I thought code should work where it would ignore phraises within it.

Here is what that looks like.

Let me know what you think. Does this work for everyone and is it a practice to do it this way to describe images like this?