Skip to main content
jamesr71028815
jamesr71028815
Participating Frequently
July 11, 2017
Question

SVG images gaining focus and locking focus

  • July 11, 2017
  • 1 reply
  • 220 views

SVG images appear to be gaining focus when tabbing through objects on the screen when publishing to HTML5 in the latest version of Chrome.  This is quite problematic because once focus is on an SVG object, you cannot tab off the SVG image.  Oddly enough,  I am not seeing the selection rectangle on the SVG image.

How to replicate:

1. Insert SVG image in Captivate slide and publish the file to HTML5

2. View published file in Chrome (I am using Version 59.0.3071.115 (Official Build) (64-bit)).

3.  Go to the slide that contains the SVG image and tab.   You will notice that if you tab onto the screen, you will not be able to continue tabbing once the svg image is tabbed upon (Incidentally, you don't see the selection rectangle on the svg image by default, but if you add the code into the published css file found at: Maintaining Keyboard Focus – Accessibility Tip | eLearning  the selection rectangle becomes visible around the SVG image).

This is quite problematic because Chrome has been one of our best browsers for accessibility.  Being unable to tab has rendered the elearning almost useless for those using Chrome.

Does anyone have any idea on how to work around this issue?  The following solutions have been attempted but do not really solve the issue:

  1. Convert image from SVG to PNG - this is not suitable because the PNG.
    1. Result: the png is not scalable and becomes degraded .  PNG's also increase the size of the image and Captivate file.
  2. Adding javascript and setting the tabindex of the image to -1.
    1. This has been tested but does not work.
    This topic has been closed for replies.

    1 reply

    jamesr71028815
    jamesr71028815Author
    Participating Frequently
    July 13, 2017

    I'll note a few items of information that may provide some help in in troubleshooting this issue:

    1. If I use IE (Edge, or v11), and tab through the cycle of items on the page, SVG's are not selected.
    2. I went back to an older version of Chrome on another computer (v 58.0.3029) and the SVG's images do show a selection rectangle as you tab through the images on the screen.  You are able to tab to and continue tabbing through the SVG images on the screen and past the SVG images.
    3. In the latest version of Chrome (59.0307115), you tab to the specific image in Chrome - when the selection box highlights the selected image, it gets locked on the image and you cannot tab off the image.
    4. I am running Captivate9 and publishing to html5
    5. I have attached some files that will provide some support to the issue that I am running into:
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices