Alt text for images (website accessibility)

This is a little technical, but I thought I’d ask it publicly anyway. Images used to upload with an HTML tag visible that allowed me to edit it and add in alt text. (For those unfamiliar, alt text is hidden text added to images on web sites and elsewehre that provide a short description for people with visual impairments who may not be able to see the image well or at all.) I’m visually impaired and use a screen reader, so accessibility is really important, and since things like CGM graphs are often discussed, it’s great when such things are described to someone who uses a screen reader.

A while ago, the HTML code disappeared when uploading images and has been replaced with a code such as (for example) ![IMG_0170|672x500](upload://A37uZGc181qH6BXQJjl8ecxu5Oe.PNG)

Is there a way to modify this code to add alt text to an image?

Also, it would be GREAT if an (obvious) alt text box could be added to the image upload area to encourage sighted people to add descriptions to their images. With Twitter, Facebook, and others adding such features, I can only imagine it would be a good feature for Discourse overall.

4 Likes

Does @tgx or @system monitor the site? And if so, would this be an appropriate question to raise in terms of website accessibility as discussed in the OP?

2 Likes

I notice my mentions:)

You can just change the IMG part to amend the alt text

3 Likes

@Jen – Will @system’s fix work for you? @Mila, @Lorraine

1 Like

Yes, that’ll work for me. Thanks, @system!

It would still be great if, in future, a feature could be added so that anyone could easily add an alt text description when uploading an image.

2 Likes

Because, like you said, it’s something everyone should try to do, not just people who are keenly aware of the need because of their own sight deficits, and if it requires editing the html, it ain’t gonna happen.

I rarely upload images here, but when I do I usually use an outside image hosting svc because I find the built-in feature just gives me a spinning pizza wheel and never completes. Be nice if one of those had an “enter alt tag” feature–postimg.org, the one I usually use, does not, though as @system says, you can add one to the embed code… if you remember! Which I will try to do henceforth.

2 Likes

I’d like to learn how to do what @Jen and @system describe. Here’s the html code for a screenshot I took of part of this thread. What do I have to add and where?

00%20AM

I’m not fully understanding Jen’s question and Sam’s answer, but I’d like to alter the images I upload to help make TuD more visually accessible.

This edit added at @Tim35’s request.

1 Like

Wow - what a team! I am not equipped to answer this question and am glad for those who have been. Following along to learn something new.

The Real Grumpy Cat

Trying to post my link but it keeps just turning into the pic. Terry, how did you post the link without it turning into the pic?

Anyway, with the picture which I just posted, I overwrote the first portion with my title for the image. So Terry, in your link where you have “[23%20AM|690x375]”, you could replace that (I think) with: “[Trees in Foliage]” or whatever. No quotes (obviously?).

EDIT 1: I am not sure if you can see my “title” of my picture of if only Jen can see it when the assistive option (not sure exactly what she uses) is enabled? But I assume if I edit my post 5 minutes after posting then you can look at all the differences so hopefully can then see exactly what I posted? (Waiting for the six minutes…) lol

EDIT 2: Ok - Now you should be able to see exactly how I posted. If you look at the changes (ie - pencil icon on the top of my post) and then choose the RAW option, you can see the hyperlink and see where I put the title of the picture.

EDIT 3: OMG - I got the title wrong. Very sorry Mr. Cat. Error fixed.

EDIT 4: @Jen - how does this work and does the title of the image properly show up for you?

EDIT 5: The link changes:

image

@Lorraine
I saw an old discussion Sam was having on the main discourse discussion forums and figured we could jump straight to the expert for this.
It was nice he jumped right in to assist !!! For somebody not familiar, it would be extremely confusing and probably quite difficult to explain. Obviously with Sam, no explanation was required.

:slight_smile:

1 Like

I copied an image and then uploaded it to the edit window. I then did a screenshot of a html portion of the edit window and uploaded it.

Terry, can you throw an edit onto that post? Then I can easily see the details of the post.

Done.

Got it. Your description makes sense. lol. Nice work around for the picture of the link.

In terms of adding the title to a picture image, does my post show that as well for you? (Assuming Jen verifies it as actually working for the intended purpose.)

No, I don’t see a picture text title when I click on the orange edit pencil icon in your comment.

Did you choose the RAW option when viewing the differences?

I am going to use your picture of the link technique to add the pics of the original and revised link into my post.

OK. When I selected raw, here is what I see:

There was more text in the window. I truncated it. The contrast is horrible.

I tried uploading a picture and then over-writing the text between the brackets [ xxx ] with a caption for the photo. Do I have to edit the comment and then select raw? Is that what @Jen would have to do to see a description of the photo?

@Terry4
No - the “raw” was only so you could see the details of what I posted. Just for this back-and-forth conversation.

When you upload a picture, you can just (at that moment) overwrite the beginning part of the html string.

@Jen will have to let us know if this allows her to see the textual description of the image or if it does not work properly with her configuration.

1 Like

Yes, your first picture sais, “Graphic, clickable, the real grumpy cat” and your second one just says, “Graphic, clickable, image” with no description.

I use both NVDA (Windows) and VoiceOver (iOS) to navigate these sites.