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

[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).