Re: Help getting NVDA to read descriptions of elements in SVGs
|
Paddy Uglow <paddy.uglow@...>
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…. ☹
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
<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>
|
|
|