Topics

nvda and accessing svg element on web

William Wong
 

Hello,

I would like to know if any one expert in html or something related to that. as well as knowing how nvda works.


If the webpage has used svg to display some image, pressing tab in the browser will never jump onto the element.

It seemed that even adding aria role img and svg label, still cannot jump onto it by keyboard tab.


I have to report an accessibility issue to a website, but I donot know how to make this work.

Is not able to tab onto svg element a nvda issue? a general issue of screen reader? or any trick that can resolve it?

Not sure if this is proper to raise up here.


Thanks,

William

Quentin Christensen
 

Hi William,

We have a few open SVG issues at the moment: https://github.com/nvaccess/nvda/issues?q=is%3Aissue+is%3Aopen+svg 


On Thu, Mar 19, 2020 at 8:22 PM William Wong <sine.kazurin@...> wrote:
Hello,

I would like to know if any one expert in html or something related to
that. as well as knowing how nvda works.


If the webpage has used svg to display some image, pressing tab in the
browser will never jump onto the element.

It seemed that even adding aria role img and svg label, still cannot
jump onto it by keyboard tab.


I have to report an accessibility issue to a website, but I donot know
how to make this work.

Is not able to tab onto svg element a nvda issue? a general issue of
screen reader? or any trick that can resolve it?

Not sure if this is proper to raise up here.


Thanks,

William







--
Quentin Christensen
Training and Support Manager

William Wong
 

Hi, thanks for your reply.

Why the first link did not open that specific issue?


Quentin Christensen 於 19/3/2020 19:28 寫道:

Hi William,

We have a few open SVG issues at the moment: https://github.com/nvaccess/nvda/issues?q=is%3Aissue+is%3Aopen+svg 


On Thu, Mar 19, 2020 at 8:22 PM William Wong <sine.kazurin@...> wrote:
Hello,

I would like to know if any one expert in html or something related to
that. as well as knowing how nvda works.


If the webpage has used svg to display some image, pressing tab in the
browser will never jump onto the element.

It seemed that even adding aria role img and svg label, still cannot
jump onto it by keyboard tab.


I have to report an accessibility issue to a website, but I donot know
how to make this work.

Is not able to tab onto svg element a nvda issue? a general issue of
screen reader? or any trick that can resolve it?

Not sure if this is proper to raise up here.


Thanks,

William







--
Quentin Christensen
Training and Support Manager

Quentin Christensen
 

The first link was to a search of the issues for the term "svg".  The second was a link to the specific issue I thought it sounded like.


On Thu, Mar 19, 2020 at 10:58 PM William Wong <sine.kazurin@...> wrote:

Hi, thanks for your reply.

Why the first link did not open that specific issue?


Quentin Christensen 於 19/3/2020 19:28 寫道:
Hi William,

We have a few open SVG issues at the moment: https://github.com/nvaccess/nvda/issues?q=is%3Aissue+is%3Aopen+svg 


On Thu, Mar 19, 2020 at 8:22 PM William Wong <sine.kazurin@...> wrote:
Hello,

I would like to know if any one expert in html or something related to
that. as well as knowing how nvda works.


If the webpage has used svg to display some image, pressing tab in the
browser will never jump onto the element.

It seemed that even adding aria role img and svg label, still cannot
jump onto it by keyboard tab.


I have to report an accessibility issue to a website, but I donot know
how to make this work.

Is not able to tab onto svg element a nvda issue? a general issue of
screen reader? or any trick that can resolve it?

Not sure if this is proper to raise up here.


Thanks,

William







--
Quentin Christensen
Training and Support Manager



--
Quentin Christensen
Training and Support Manager

Jonathan COHN
 

There have been entire talks at CSUN and other accessibility related conferences on making SVG accessible. I understand that some SVG have events that occur when focus is set on them, and it appears that yours might. My believe is that by default SVG images are focusable, but in any case their focusability can be adjusted with the tab index attribute. So you want to add tabindex="0" to the SVG element or perhaps its parent. Generally, images are not interactive and therefore should not be in the tab order. Also remember that all you do by adding a role of img and aria label is to tell NVDA the name of the element and that it is a graphic. It does not effect its operation, for that you need JavaScript.
  . 

William Wong
 

Yes, thanks.


Cohn, Jonathan 於 20/3/2020 22:59 寫道:

There have been entire talks at CSUN and other accessibility related conferences on making SVG accessible. I understand that some SVG have events that occur when focus is set on them, and it appears that yours might. My believe is that by default SVG images are focusable, but in any case their focusability can be adjusted with the tab index attribute. So you want to add tabindex="0" to the SVG element or perhaps its parent. Generally, images are not interactive and therefore should not be in the tab order. Also remember that all you do by adding a role of img and aria label is to tell NVDA the name of the element and that it is a graphic. It does not effect its operation, for that you need JavaScript.
  .