Consider using display:none for <style> in SVG, to match HTML (was: for Narrator reads unrendered text content within SVG)

Fixed, flighted Issue #8508245

Details

Author
Amelia B.
Created
Aug 16, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Fixed in build #
15002
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Content inside a <style> element inside a SVG is being read as plain text (shows up as a div in the Dev Tools accessibility tree), as is other plain text inside the SVG (which is sometimes used for fallback warning text).

This happens in both .svg files and in inline SVG. It doesn’t happen for HTML style elements, probably because they are being properly identified as display: none.

Test case: http://output.jsbin.com/dotapagoca

Also demonstrated in that test case: Narrator doesn’t read titles on individual shape elements, although it does read the title on the <svg> element, and it does read the <desc>. I’ll file a separate issue for that, but wanted to mention it here because it looks like the desc is being read in the same way as the generic text content, and you don’t want to remove that until you get the name & description exposed properly.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Assigned To to “Bogdan B.”

    • Following up on the response to the related issue I filed about desc being read instead of title (Issue #8508460), I discovered that the results varied by reading mode. So I thought I’d better test the different modes for this issue.

      The results described above are for “Items” mode. The items are:

      1. The HTML paragraph
      2. “SVG Test Case, image” (the role and title for the svg element)
      3. “slash-asterisk style in svg asterisk slash circle fill red” (the text of the SVG style block, with default punctuation verbosity)
      4. “It’s big. It’s red. It’s a circle. It’s otherwise unimportant.” (the desc description for the circle element)
      5. “Your browser doesn’t support SVG. Sad.” (the un-rendered fallback text)

      In “Paragraphs” mode, the paragraphs are:

      1. The HTML paragraph, ending with “SVG Test Case, image”
      2. “SVG Test Case, image; Big red circle, image; Your browser doesn’t support SVG. Sad; SVG Test Case, image” (the main graphic role & title, the circle role & title, the un-rendered fallback text, and then the main graphic role & title again)

      “Lines” mode is the same as “paragraphs” mode for the SVG content; it’s all read as one line.

      In “Words” or “Characters” mode, the SVG alternative text is all read as either “space” or "newline", but the un-rendered fallback text is still read word-by-word.

    • Microsoft Edge Team

      Changed Assigned To from “Bogdan B.” to “Francois R.”

      Changed Status to “Confirmed”

    • Thanks Amelia for the investigation. We are actually aware of the issue, but our plans to add support for proper SVG-AAM will not be executed in the next version we ship. We will eventually fix this, but not in the coming months. We currently don’t have plans to make things better while we wait for SVG-AAM to be implemented, as far as I know, so webdevs will have to live with the current state for a while.

      Just in case anyone needs a workaround, please use aria-hidden=true on things you want to hide. A quick way to deal with style tags is to add “style { display:none }” to your site’s stylesheet. That works, too. Actually, maybe I could add this to the Edge user-agent stylesheet as a stop-gap for next release while we wait on proper svg-aam. It would match Firefox default stylesheet instead of Chrome, but I don’t think it would have an impact on any website.

      https://jsfiddle.net/q75Lq19f/](https://jsfiddle.[https://jsfiddle.net/q75Lq19f/](https://jsfiddle.net/q75Lq19f/)

      PS: I am moving this bug to a spec bug and assigning it to me, to investigate the user-agent stylesheet change. We already keep track of SVG-AAM in our deliverables, and you can check status on status.microsoftedge.com.

    • Microsoft Edge Team

      Changed Status from “Confirmed” to “In code review”

    • Just wanting to mention that the “In code review” update means that I submitted for review a change of the default stylesheet so that at least svg

    • The fix for the <style> tag just made it into a dev branch. I know this doesn’t fix all the issues, but the rest of this issue will be covered when we work on SVG AAM. As a result, I’ll close thig bug once the change makes it to insider builds.

    • Microsoft Edge Team

      Changed Title from “Narrator reads unrendered text content within SVG” to “Consider using display:none for <style> in SVG, to match HTML (was: for Narrator reads unrendered text content within SVG)”

      Changed Status from “In code review” to “Fixed, flighted”

    • Thanks for your report. The issue would be available in public builds early next year.

    You need to sign in to your Microsoft account to add a comment.

    Sign in