stomme poes Reporter
	Description • 8 years ago

Using this test page: http://www.stommepoes.nl/work/firefox_svg.html
where I have inline SVGs, both inline with text and inside buttons. Some have only a title tag inside them with content; others have the additional accessibility hack of aria-labelledby on the SVG itself pointing to the title element and an explicit img role.

I expect in at least the last case to get the SVG content read out in various screen readers. I am not certain if the tree produced by Firefox is correct within the spec or is lacking something.

NVDA (2016/latest) on Firefox 50/Win 7/64-bit reads the SVG content, both inline and in buttons. However JAWS 16 does not (it does on IE11 and latest Chrome). Orca 3.18 on Ubuntu 14/trusty 32-bit also does not read the content.

Joanmarie confirmed that Orca 3.22.x DOES read out the SVG content.

I used Surkov's DOM Inspector on Linux and the SeaMonkey version on Windows to see if I could find the buttons getting an accessible name from their SVG content. The SVGs with titles did show them having a name and the ones with the explicit img role had the correct role, however I'm unsure if what I'm seeing in the Dom Inspector is what I should be seeing.

This is possibly actually a JAWS bug though I don't know what the problem is with older Orca.

	Marco Zehe (:MarcoZ)
	Comment 1 • 8 years ago

Alex, a quick test from my end shows that the first two buttons do indeed *not* get an accessible name from their SVG children. The third button and the rest are OK. Any idea why? Are we ignoring graphic/diagram accessibles as children for button acc name retrieval for some reason?

	stomme poes Reporter
	Comment 2 • 8 years ago

Third button should be the aria-label one, added as an example of what I expected to hear with the first two (or, at least button #2).

	alexander :surkov (:asurkov)
	Comment 3 • 8 years ago

If I understand right that these examples are examined:

<button type="button">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Remove</title>
          <use xlink:href="#remove"></use>
        </svg>
      </button>

<button type="button">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="title2">
          <title id="title2">Warning</title>
          <use xlink:href="#warning"></use>
        </svg>
      </button>

and the buttons should pick up name from the subtree. What are accessible trees for these?

	stomme poes Reporter
	Comment 4 • 8 years ago

Is there a better way to post the tree besides screenshots? I have a screenshot of the SeaMonkey version of the DOM Inspector: http://www.stommepoes.nl/work/acc_tree.png
The second red area is the button with Remove SVG. The fourth red area is the button with Warning SVG. The last one which is outlined and focussed on is the button with aria-label, so should be ignored. Is this screenshot showing correctly the tree?

So the two buttons with SVGs, the SVGs have Names and Roles however the pushbuttons they are inside of have no Names (the button with aria-label is the only one with a Name).

	Dennis
	Comment 5 • 6 years ago

The second case in the code above (https://bugzilla.mozilla.org/show_bug.cgi?id=1324569#c3)seems to work now with Firefox and NVDA (see https://weboverhauls.github.io/demos/svg/). It is the ARIA version. The first case still does not work.