Re: Help getting NVDA to read descriptions of elements in SVGs
toggle quoted messageShow quoted text
From: email@example.com [mailto:firstname.lastname@example.org] On Behalf Of Arlene
Sent: Wednesday, January 15, 2020 8:42 AM
Subject: Re: [nvda] Help getting NVDA to read descriptions of elements in SVGs
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
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
…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…. ☹
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:
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.
<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>