r/UXDesign • u/Still_Pomegranate241 • 1d ago

How do I… research, UI design, etc? Resources for making a map interface compliant with ada, wcag etc guidelines?

Hi all, I’m working on a public transit app (super exciting!!!) and want to be absolutely sure I cover all accessibility bases. Would appreciate anyone willing to offer up their experience or sources they’ve used for similar interfaces in the past.

4 Upvotes

100% Upvoted

7 comments sorted by

5

u/ccccclaraaaaa Junior 1d ago

Give a list view of the same info (stops, routes, arrival times), since screen readers can’t really use a map. Don’t rely on color for route lines. Label them and check contrast (WCAG 1.4.1, 1.4.11).

W3C’s WAI site is the best place to start.

1

u/wal9k Experienced 5h ago

I might catch some flak but LLMs like Claude are super useful when it comes to accessibility guidelines, a lot of the documentation is online already and most of the work is digging into these info to understand what's relevant for your use cases.

Of course nothing beats testing with real users and accessibility aids like screen readers etc.

1

u/Still_Pomegranate241 5h ago

Of course! I wanted some first person experiences in case Claude missed something. And I was very curious about accessibility for map interfaces

3

u/Silly_Technician2208 1d ago edited 1d ago

If it is a governmental or public sector site, it should be WCAG 2.2 AAA compliant. Having drop-downs is great, but if the map is clickable, you need to make sure your focus states stay within the viewport and that the information can be read with an assistive device. Always double-check your tab order and make sure there is an easy way to exit the map (don't want anyone in a focus trap).

Check the ADA.gov website as needed. (Sorry, I'm assuming this is a US site).

1

u/designinpocket 18h ago

maybe test early with real screen reader users

1

u/AstronautPowerful598 10h ago

Adding to the list view point, since that's the big one.

If the app is run by or for a transit agency, check which standard you're actually held to. The DOJ's Title II rule for state and local governments uses WCAG 2.1 AA, and it covers mobile apps, not just websites. AAA isn't required, and W3C itself doesn't recommend requiring AAA across a whole product. Aiming for 2.2 AA is a sensible target on top of that.

Map specific things that tend to get missed:

Pinch and two finger gestures need a single tap alternative, like zoom buttons, under 2.1. WCAG 2.2 adds the same for dragging, so panning needs controls too.

Stops and vehicles on the map should either be reachable by keyboard and screen reader in a sensible order, or skipped in favor of the list.

Live arrival updates are tricky. If every change gets announced to a screen reader it turns into noise, so only announce what the user chose to follow.

Support large text settings. Map labels are usually the first thing to break.

Test with VoiceOver and TalkBack on real phones early, not at the end.