Re: Help getting NVDA to read descriptions of elements in SVGs


Arlene
 

Do I have to go get the windows update that makes Edge better? I never got a notification about it. If I have to go get it I wil.

 

Sent from Mail for Windows 10

 

From: Paddy Uglow
Sent: January 15, 2020 8:38 AM
To: nvda@nvda.groups.io
Subject: Re: [nvda] Help getting NVDA to read descriptions of elements in SVGs

 

Well, that’s interesting – I’ve been following the Edge update thread as well (thanks for the upgrade link)

NVDA with Edge Chromium JUST reads the aria-label text on this page and ignores the <foreignobject> content

https://www.creativemedia.org.uk/interactive-trees/filtration-tryout.html

…whereas Chrome JUST reads the contents of the <foreignobject> tag and ignores the aria-label.

 

It’s starting to feel like 2003 again, trying to keep all the different browsers happy….

  • Paddy

 

From: nvda@nvda.groups.io <nvda@nvda.groups.io> On Behalf Of Paddy Uglow via Groups.Io
Sent: 15 January 2020 11:26
To: nvda@nvda.groups.io
Subject: [nvda] Help getting NVDA to read descriptions of elements in SVGs

 

Hi,

This is my first post here – I develop learning resources for a university and we want to make them NVDA-friendly.

 

I’m  currently working on a decision tree, which can be seen here:

https://www.creativemedia.org.uk/interactive-trees/filtration-tryout.html

 

I want to add an invisible description to each node on the tree to help NVDA users navigate.

Below is part of the SVG (Scalable Vector Graphic) from the page: I’ve used the aria-label tag to explain where the node fits in the tree, but my NVDA doesn’t read it out. I’ve also tried title, alt and label in various places but they don’t get read out either.

Can anyone give me any hints or solutions? All I can think of is to use a hidden <div> which I don’t think is an ideal solution.

Thank you

  • Paddy

 

<svg width="950" height="800">

<g class="node" transform="translate(697.5,95)">

<foreignObject tabindex="0" focusable="true" height="48" aria-label="Option for choice, 'An example of a decision tree.'" width="110" x="-55" class="nodestyle">Keep liquid</foreignObject>

</g>

</svg>

 

Join nvda@nvda.groups.io to automatically receive all group messages.