SVG primitives and role=region, role=group, role=img

frankelavsky commented 2 years ago

I want to be able to use role=region in an SVG structure as well as role=group and role=img. I have suspicions that there will be issues using this structure, since many charting libraries use figure (element or role) or multiple levels of role=region. There may be difficulties using group properly, however region should only be reserved for cases when the region can remain unique and overall there are not too many regions in a page.

It is not entirely known why major charting libraries avoid a region->group->img structure.

We will need to develop scaffolding for this and also test these semantics across screen readers and browsers.

We would expect:

We expect that a screen reader (SR) can navigate to each element with a role and aria-label using a keyboard (SVG, g, and all SVG primitives).
We expect that the visual focus indicator moves to the correct element and has the correct bounding dimensions.
We expect that the visual focus indicator will remain in view at all times and may even adjust the scroll position of the page while navigating.
The SVG is labelled by the chart's title and subtitle (these should be read as a single text when navigating to the root element).
The title and subtitle are hidden from a screen reader because they are announced on their parent element instead. These elements should not be read out loud.
The elements are grouped in pairs. The screen reader should be able to separately navigate to the group before navigating to each pair.
Each primitive (rect, circle, path, text) should be accessible by a screen reader and read the number and label for that element.
We expect that a SR will announce the aria-label correctly for each element, followed by its role.
The aria label should announce the number, followed by the type of primitive (eg "7 Rect"), even though the text may be displayed viusally in a different order. This is designed intentionally to ensure that the ARIA is working correctly.
We expect that different SVG primitives (rect, circle, path, text) will be consistent with each other based on previous expectations.
We expect that the SVG elements will provide the same experience as the HTML elements (below the SVG space).

shelbyelavsky commented 2 years ago

Could you update the issue description expectations to match the expectations in the file? A couple expectations we discussed also need to be added for focus indicators and screen adjustments with indicators.

For example:

We expect that a SR focus indicator will envelop and highlight the corresponding spoken text on screen.
We expect the SR focus indicator to always be visible on screen (which may mean the screen will scroll to adjust automatically.)

frankelavsky commented 2 years ago

Done! The expectations in this issue match the file and I've added focus indicator notes.

shelbyelavsky commented 2 years ago

Also noting here that the SVG and html elements "rect" number values do not match. So technically they cannot perform the same.😉

shelbyelavsky commented 2 years ago

I'm adding the recorded test videos for each browser/screen reader combinations here for easy access.

fizzstudio / svg-aria-test

SVG primitives and role=region, role=group, role=img #25

NVDA and Chrome

NVDA and Firefox

VoiceOver and Safari

JAWS and Chrome