Remove "link graphic" from screen reader
December 1, 2017 12:00 AM
Perhaps this might have been better in the accessibility forum, but I thought I'd post here as it may be applicable in more than my particular scenario.
I've created some multiple choice questions that have an image associated with them. When I publish to HTML and run through a screen reader, it reads each image as "link graphic" before the alt-tag. The images are NOT clickable and have no action attached.
I noticed that each image has the attribute "href = "javascript:void(null)" on the "anc" which I THINK is what's creating the "link" part before the graphic. If I add a RunJS to removeAttribute, it reads it only as a graphic.
The downfall is that this also removes the image from the tab order, which, for screen reader users, is not functional. The point of the question is to give a description of an icon, then choose the matching function from the drop down. If the user tabs through, it skips the image and goes right to the drop down.
I've fiddled with a few things to try and get this to work right, but have hit multiple roadblocks. I tried adding a class to an image with a RunJS that uses getElementsByClassName, which doesn't work (I suspect because the attribute is on the anc, not the div id, similar to the way I have to add the tabindex attribute). I also tried using a JS I found in another course that both removed the href attribute and added a tabindex. I attached a sample that has my attempts plus the script from the other course to see if I can get any help on this one. Thoughts?
Discussion (6)
I attached your title with some new pages:
Page 2 removes the href attribute and adds a tabindex of -1 to all the icons
Page 3 demonstrates how to add positive tabindices
And to give you a short introduction to jQuery pages 4 and 5 do the same as 2/3 but using jQuery.
Tim
Thanks much, Tim! I think the part I initially missed may have been the "ElementsByTagName" as I was struggling to understand that when I was reading other solutions that used the loop.
Pages 3 and 5 come very close to the end goal. With the +1, the tab order ends up with the images one after the other instead of image -undefined drop down.
Would it be possible to set a loop on a second variable equal to the value attributed to the tabindex for the image, then +1 for the drop down, then +1 for the next image, etc., etc.
In the end, I may have to use the question text instead of the image and set the text off page, since sighted users don't need the alt tag. Not the absolute best solution, since the screen reader DOES announce "graphic", but at least the intent of the question is still operable and perceivable.
I've modified Page 3. It now uses two different variables for the tabindices of icons and dropdowns, so in the end it should come out as: Image 1 = 0, Dropdown 1 = 1, Image 2 = 2, Dropdown 2 = 3, ...
Tim - Thanks again! When I tested based on this sample, the first image was skipped, since it ended up with a tabindex of 0, so I changed the "tabindexicons" to -1 and it picked up the first icon.
I was trying to math (not the person) out how to do this, but had to run to a meeting, so thanks for adding the last parts. I'm not as good at the math, as I consider it is a four-letter word.
I managed to pull something off that I have no idea how to undo, because it seriously wrecks the whole thing.
I copied the JS from the sample over to the page in my course with the questions. I did a multi-select on the images in the question to add the class, but when I did, I misspelled it as "questionicons" instead of "questionicon". Doing this somehow added the class to the first dropdown. Even after removing the class from the first icon, the first drop down retains the incorrectly spelled class and NONE of the drop downs have the new "dropdowns" class.
It's ONLY the first drop down this happens to - there is no class added to the subsequent dropdowns. Copying/pasting the question to an entirely different title/page has the same thing happen. I am so thoroughly stumped on how I managed to pull this blunder off and even more stumped at how it could possibly be undone.
undefined
Make a backup before you try this.
Open the AWT with an editor, any will do. Find "undefined tag, but it must be somewhere in the file. If you remove the javascript, it should remain only once.
I believe items belonging to different questions should not be multiselected. And it's not possible to do that, if you try to select the objects with the mouse in the title explorer.
Discussions have been disabled for this post