WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Clickable maps

for

From: Peter Weil
Date: Mar 31, 2023 6:58AM

It’s skipping over some items. I figure the less html, the better. I think I can get it to work with a separate, dedicated live region container. I’m grappling with the JavaScript that’s in place to make it happen.

But there’s still the question of the link to the selected county’s profile page. That won’t work in a live region.

Sent from my iPhone

> On Mar 31, 2023, at 4:21 AM, <EMAIL REMOVED> wrote:
>
> Peter,
>
> What is the current live region saying or doing wrong?
>
> Typically, it is perfectly OK to include other HTML elements inside a live region.
> Also, if the focus remains on the button, either the screen reader user will need to move the screen reader to the new information to read it or you will have to use a live region so the screen reader reads the information while focus remains on that button.
>
> Thanks!
> Tim
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Peter Weil
> Sent: Thursday, March 30, 2023 7:54 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Clickable maps
>
> Thanks for that very detailed response, Steve. I especially like the group idea. Generally I prefer not to hide instructions unless there’s a really good reason for it.
>
> Question: if the focus is kept on the button when they’ve been activated, then how would you convey they changed county information to blind users? If not a live region, then what?
>
> Perhaps you’re thinking that a way be found to get the live region to work better. Right now the live region is the same as the visual one, and has various html elements that may be hindering the announcement; I’m going to try a separate, hidden live region with little-to-no html and see whether I can get the announcement to work any better. Right now it says:
>
> “[Name] County, 41 CURRENT UNDERGRADUATE STUDENTS, 45 MEDICAL PROFESSIONALS WITH DEGREES FROM [our university]”
>
> Whether that’s too long or not, I don’t know.
>
> But…one fly in the ointment that the editors are asking me to add a link at the end of the county data section (the link goes to a county profile page). Obviously that won’t fly with a live region. So I would need to find a way to incorporate that into the page and make it easy for anyone to navigate to.
>
> I agree with you about user testing, but for the time being, I have to proceed without it, and follow what the editors want. The idea is that users will click on a county, read the stats, and then (hopefully) click the link for more county info, or go back to the map and do the same with other counties. I agree that maybe a jump link is not the way to go.
>
> Thanks again,
>
> Peter
>
>
>> On Mar 30, 2023, at 4:48 PM, Steve Green < <EMAIL REMOVED> > wrote:
>>
>> 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
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > >
> > > >