Ticket #12322 (closed Bug: fixed)

Opened 2 years ago

Last modified 11 months ago

For existing images, alt attributes added to img tags by TinyMCE contain short name, should be description.

Reported by: jdeluca Owned by: dkozar
Priority: minor Milestone: 4.x
Component: Visual Editor Version: 4.1
Keywords: accessibility, konferenz Cc: esteele, jeb6

Description

Plone 4.1 / Products.TinyMCE 1.2.7

When inserting images through TinyMCE, alt and title attributes are not being added to the img tag.

Change History

comment:1 Changed 2 years ago by kleist

This is odd indeed, since  http://dev.plone.org/browser/collective/Products.TinyMCE/trunk/Products/TinyMCE/utility.py#L467 seems correct ("alt" is explicitly listed, "title" is in COMMON_ATTRS).

Obviously Plone mangles the output somehow. Have you verified your settings on the "Attributes" tab on @@filter-controlpanel ?

comment:2 Changed 2 years ago by kleist

I have verified (4.2 coredev buildout) that "alt" and "title" attributes I enter in TinyMCE, using the HTML view, are preserved.

But you probably mean that those attributes should be added automatically? I'm not that familiar with TinyMCE. Would it be possible for Plone to configure that?

If those attributes are not mandatory, which I don't think they are, this ticket would rather be an enhancement request.

comment:3 Changed 2 years ago by kleist

  • Priority changed from major to minor
  • Milestone set to 4.x

comment:4 Changed 2 years ago by jdeluca

I just tested again with the new version of TinyMCE (1.2.9) and when I insert an image, the alt is not added to the tag. For accessibility, alt is absolutely required. It has nothing to do with my settings the @@filter-controlpanel.

Here's the tag that's generated (which is an accessibility fail):

<img src="lizard.jpg/image_preview" class="image-left">

Here's what it should be (alt text taken from the image object description):

<img src="lizard.jpg/image_preview" class="image-left" alt="A lizard sitting on a log">

I checked a site running Plone 4.0.7 and TinyMCE 1.1.10 and it worked fine. I installed TinyMCE 1.1.10 in my Plone 4.1 site, but the problem persists.

I like TinyMCE, but this issue forces me to use kupu. Otherwise, every image we insert via the editor would cause an accessibility error.

comment:5 Changed 2 years ago by dkozar

Code for computing alt/title is located at  https://github.com/plone/plone.outputfilters/blob/master/plone/outputfilters/filters/resolveuid_and_caption.py#L327 and it works only with UID resolving in tinymce. In future, tinymce will work exclusively with UID internally, but this should be fixed for the time being.

comment:6 Changed 2 years ago by rmattb

  • Keywords accessibility added

comment:7 Changed 2 years ago by rmattb

  • Version set to 4.1
  • severity set to Untriaged

This is still an issue with Plone 4.1.3, which includes Products.TinyMCE-1.2.9:

  • Download & install Plone-4.1.3-UnifiedInstaller standalone
  • New site
  • Edit
  • Image button on toolbar
  • Upload file button
  • Browse button, choose image from local machine
  • Enter title text
  • Enter description text
  • Upload
  • Insert
  • Save

The rendered HTML should have an alt attribute on the image, but doesn't. This bug makes it impossible to comply with the one of the most basic and important parts of the claim at /accessibility-info with the current implementation of the TinyMCE WYSIWYG editor. IMHO this is a major bug.

comment:8 Changed 2 years ago by eleddy

  • Priority changed from minor to major
  • Cc esteele added
  • severity changed from Untriaged to Normal
  • Keywords accessibility, konferenz added; accessibility removed

comment:9 Changed 2 years ago by dkozar

  • Owner changed from robgietema to dkozar

comment:10 Changed 2 years ago by dkozar

  • Status changed from new to closed
  • Resolution set to fixed

comment:11 follow-up: ↓ 12 Changed 2 years ago by jeb6

  • Status changed from closed to confirmed

I am seeing this bug in Plone 4.1.2 and 4.1.4. Here is what I see:

