WebAIM - Web Accessibility In Mind

E-mail List Archives

Clickable maps

for

From: Peter Weil
Date: Mar 30, 2023 1:46PM

I’m inheriting an existing web page that contains, in source code order:

Section 1: the name of a county in our state, followed by a few brief statistics

Section 2: an svg map of our state, divided into counties. Each county is clickable, and points to Section 1.

Clicking a different county programmatically changes the content of Section 1 to match the selected county.

This raises a couple of questions:

1. Should the clickable counties be coded as anchors or buttons? They could be done as jump links pointing to another location on the page, but they also generate new Section 1 content when clicked. They’re currently coded as svg anchors with role=button, but without any focus management. Instead, there’s a live region that announces the changed content — poorly, unfortunately. I don’t think a live region is appropriate for this situation.

Deciding one way or the other (anchor or button) has ramifications for focus management, and more.

2. I’m seeking suggestions about how to clearly present the content of this page. Should the map come first in the source order? Should there be headings for both sections? Should there be some explanatory copy to introduce this content?

Currently there is nothing to explain how the map functions. There is no heading for the map. Presumably a screen reader user won’t even know about the map, or that they can select a different county, until they get past section 1.


Thanks in advance for any suggestions on how to approach this.

Peter


--
Peter Weil
Web Developer
University Marketing
University of Wisconsin–Madison
608-220-3089