The Australian Government coat of Arms

Communities of practice

Communities of practice

SVG Australian Map with side-nav

nationalmap

#1

Something I quickly threw together this afternoon using @gov-au/side-nav and react-simple-maps. Might be of use to someone. https://codesandbox.io/s/j3v73yv6xy
Open to any feedback, grid system isn’t playing ball at the moment.


#2

On second thought, might be best to rebuild to look the same as NDIS: http://ndiscommission.gov.au/about/start-dates
See tabbing through the DOM


#3

Hey Simon thanks for sharing !

I can’t seem to access the NDIS link though :sweat_smile:


#4

Woops thanks for the pickup!


#5

I’ve actually had some very strange accessibility issues with that SVG map on https://www.ndiscommission.gov.au/about/start-dates

In Windows10, NVDA, Edge and Chrome:
The map seems to work fine. Anchors can be tabbed through, and link text is announced. Just as if it were link in an old-school image map. However the links don’t actually navigate when activated. Focus on a region and hit enter, nothing happens.
Turn NVDA off however, and the links work just fine.

In Windows10, NVDA, Firefox:
Things get even more strange…
Focus on a state when it is visible within the browser viewport and hit enter. Link text is announced and the browser navigates to that page as expected.
Go back and try again while focusing on a state that is not visible within the browser viewport (such as Tassie). Hit enter and your focus is moved out of the browser and onto your desktop, likely the systemtray or taskbar. What the heck!?

I haven’t tested many other combos of platforms/browsers.

My guess is that NVDA doesn’t like anchor tags in SVGs. Seeing as an A in a SVG is technically a different element (despite the same name) as an anchor in a webpage.
Although I am unsure why then browsers act so differently depending on if NVDA is on or off.

There are some comments on the NVDA github about support with SVGs. But I wasn’t able to find anything specific to this scenario.

Do we have any JAWS users who could please give this map a test out and let us know their experience? Please.

Perhaps including redundant text for links in SVGs is a good idea. A call back to WCAG v1 days.