We migrated our site from Plone 2.5.3 to Plone 4. We are currently at Plone 4.1.2 on the live site. We are using TinyMCE for the editor. The problem is Plone 4.1.2 is substituting the file name for the alt and the title attributes in the image tag. On the old Plone 2.5.3 site, it is displaying the description correctly in the alt attribute.

I just installed the latest version, 4.1.4, on a test site and the problem is different. If you look at the image itself, the title and alt attributes show the description. If you insert the image into a page using TinyMCE, neither the alt nor the title attributes are present in the image tag.

To replicate this problem:

  1. Upload an image into Plone.
  2. Add the description.
  3. Add a page to Plone
  4. Using TinyMCE, insert the image into the page.
  5. Check the code(I used Firebug)
  6. In Plone 4.1.2, you will see the file name in the alt attribute. In Plone 4.1.4, the alt attribute will not appear at all.

We consider this a major accessibility issue.

comment:12 in reply to: ↑ 11 Changed 2 years ago by eleddy

  • Status changed from confirmed to closed

Replying to jeb6:

I am seeing this bug in Plone 4.1.2 and 4.1.4. Here is what I see:

We migrated our site from Plone 2.5.3 to Plone 4. We are currently at Plone 4.1.2 on the live site. We are using TinyMCE for the editor. The problem is Plone 4.1.2 is substituting the file name for the alt and the title attributes in the image tag. On the old Plone 2.5.3 site, it is displaying the description correctly in the alt attribute.

I just installed the latest version, 4.1.4, on a test site and the problem is different. If you look at the image itself, the title and alt attributes show the description. If you insert the image into a page using TinyMCE, neither the alt nor the title attributes are present in the image tag.

To replicate this problem:

  1. Upload an image into Plone.
  2. Add the description.
  3. Add a page to Plone
  4. Using TinyMCE, insert the image into the page.
  5. Check the code(I used Firebug)
  6. In Plone 4.1.2, you will see the file name in the alt attribute. In Plone 4.1.4, the alt attribute will not appear at all.

We consider this a major accessibility issue.

Neither of these versions are running with plone.outputfilters 1.2. Please pin to this version, or bump to 4.1.5 and reopen if the bug still exists.

Version 0, edited 2 years ago by eleddy (next)

comment:13 Changed 2 years ago by esteele

  • Status changed from closed to confirmed

