Support SVG images in browser extension

[domoritz]

I've tried to test an SVG image with the browser extension.

Expectation: #20 says that SVGs are supported but I cannot test an SVG image with the browser extension.

Actual: "Error: Could not establish connection. Receiving end does not exist."

axe-core version: v4.5.1

Browser and Assistive Technology versions
Chrome 83.0.4103.61

[straker]

We've found that restarting the plugin and/or chrome helps resolve that issue. Does doing either of those help the problem?

See #1881.

[domoritz]

Hmm, that didn't work. Can you try the attached file?

visualization.svg.zip

[straker]

I'm sorry, for security reasons I can't just open a zip file. Is there some other means for me to look at it (a live site somewhere perhaps?)

[domoritz]

Here is the SVG inline:

<svg class="marks" width="229" height="247" viewBox="0 0 229 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="229" height="247" fill="white"></rect><g fill="none" stroke-miterlimit="10" transform="translate(44,10)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0.5,0.5h180v200h-180Z" stroke="#ddd"></path><g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"></path><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,200)" x2="180" y2="0" stroke="#ddd" stroke-width="1" opacity="1"></line><line transform="translate(0,160)" x2="180" y2="0" stroke="#ddd" stroke-width="1" opacity="1"></line><line transform="translate(0,120)" x2="180" y2="0" stroke="#ddd" stroke-width="1" opacity="1"></line><line transform="translate(0,80)" x2="180" y2="0" stroke="#ddd" stroke-width="1" opacity="1"></line><line transform="translate(0,40)" x2="180" y2="0" stroke="#ddd" stroke-width="1" opacity="1"></line><line transform="translate(0,0)" x2="180" y2="0" stroke="#ddd" stroke-width="1" opacity="1"></line></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"></path></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'a' for a discrete scale with 9 values: A, B, C, D, E, ending with I"><g transform="translate(0.5,200.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"></path><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(10,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(30,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(50,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(70,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(90,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(110,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(130,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(150,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(170,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"></line></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="middle" transform="translate(9.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">A</text><text text-anchor="middle" transform="translate(29.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">B</text><text text-anchor="middle" transform="translate(49.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">C</text><text text-anchor="middle" transform="translate(69.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">D</text><text text-anchor="middle" transform="translate(89.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">E</text><text text-anchor="middle" transform="translate(109.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">F</text><text text-anchor="middle" transform="translate(129.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">G</text><text text-anchor="middle" transform="translate(149.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">H</text><text text-anchor="middle" transform="translate(169.5,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">I</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="180" y2="0" stroke="#888" stroke-width="1" opacity="1"></line></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(90,30)" font-family="sans-serif" font-size="11px" font-weight="bold" fill="#000" opacity="1">a</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"></path></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'b' for a linear scale with values from 0 to 100"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"></path><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,200)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(0,160)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(0,120)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(0,80)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(0,40)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"></line><line transform="translate(0,0)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"></line></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,203)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">0</text><text text-anchor="end" transform="translate(-7,163)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">20</text><text text-anchor="end" transform="translate(-7,123)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">40</text><text text-anchor="end" transform="translate(-7,83)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">60</text><text text-anchor="end" transform="translate(-7,42.99999999999999)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">80</text><text text-anchor="end" transform="translate(-7,3)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">100</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,200)" x2="0" y2="-200" stroke="#888" stroke-width="1" opacity="1"></line></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-27.6845703125,100) rotate(-90) translate(0,-2)" font-family="sans-serif" font-size="11px" font-weight="bold" fill="#000" opacity="1">b</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"></path></g></g><g class="mark-rect role-mark marks" role="graphics-object" aria-roledescription="rect mark container"><path aria-label="a: A; b: 28" role="graphics-symbol" aria-roledescription="bar" d="M1,144h18v56h-18Z" fill="#4c78a8"></path><path aria-label="a: B; b: 55" role="graphics-symbol" aria-roledescription="bar" d="M21,89.99999999999999h18v110.00000000000001h-18Z" fill="#4c78a8"></path><path aria-label="a: C; b: 43" role="graphics-symbol" aria-roledescription="bar" d="M41,114.00000000000001h18v85.99999999999999h-18Z" fill="#4c78a8"></path><path aria-label="a: D; b: 91" role="graphics-symbol" aria-roledescription="bar" d="M61,17.999999999999993h18v182h-18Z" fill="#4c78a8"></path><path aria-label="a: E; b: 81" role="graphics-symbol" aria-roledescription="bar" d="M81,37.999999999999986h18v162h-18Z" fill="#4c78a8"></path><path aria-label="a: F; b: 53" role="graphics-symbol" aria-roledescription="bar" d="M101,94h18v106h-18Z" fill="#4c78a8"></path><path aria-label="a: G; b: 19" role="graphics-symbol" aria-roledescription="bar" d="M121,162h18v38h-18Z" fill="#4c78a8"></path><path aria-label="a: H; b: 87" role="graphics-symbol" aria-roledescription="bar" d="M141,26h18v174h-18Z" fill="#4c78a8"></path><path aria-label="a: I; b: 52" role="graphics-symbol" aria-roledescription="bar" d="M161,96h18v104h-18Z" fill="#4c78a8"></path></g></g><path class="foreground" aria-hidden="true" d="" display="none"></path></g></g></g></svg>

[WilcoFiers]

This SVG looks decorative. That is why axe-core ignores it, screen readers will do the same. Axe can't tell automatically if that is or isn't supposed to be decorative, that depends on the content and the context of the image. If you give an SVG role="img", axe-core will tell you to give it an accessible name, as that is a clear case where axe-core can tell it is not a decorative SVG.

One thing to look at for the future may be svg elements that do have an accessible name but don't have a role. Given the poor support of that, there might be something worth reporting there too. WDYT?

[WilcoFiers]

Closing this due to inactivity. As explained above, because svg may or may not be decorative, axe-core does not require an accessible name for it. Only if svg has role="img" is an accessible name required.