oyceter: teruterubouzu default icon (Default)
Oyceter ([personal profile] oyceter) wrote in [site community profile] dw_suggestions2013-03-26 03:49 pm

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

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


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%)

azurelunatic: A glittery black pin badge with a blue holographic star in the middle. (Default)

[personal profile] azurelunatic 2013-03-30 05:40 am (UTC)(link)
If it's not practical to get exactly this, then changing the alt text to "Expand/Collapse" might do.

[personal profile] swaldman 2013-03-30 07:53 am (UTC)(link)
+1.
montuos: cartoon portrait of myself (Default)

[personal profile] montuos 2013-03-30 02:06 pm (UTC)(link)
+1
lightgetsin: The Doodledog with frisbee dangling from her mouth, looking mischievious, saying innocence personified. (Default)

[personal profile] lightgetsin 2013-03-30 12:01 pm (UTC)(link)
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: Overlaid Mars & Venus symbols, with Swiss Army knife tools at other positions around the central circle. (Default)

[personal profile] kaberett 2013-03-30 05:38 pm (UTC)(link)
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: The Doodledog with frisbee dangling from her mouth, looking mischievious, saying innocence personified. (Default)

[personal profile] lightgetsin 2013-03-30 06:14 pm (UTC)(link)
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: An image of the Carina Nebula (Default)

[personal profile] carene_waterman 2013-03-30 07:23 pm (UTC)(link)
In Opera and Firefox with images turned off, I get the same behaviour [personal profile] 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.
deborah: the Library of Congress cataloging numbers for children's literature, technology, and library science (Default)

[personal profile] deborah 2013-04-01 02:08 pm (UTC)(link)
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: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)

[staff profile] denise 2013-04-01 07:52 pm (UTC)(link)
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: the Library of Congress cataloging numbers for children's literature, technology, and library science (Default)

[personal profile] deborah 2013-04-02 02:40 am (UTC)(link)
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.
Edited (uploaded to pastebin to be safe) 2013-04-02 02:44 (UTC)
jesse_the_k: Slings & Arrows' Anna offers up "Virtual Timbits" (Anna brings doughnuts)

[personal profile] jesse_the_k 2013-05-13 11:44 pm (UTC)(link)
THIS IS WONDERFUL and I use zap images all the time (large print reader, hate scrolling around lores pix).
deborah: the Library of Congress cataloging numbers for children's literature, technology, and library science (Default)

[personal profile] deborah 2013-04-01 02:07 pm (UTC)(link)
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). [staff profile] denise, if you open the bug, just assign it to me.