U4-3691 - Editing alt attributes on images in the RTE

Created by Morten Bock 25 Nov 2013, 09:28:08 Updated by Sebastiaan Janssen 05 Jun 2015, 16:28:23

Is duplicated by: U4-2716

Is duplicated by: U4-4677

After inserting an image in the RTE, the output is the following:

Some description

Two issues with this:

  1. The alt attribute is defaulted to "Some description"
  2. I cannot edit that alt attribute without going to source/html mode

Comments

Dan White 16 Jan 2014, 23:28:52

This is a big one for some sites's SEO and Accessibility requirements.

There also needs to be the ability to adjust the dimensions by entering exact pixels instead of just dragging.

It'd also be nice to have the "Maximum default size of inserted images" option back for the RTE.


Asbjørn Riis-Knudsen 06 Feb 2014, 17:08:06

How did v7 even get released with an RTE that produces an alt attribute of "Some description" with no visible means to change it? This is in clear violation of standards - and very user-unfriendly. This needs a fix. It's bad enough that the RTE doesn't support editing an image once you have inserted it.


Asbjørn Riis-Knudsen 25 Feb 2014, 14:59:49

I have created a pull request to at least use the name of the image rather than "Some description" as the alt value (https://github.com/umbraco/Umbraco-CMS/pull/303). This is really just a quick workaround, as the real solution would be to add a field to RTE media picker to enter the alt attribute - and allow you to select the image and edit the alt attribute. Hopefully that can be added later.


Anders Brohäll 25 Feb 2014, 15:17:54

I like the initiative with the pull request, but its way better to leave it empty by default rather than something uncontrolled.


Asbjørn Riis-Knudsen 25 Feb 2014, 18:36:19

On further consideration, I second Ander's suggestion to just use an empty value. New pull reqeust (and old one cancelled): https://github.com/umbraco/Umbraco-CMS/pull/305


Anders Brohäll 25 Feb 2014, 18:46:18

@Asbjørn.Riis-Knudsen

: )

However, i'm not sure about populating the alt-attribute from the RTE at all. Im thinking that those kind of properties should be considered bound to the Media rather than the presentation. ... having it in the core Image-mediaType would be nice if someone finds out how to make it sync w/ Languages.

Umbraco could make a huge leap for accessibility if it's integrated in the core in a nice manner.


Asbjørn Riis-Knudsen 26 Feb 2014, 12:47:48

@Anders While I do think that Umbraco needs a lot better handling of alt attributes - and image captions in general, I don't think that tying them to the media item is necessarily a good idea. It seems nice and simple at first, sure, but what happens when I have the same image, but I want to use it in two different places with different captions? With these attributes on the media item, I would have to upload it twice. I think you should be able to specify caption and alt attribute in the media picker, because that is where it makes sense to set these properties - and the RTE should support the HTML5

element, so we can create proper image captions (which is currently a major pain!). But for right now, we just need to get rid of "Some description" for 7.0.4. Adding the above suggestions to 7.1 would be very nice, though.


Anders Brohäll 26 Feb 2014, 13:00:28

@Asbjørn.Riis-Knudsen Aah, a common missunderstanding. The alt-text isn't a contextual description of the image, it is an alterative visual description. Thus, it shouln't ever be 'Hubby is happy in Williamsburg', but rather 'A dog playing with a ball on a basketball field in the suburbs of a great city skyline'.

IE: http://en.wikipedia.org/wiki/Alt_attribute

Changing a alt-text per context would be like changing the base-64 or the binary code for the image.

But I do agree, lets get rid of it to start with! : )


Asbjørn Riis-Knudsen 26 Feb 2014, 13:05:08

@Anders Yes, the alt attribute would work better on the media type, but not a caption to be displayed under the image. I guess I wasn't quite clear about the distinction in my previous comment.


Anders Brohäll 26 Feb 2014, 15:20:29

Then we're both agreed : )


Dan White 26 Feb 2014, 18:38:39

@Anders I agree with you for the most part. However, there are some cases where you would want to change the alt text based on context for accessibility purposes. When you're using the alt attribute as the hyperlink text for example. http://webaim.org/techniques/alttext/

I'd like to see the option in the RTE with a fallback to a media description. So 9 times out of 10 it'd use the non-contextual description on the media, but the option would still be available to editors to override it.


Anders Brohäll 27 Feb 2014, 08:11:55

Fair enough : )


Asbjørn Riis-Knudsen 02 Mar 2014, 19:44:07

This is also affecting 7.1. Can we please at least remove "Some description" before release?


Asbjørn Riis-Knudsen 07 Mar 2014, 21:26:54

A pull request for 7.1: https://github.com/umbraco/Umbraco-CMS/pull/311


Asbjørn Riis-Knudsen 09 Mar 2014, 11:20:24

Should a follow-up issue be filed for the ability to edit the alt attribute? Or should this issue be reopened to address that at a later date?


Per Ploug 09 Mar 2014, 23:11:50

No need to post a follow-up issue, I've pushed a fix for this, so when you select an image in the media picker, it will display a details view where you can edit the alt text, also works selecting an image in the RTE which will then resume editing the selected image.

Will be in 7.1 final


Asbjørn Riis-Knudsen 10 Mar 2014, 07:55:54

Wow, that was fast - thanks!


Anders Brohäll 16 Apr 2014, 07:49:11

Can't get the Details view mentioned above by @Per.Ploug working. How am i supposed to open it?


Anders Brohäll 16 Apr 2014, 07:54:27

... or do you mean the Insert Media dialog? ... meaning that you can't edit the Alt after the media is inserted?

Also, the default text in that dialog is the file name? Why?


Sebastiaan Janssen 21 Apr 2014, 10:48:55

@anders Click the image that has previously been inserted in the RTE and then click the media picker icon. This allows you to change the alt text. The default text is a convenience, if you give the image a descriptive name before uploading it then there's very little editing to do when inserting it in the RTE.


Jan Skovgaard 21 Apr 2014, 19:42:35

@sebastiaan Pleaaase don't do that! If nothing is entered as alt attribute text nothing should be rendered. If the image name is "Large-logo-photo-300x500.png" that makes no sense in any context. There is a requirement that images should have an alt attribute but if the image alternative description makes no sense then it's better to just have alt="" rather than alt="Large-logo-photo-300x500.png", which is just a waste of time to have screen-readers read loud to the user.

If an image is only used for a decorative purpose, which is not important to the context of the rest of the content on the page then the alt="" attribute should just be empty. It needs to be there but it must be empty.

Unfortunately it's a common and big misconception that the alt text should just have a random text then. It actually creates more annoyance towards users and it is something that accessibility consultants mentions every time they see stuff like that.

Sorry if I'm misreading your above comment but if what the function does is simply to insert he image name as an alt text by default then that should not be done really :)

Cheers


Sebastiaan Janssen 22 Apr 2014, 05:48:44

@JanSkovgaard Okay, good point! Create a new issue for this please? :)


Jan Skovgaard 22 Apr 2014, 06:51:55

@sebastiaan Sure you find it here http://issues.umbraco.org/issue/U4-4734


Priority: Major

Type: Bug

State: Fixed

Assignee:

Difficulty: Normal

Category: Editor

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.0.0, 7.1.0, 7.0.1, 7.0.2, 7.0.3, 7.0.4

Due in version: 7.1.0

Sprint:

Story Points:

Cycle: