Change "Expand" alt text on cut tag icon to "Collapse"

[oyceter]

Title:
Change "Expand" alt text on cut tag icon to "Collapse"

Area:
accessibility, images

Summary:
Change the alt text on the right-pointing arrow on a cut tag from "Expand" to "Collapse" once the user has clicked on the tag or arrow and expanded the cut tag.

Description:
I browse the site with images off, and sometimes I get confused if I've expanded a cut tag or not because the alt text for the cut tag icon reads "Expand" no matter what state the cut tag is in. If the alt text is changed to "Collapse" when the cut tag is expanded, it will hopefully improve accessibility for people who browse the site without images.

Possible drawbacks: I'm not actually sure how this would work in a screenreader.

Poll #13125 Change "Expand" alt text on cut tag icon to "Collapse"

Open to: Registered Users, detailed results viewable to: All, participants: 55

View Respondents

This suggestion:

View Answers

Should be implemented as-is.
40 (72.7%)

Should be implemented with changes. (please comment)
1 (1.8%)

Shouldn't be implemented.
0 (0.0%)

(I have no opinion)
12 (21.8%)

(Other: please comment)
2 (3.6%)

Comments

[azurelunatic]

If it's not practical to get exactly this, then changing the alt text to "Expand/Collapse" might do.

[swaldman]

+1.

[montuos]

+1

[lightgetsin]

Huh. With a screenreader, the text does change to collapse after I've expanded a cut. Which makes me think that it's a bug that the visual display apparently doesn't follow suit.

[kaberett]

I'm confused - I do see the behaviour I expect in the tooltip (i.e. text changes to "collapse" when a cut's been expanded). I'm using visual display, Firefox 19.0.2, under WinXP.

[lightgetsin]

Further detail -- screenreader is Jaws 14, IE 9, Win 7. When I select the graphic link that says "expand" I hear "expanding" (which I'm assuming is a tool tip? dunno) and the graphic link changes to say "collapse." There is also a same page link at the end of the cut text labeled "collapse."

I don't recall the behavior on Voiceover, will check when I change devices.

[carene_waterman]

In Opera and Firefox with images turned off, I get the same behaviour lightgetsin reported as visually displayed alt text.

Expand/Expaning/Collapse all show up.

The title attribute (which changes the tooltip text in most browsers) also worked correctly.

In Chrome, because Chrome thinks you don't want the alt text when images are turned off, I don't see anything helpful. I believe Safari does this too.

I also tested this on the OPs journal in their style and everything worked as it should, or in Chrome's case, shouldn't.

Is this a bug in the method the OP is using to turn off images?

I also have a JavaScript bookmarklet that removes the image and gives the link text matching the alt text. This worked correctly too, but if the OP has a script plugin removing the images, perhaps it isn't designed to update the image text correctly.

[oyceter]

Huh, weird, sorry if it's a bug!

For both Firefox 19.0.2 and Chrome 25.0.1364.172 m in Windows 7, if I use the zap images bookmarklet from https://www.squarefree.com/bookmarklets/zap.html, the arrow will have "Collapse" if I zap images after I've already expanded the cut. If I expand it after I've zapped images, it displays "Expand" and doesn't change to "Collapse." This also happens with Chrome (forgot what version, work computer) in Windows XP.

Feel free to delete if it's some weird thing with the bookmarklet.

[deborah]

Huh. Or maybe I did submit the code, and it's a bug with either my code or with the bookmarklet. D, want me to investigate?

[denise]

yeah, if you don't mind? i'm guessing it's probably the bookmarklet, since yeah, after i let it through i thought, hrm, didn't deborah do that already?

[deborah]

okay, here's the deal. It is the bookmarklet, but I've written a replacement for it. Basically, it's very difficult for things to deal with alt text to be able to cope with dynamic pages (in Opera, with the ability is built-in, it seems to work fine, but all of the accessibility extensions I have in Firefox exhibit the exact same problem). What I've done is rewritten the zap images bookmarklet to toggle images on and off, which incidentally fixes another couple of potential problems, and that the new version just sets image display to non-rather than completely removing them from the document object model. If you click the bookmarklet a second time, images will turn back on without you having to reload the page -- and if you click at a third time, images will turn off again.

The way this will fix this particular problem is that if anything on the page has changed, if there had been any kind of dynamic page rewriting without reloading, you can just toggle this app images bookmarklet off and then back on and it will recognize the new alt text.

I've tested in Firefox but not chrome.

here's how to try it yourself, at least in Firefox. Take the code chunk that I am pasting at the bottom of this comment, and copy it into your buffer. In Firefox, right click on the zap images bookmarklet and select "properties". The second field you get in that window should be "location". Paste what you have in your buffer into the location field, and that should be all you need to do; Just click "save".

(make sure when you copy and paste You don't get linebreaks/whitespace. If you do, you should be able to grab the raw code.)

javascript:(function(){%20function%20toArray%20(c){%20var%20a,%20k;%20a=new%20Array;%20for%20(k=0;%20k%20<%20c.length;%20++k)a[k]=c[k];return%20a;%20}%20var%20images,%20img;%20images=toArray(document.images);%20for%20(var%20i=0;%20i%20<%20images.length;%20++i)%20{%20img=images[i];%20if(images[0].className.indexOf("zapimages")!=-1)%20{%20var%20alts=document.querySelectorAll('.zapimagesalt');%20var%20elementsToRemove%20=%20[];%20for(var%20j%20=%200;%20j%20<%20alts.length;%20j++)%20{%20alts[j].parentNode.removeChild(alts[j]);%20}%20img.style.display%20=%20img.style.display.replace(/none/,'');%20img.className%20=%20img.className.replace(/zapimages/g,%20'');%20}%20else%20{%20var%20altText=%20document.createElement("span");%20altText.innerHTML=img.alt;%20altText.className%20=%20"zapimagesalt";%20img.className%20=%20img.className%20+%20"%20zapimages";%20img.style.display="none";%20img.parentNode.insertBefore(altText,img);%20}%20}%20})();

I'm not sure if the maintainer of that page is still keeping things up to date but I might send him this code if it works for people.

[oyceter]

Oh wow, thanks so much for going out of your way to do this!

[jesse_the_k]

THIS IS WONDERFUL and I use zap images all the time (large print reader, hate scrolling around lores pix).

[deborah]

Argh, I wrote this code over a year ago and got distracted and never submitted it. I think I still have it lying around somewhere -- it was a nice WAI-ARIA use case (solving the screen reader problem mentioned above). denise, if you open the bug, just assign it to me.