plone.outputfilters 1.2 is included in Plone 4.1.5. As of the moment, the buildout version has been released ( http://dist.plone.org/release/4.1.5/versions.cfg), installers are in the works.

comment:14 Changed 2 years ago by esteele

  • Status changed from confirmed to closed

comment:15 Changed 2 years ago by jeb6

  • Status changed from closed to confirmed

I tried pinning plone.outputfilters 1.2 in my [versions] section of buildout.cfg. Neither the alt attribute nor the title attribute shows up at all. I tried upgrading to Plone 4.1.5. No change. I was able to see the alt attribute with the description if I pin TinyMCE to 1.1.12. Title attribute does not show up.

Last edited 2 years ago by jeb6 (previous) (diff)

comment:16 Changed 2 years ago by jeb6

  • Cc jeb6 added

comment:17 Changed 23 months ago by rpruyne

this fix in 4.1.5 worked just fine for me.

what i did:

  1. downloaded 4.1.5 from  http://plone.org/products/plone/releases/4.1.5 and installed (there's an install bug; had to run buildout to complete the install)
  2. uploaded an image into Plone instance on 4.1.5 and added a description
  3. inserted the image into a page using tinyMCE
  4. checked image attributes with firebug and 'view image info' on firefox
  5. turned off all images in f.f. to see what that was like

title, not description, appears as alt text on hover and in 'view image info' in firefox. this is preferable since the title is a required field and so will always be populated.

the above is the case even if i manually put alt="some other description" into the html. so, customizing the alt text for hover and 'view image info' isn't possible since plone.outputfilters uses the title attribute. i guess this is acceptable?

i did notice, though, that when i disabled all images, my custom alt text appeared in place of the image's title. so that's good.

comment:18 follow-up: ↓ 19 Changed 23 months ago by rmattb

  • Status changed from confirmed to closed

comment:19 in reply to: ↑ 18 Changed 22 months ago by jeb6

  • Status changed from closed to reopened
  • Resolution fixed deleted

Replying to rmattb:We have seen this working correctly with new images in our production 4.1.4 site, and our development 4.1.5 site. However, images that were migrated over from our previous Plone site show the alt attribute displaying the short name. I have tried changing the image, re-saving the image and the page, changing the title in the image itself and the image description in the TinyMCE editor. It always displays the short name in the alt tag. This is a problem as we have several thousand images on our site.

comment:20 Changed 22 months ago by kleist

  • Priority changed from major to minor
  • Status changed from reopened to confirmed
  • Summary changed from Alt attributes not added to img tags by TinyMCE to For existing images, alt attributes added to img tags by TinyMCE contain short name, should be description.

comment:21 Changed 21 months ago by dkozar

@jeb6: if you can put together steps to reproduce the issue, I'm willing to help :)

comment:22 Changed 21 months ago by jeb6

Version Overview

Plone 4.1.6 (4115)

CMF 2.2.6

Zope 2.13.15

Python 2.6.5 (r265:79096, Mar 19 2010, 21:48:26) [MSC v.1500 32 bit (Intel)]

PIL 1.1.6

To replicate the problem, select a page with an image: Here is the image tag in Firebug: <img width="265" height="178" class="img_right" alt="Cedar3.jpg" title="Cedar3.jpg" src=" http://www.ed.psu.edu/vmold/cecprs/counselor-education/images/Cedar3.jpg">

In the image, both short name and title are Cedar3.jpg Changed the Plone title to Cedar Building

Refreshed the page in the anonymous view: The tag did not change in Firebug: <img width="265" height="178" class="img_right" alt="Cedar3.jpg" title="Cedar3.jpg" src=" http://www.ed.psu.edu/vmold/cecprs/counselor-education/images/Cedar3.jpg">

Opened the page in the editor in Plone and saved the page. No change to the tag in Firebug <img width="265" height="178" class="img_right" alt="Cedar3.jpg" title="Cedar3.jpg" src=" https://www.ed.psu.edu/vmold/cecprs/counselor-education/images/Cedar3.jpg">

Opened the page in the editor. Clicked the HTML button in TinyMCE. The image tag in the editor looks like this

<img alt="Cedar3.jpg" class="img_right" height="178" src="resolveuid/320de1a32f72c6d71bafc776bec35d3b" width="265" />

Clicked update. Saved the page. No change in the image tag:

<img width="265" height="178" class="img_right" alt="Cedar3.jpg" title="Cedar3.jpg" src=" https://www.ed.psu.edu/vmold/cecprs/counselor-education/images/Cedar3.jpg">

Opened the page in the editor. Clicked the HTML button in TinyMCE.

Removed the image tag. Updated the page. Re-added the image. Saved the page.

Refreshed the anonymous page. Image tag has changed somewhat in Firebug, but the alt attribute is still the short name as is the title attribute.

<img title="Cedar3.jpg" class="image-right" alt="Cedar3.jpg" src=" http://www.ed.psu.edu/vmold/cecprs/counselor-education/images/Cedar3.jpg">

Went to the editor and clicked HTML. The image tag is back and looks like this:

<img class="image-right" src="resolveuid/320de1a32f72c6d71bafc776bec35d3b" /> Apparently the attributes are being generated when the anonymous user opens the page. That's good, but it is getting the wrong values.

Sorry I didn't reply to this sooner. I am not getting CC'd on changes to this ticket. Anything you can suggest will be appreciated.

Thanks,

Joe Bigler

comment:23 Changed 21 months ago by jeb6

It appears that all the documents brought over from our Plone 2.5.3 migration to Plone 4 have alt attributes in their image tags. If I remove the alt attribute, Plone 4 generates the alt attribute with the Title field of the image as the value in the alt attribute when I open the page in the anonymous view. To test this, edit any page with an image. Go into the html and the img tag and hard code an alt attribute with any value in it. Save the page. In Firebug, in the anonymous view, the alt attribute shows up with the hard coded value, no matter what is in the Title field of the Plone image. If you remove the hard coded alt tag, save the page, and open it in the anonymous view, you will see the value from the Plone image Title field as the value in the alt attribute.

What I need to do is remove all the hard coded attributes from my image tags. Can anyone recommend something I could run against my content that would do this? I have done some searching and it looks like Beautiful Soup might do this, but I haven't tested it yet. Can anyone confirm this or recommend a different method?

I would also like to make a suggestion. While placing the value of the Title field into the alt attribute will make it pass some accessibility tests, I don't think it really makes it very accessible. For example, I have an image of one of the buildings that is called cedar3.jpg. The Title field is Cedar Building. While this will read "image of Cedar Building" to the user of a screen reader, that really doesn't mean much to them. I plan to put a longer description in the image field. Something like, "The Cedar Building, where many of the counselor education and pyschology courses are taught". This would be read as "Image of The Cedar Building, where many of the counselor education and psychology courses are taught". I would like to suggest that if there is a description in the description field, it is displayed as the alt attribute. If not, the Title field is used. Let me know what you think.

Joe Bigler

comment:24 Changed 20 months ago by jeb6

I just tested this again with Plone 4.1.6 with new images. If I add a new image to Plone, and then add it to a webpage, it is pulling the title and the alt attributes from the short name. If you look look at the html code in TinyMCE, neither attribute appears. Here is an example with Plone using the ResolveUID for the image. <img class="image-inline" src="resolveuid/4f5c9ef7639e412dad64e0c0992fa5b1" /> When I open the page in the browser, it creates a title and an alt attribute, but it fills them with the short name. It ignores the Title in the Plone Image. If I change the Title in the Plone Image, it still shows the short name. If anyone has a Plone 4.x site, is this working correctly for you or do you see something similar to what I am seeing?

comment:25 Changed 20 months ago by jeb6

I think I see what the problem is. We migrated our site from Plone 2.5.3 to Plone 4. Previously, we used FCKeditor. Now we use TinyMCE. The old site had the alt attribute hard coded into the image tag by FCKeditor. In the new site, the alt and the title attribute are also hard coded into the image tag. In the new site, changing the Plone Image Title, which is used to create both the alt and title attributes, has no effect if either the alt or the title attribute is hard coded into the image tag. I can modify them in TinyMCE in the HTML editor, but Plone will not override them with the values in the Plone Image Title. However, if I delete the alt and title attributes, Plone will recreate them when the page is opened in a browser. You can see them in firebug. They are not hard coded in the tag as if you go into TinyMCE and look at the HTML, they will not show up. It looks like what we will need to do is remove all the hard coded alt and title attributes from the pages and save them. This seems to solve the problem.

If we add new images, it works correctly. The alt and title attributes are not hard coded into the image tag, but appear when the page is opened in a browser.

Note, in order for this to work, we had to pin TinyMCE to version 1.1.12. This was recommended by Joe DeLuca(Thanks Joe!) and, if we delete the attributes carried over from the old site, it solves the problem. This is in Plone 4.1.4. It also works in Plone 4.1.6, if you pin TinyMCE to version 1.1.12. The problem is still there, but this workaround may help until it is fixed.

comment:26 Changed 11 months ago by rmattb

Hi Joe (B.),

As we prepare for the accessibility sprint, could you summarize if there is a remaining problem for stock Plone, and the details to reproduce that problem? (Sorry that will probably be repeating a previous comment, so feel free to copy & paste, but there are so many comments that I want to be sure we're looking at current outstanding issues.)

Thanks!!

Matt

comment:27 Changed 11 months ago by bslash

  • Status changed from confirmed to closed
  • Resolution set to fixed

Closing as this is fixed as of Plone 4.2. If you have an old upgraded site with hardcoded wrong values, a simple python script should take care of that, but that is not the responsibility of the a11y team.

Note: See TracTickets for help on using tickets.