Search code examples
svgaccessibilityscreen-readersnvda

How can I get NVDA and similar to read out aria-label AND content of <foreignobject>?

I have an SVG tree graphic which I'd like to make accessible to users of NVDA and similar.

Each node in the SVG graphic is coded like this:

<g class="node" >
<foreignObject tabindex="0" focusable="true" aria-label="I want this read by screen readers such as NVDA..." class="nodestyle">...and I'd like this read out as well.</foreignObject>
</g>

At the moment when I tab to each node, Chrome just reads out the text in the foreignobject, and Edge Chromium only reads out the aria-label text in the g. I've tried using title, label, etc in both the g and foreignobject, but I can't get either browser to read out both pieces of text. Can anyone suggest how I can achieve this, if it's possible at all?

I don't want to do hacky things like putting in extra text and then hiding it with CSS.

Solution

  • I have been doing something quite similar, although I don't have any open/close hide/show behavior.

    This is very much not a solved problem, so I am curious about any work done in this space, and I hope you're up for further correspondence! Do check this article. I think it's part of any proper solution. This one is worth a look, too.

    I've tried many things, also settling on SVG with foreign object, and tabbing to navigate. Even implemented a couple of different mechanisms to choose branches.

    The tricky thing is choosing branches. There's an attribute called aria-flowto which takes one or more 'destination' id as a value, but it has very poor support, and there are no recommended idioms for selecting amongst them. (It can be made to work with javascript, however).

    One of my attempts uses javaScript to copy the contents of the boxes in to an aria-label attached to the element with tabindex=0 on it. This works pretty well, but does not give any of the affordances of 'browsable' content. Again, announcing branches is a challenge.

    If you want the markup inside the foreignObject to be browsable using semantic affordances such as headings, you'll probably have to use role=document, which many a11y community members will no doubt warn you against because it's tricky. I've been able to get role=document working fine in HTML, but haven't yet integrated it with SVG. I don't yet know if it will play well with the WAI-ARIA Graphics Module roles.