Explore the community Forums Lectora Lectora Questions & Answers Remove "link graphic" from screen reader

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #378582 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    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?

    #378622 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    355 pts
    @timk

    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

    #378644 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    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 -> drop down, image -> 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.

    #378650 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    355 pts
    @timk

    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, …

    #378657 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    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.

    #378664 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    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.

     

    #378666 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    355 pts
    @timk

    Make a backup before you try this.

    Open the AWT with an editor, any will do. Find “<cssclasses>questionicons</cssclasses>” Do not remove the whole thing, just “questionicons”. Maybe the term is not in the <cssclasses> 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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.