Add option to override image alt during upload


(Joe) #1

Feature description:

Allow users to add optional image description in image upload modal then use that text in as the image alt attribute.


Why?

From MDN:

Browsers do not always display the image referenced by the element. This is the case for non-graphical browsers (including those used by people with vision impairments), if the user chooses not to display images, or if the browser cannot display the image because it is invalid or an unsupported type. In these cases, the browser may replace the image with the text defined in this element’s alt attribute. You should, for these reasons and others, provide a useful value for alt whenever possible.

From Moz:

Alt text is a tenet of accessible web design. Its original (and still primary) purpose is to describe images to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image. Including alt text with your images ensures all users, regardless of visual ability, can appreciate the content on your site.


Current image upload modal:

Basic mock up:

Capture2

and something similar for the “from the web” option.


Current behavior:

Discourse uses the file name as the alt for the image minus the file extension.

Example:

I upload a jpg image. The file name is 12.jpg

the cooked html for the image is:

<img src="[...]" alt="12" width="690" height="460">


Desired behavior:

The user adds an optional description in the image upload modal. The description is used to populate the alt attribute.

Example:

I upload a jpg image. The file name is 12.jpg

I fill up the optional description field.

the cooked html for the image is:

<img src="[...]" alt="living room" width="690" height="460">


Limitations:

  1. Not everyone is aware of the use of alt attributes, so the usage may not be very high
  2. “Drag and drop” images have a different flow and don’t require a modal.

(Erlend Sogge Heggen) #2

I’m certain this would be the main issue of such a feature. However, in a particular type of community where posters have an incentive to describe their images, like a photography community, this could catch on.

Shouldn’t be very hard to make a plugin for this.


(Jeff Atwood) #3

I think anyone who cares about this should edit it in…

That results in

![hulk-smash|690x301](upload://6FwRUHjJBASt7i8jLP7XDsVHixf.jpg)

Why can’t the user simply edit the part that says

hulk-smash

to say whatever they want, as that is the alt text?


(Jeff Atwood) #4

Here’s another demo for @sam. Note the alt text and filename are different.

this is random alt text

![this is random alt text|600x206](upload://qgZc8VuSy528JaEkKiGMASWRRJx.png)

Slightly different scenario, no lightbox because the image is small enough to fit in the post.


(Stephen Chung) #5

Is there a reason why making the file properly won’t solve the prob?


(Joe) #6

erm… well…:smile: I completely missed that one. Slightly less visual but works just as well.


Edit:

… and the reason I missed that @codinghorror is that I always upload multiple images - edge case here - at once and when I do that, this is what it looks like:

Maybe that’s just me but that looks intimidating. :zipper_mouth_face:

Multiple image uploads is also another limitation to add to the list.


If by that you mean rename the file, then yes it would fully solve the issue, but it won’t be very practical as that would require renaming the local file copy / or duplicating the file and giving it another name.

Apples to apples, adding 3 - 4 words in an empty input field is relatively simpler than renaming a local file.