E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Peter Weil
Date: Thu, Mar 30 2023 1:46PM
Subject: Clickable maps
No previous message | Next message →

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

From: Steve Green
Date: Thu, Mar 30 2023 3:48PM
Subject: Re: Clickable maps
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Peter Weil
Sent: Thursday, March 30, 2023 8:47 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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

From: Brandon Keith Biggs
Date: Thu, Mar 30 2023 4:22PM
Subject: Re: Clickable maps
← Previous message | Next message →

Hello Peter,
https://audiom.net
is a tool that can show statistical data to blind users in a way where they
can understand the geographic information. It sounds like the map you are
talking about would work perfectly in Audiom. I'll send you a private
message to talk more about it.
Thanks,


= EMAIL ADDRESS REMOVED =

Brandon Keith Biggs <http://brandonkeithbiggs.com/>;


On Thu, Mar 30, 2023 at 12:46 PM Peter Weil < = EMAIL ADDRESS REMOVED = > wrote:

> 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
>
>
> > > > >

From: Peter Weil
Date: Thu, Mar 30 2023 6:53PM
Subject: Re: Clickable maps
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of Peter Weil
> Sent: Thursday, March 30, 2023 8:47 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>
>
> > > > > > >

From: tim.harshbarger@deque.com
Date: Fri, Mar 31 2023 3:21AM
Subject: Re: Clickable maps
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Peter Weil
Sent: Thursday, March 30, 2023 7:54 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Peter Weil
> Sent: Thursday, March 30, 2023 8:47 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>

From: Peter Weil
Date: Fri, Mar 31 2023 6:58AM
Subject: Re: Clickable maps
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of Peter Weil
> Sent: Thursday, March 30, 2023 7:54 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Peter Weil
>> Sent: Thursday, March 30, 2023 8:47 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>> >
> > > >
> > > >

From: glen walker
Date: Fri, Mar 31 2023 10:29AM
Subject: Re: Clickable maps
← Previous message | Next message →

Just to toss out another idea (not necessarily a good one), but in a way
the map is kind of a tab control. The counties are the tabs and the
statistics are the tab panels, although in your case you sort of have one
tab panel and you just update its contents. It's not quite an exact
metaphor but really close. When you switch tabs in a tab control, the new
tab panel contents are not typically announced, although they could be.
The fact that a user can hear "tab, selected 1 of 10" gives them a clue as
to what to expect when they select a tab. They know there's new content by
selecting a tab and hopefully the contents of that tab panel are easy to
navigate to.

It's fine to use a live region. Just remember that it's only the text of
the live region that's announced. None of the structural roles are
announced. So if you have headings, tables, lists, etc in a live region,
they'll all be announced as if they have role="presentation". So you might
want to limit what gets announced. Having a separate hidden live region
with limited text, as you suggested, is certainly one way. Or, if you can
mark just part of your statistical area as live, that might work too.
Structural elements in the live region or in the statistical area will make
it easier for screen reader users to navigate to the contents.

From: Peter Weil
Date: Wed, Apr 05 2023 6:47AM
Subject: Re: Clickable maps
← Previous message | No next message

Steve, Glen, Tim and others,

After recovering and thinking this over some more, what do you think of the idea of using anchors with an aria-describedby attribute referencing the county data (which would be considered a description)?

Judging by the tests described in Adrian Roselli’s "Accessible Description Exposure”(2022), navigating from county to county in the map should expose both the description and the link text (Something like “link: Profile of County X”). So no live region is needed (that would be handled by aria-describedby).

https://adrianroselli.com/2022/04/accessible-description-exposure.html

I’d have to test it, of course. And apparently the link list will not expose the description. And maybe there are other caveats to consider.

Thanks,

Peter


> On Mar 31, 2023, at 11:29 AM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> Just to toss out another idea (not necessarily a good one), but in a way
> the map is kind of a tab control. The counties are the tabs and the
> statistics are the tab panels, although in your case you sort of have one
> tab panel and you just update its contents. It's not quite an exact
> metaphor but really close. When you switch tabs in a tab control, the new
> tab panel contents are not typically announced, although they could be.
> The fact that a user can hear "tab, selected 1 of 10" gives them a clue as
> to what to expect when they select a tab. They know there's new content by
> selecting a tab and hopefully the contents of that tab panel are easy to
> navigate to.
>
> It's fine to use a live region. Just remember that it's only the text of
> the live region that's announced. None of the structural roles are
> announced. So if you have headings, tables, lists, etc in a live region,
> they'll all be announced as if they have role="presentation". So you might
> want to limit what gets announced. Having a separate hidden live region
> with limited text, as you suggested, is certainly one way. Or, if you can
> mark just part of your statistical area as live, that might work too.
> Structural elements in the live region or in the statistical area will make
> it easier for screen reader users to navigate to the contents.
> > > >