WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Clickable maps

for

From: Steve Green
Date: Mar 30, 2023 3:48PM

Without seeing the map I would be inclined to recommend the following:

The map should be before the Section 1 information.

Headings sound good. When I have groups of components like a map or an image gallery, I usually put role=group and a suitable aria-label attribute because it lets screen reader users know what the group is as soon as they encounter it. It also announces when they are leaving the group or if they navigate backwards into it.

There should definitely be instructions. Some people will want to hide them on the basis that only screen reader users will need them, but I would argue that voice recognition software users may not be aware of the functionality if there are no instructions.

Also, WCAG's Labels and Instructions SC doesn't contain an exemption that allows hiding instructions from people who supposedly don't need them. The provision of visible instructions also lets everyone know what functionality the page does not have. I have quite often spent time trying to do things that are not do-able, because I assumed a feature would be present when it isn't.

I would be inclined to use buttons and keep the focus on them after they have been operated. This allows a sighted keyboard user to navigate through the map operating each button in turn. In the absence of any research into user needs and use cases, I would only use jump links if I thought users will only want to view the information for one county.

I can see why a live region was used to announce all the new information, but it could be problematic unless it's short. We recently discussed how some screen readers stack multiple alerts, whereas others truncate them when a new one occurs. You would need to do some thorough testing to understand the behaviour. Some user testing would be good because it's always interesting to see how real people use a website - they sometimes do things you would never expect.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Peter Weil
Sent: Thursday, March 30, 2023 8:47 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Clickable maps

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