Accessibility WCAG issues

[spektred]

mapbox-gl-js version 2.5.1:

Hello, my employer is working with an ADA agency and they made us aware of 8 accessibility issues pertaining to our mapbox installation and it appears that these are global issues which reside outside our access to resolve. Perhaps many mapbox users have the same ADA issues that we uncovered.

So I was wondering, should I submit each violation as a separate issue here on github? Or should I simply post all 8 issues here? Or is there a developer here who would be willing to just knock out each of them if I send over the spreadsheet? Some of them are quite easy (i.e. add a "title" element as a child of the "svg" element )

Thanks!

Links to related documentation

[underoot]

Hey, @spektred. Thank you for your report!

I think it would be good if you share a link to the spreadsheet or the list with short descriptions right here, and after that, we can decide what to do next.

[spektred]

Hi, thanks for responding to my thread @underoot ! I know ADA issues can be a challenge to resolve.

After reviewing all of the issues again, I spotted some more that I was able to resolve on my own, but here are the remaining 4 items which appear outside of our control.

1.

[Issue]
There are interactive controls that cannot be operated with the keyboard alone. Examples include:

• "Reset bearing to north" map control

This is regarding the maps 'Display zoom and rotation' control. Without using a mouse, you can use the "tab" key on your keyboard to access the zoom-in/zoom-out buttons (which are inside the map) and you can click on them using the "enter" key, but when you tab down to the rotation control, there doesn't appear to be any way to use this element without a mouse. Clicking enter does nothing. Perhaps it could be modified to respond to the arrow keys or something?

Here's an demo in the mapbox documentation.
https://docs.mapbox.com/mapbox-gl-js/example/navigation/

Our ADA agency continues:

[Recommendation]
Ensure all interactive functionality is operable with the keyboard. The best way to accomplish this is by using appropriate native controls, which come with keyboard functionality built in.

If using a native control is not possible, the control must have tabindex="0" and have JavaScript event listeners that allow the control to be activated when Enter is pressed.

2.

[Issue]
There are interactive controls that cannot be navigated to with the keyboard alone. Examples include:

• Tooltip controls from the map

So we have a map with numerous markers/pins on our website and when you click on the markers a tooltip/popup will appear for each of them. Similar to this demo. https://docs.mapbox.com/mapbox-gl-js/example/set-popup/

However, in that example, you can navigate to the marker using the "tab" key and open the tooltip using the enter key, so its quite ADA compliant. Ours isn't doing that.

Similar to this example here, this map has markers, but in this case the tab key cannot reach them. Why?
https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

The first example is ADA compliant but the second one isn't, but ideally all maps should be.

[Recommendation]
Ensure all interactive functionality is operable with the keyboard. The best way to accomplish this is by using appropriate native controls, which come with keyboard functionality built in.

If using a native control is not possible, the control must have tabindex="0" and have JavaScript event listeners that allow the control to be activated when Enter is pressed.

3.

[Issue]
There are link elements with an invalid ARIA role attribute value of 'listitem'. Examples include:

• (c) Mapbox
• (c) OpenStreetMap
• Improve this map

At the bottom right corner of every map, there are some Mapbox copyright links. For some reason these hyperlinks contain role="listitem".

My AI client is telling me that the role="listitem" attribute should be applied to the <li> elements, not the <a> elements. You might need to confirm why they did this, or if it was just an error.

It also seems completely unnecessary to even have <ul role="list"> and <li role="listitem"> because you are telling assistive technologies what these elements are, but they can clearly see it already due to the HTML. It'd be different if you had those roles on <div> elements. So I think all these "roles" can be completely removed?

[Recommendation]
Ensure ARIA roles, states, and properties are valid.

4.

[Issue]
There are user interface components with a contrast ratio below 3.00:1.

Foreground color: #EDAA00
Background color: #E6E9C8
Contrast ratio: 1.6:1

I'm not sure if you have the ability to fix this one, but it has to do with insufficient color contrast, which can impact people who are color blind. Certain parts of text in the map are hard to read.

This example is specifically referring to the Gulf of Mexico. But there may be others like it as well in other oceans.
For example, go to this map, and zoom/scroll on over to the Gulf of Mexico.
https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-outside-the-map/

Notice the blue words of "Gulf of Mexico" right on top of the blue-colored ocean. It would be very difficult for someone with poor eyesight to see that. If I had the ability to do so, I would change those words to black (#000000) and any other instance of blue text on top of a blue ocean.

[Recommendation]
Ensure active user interface components have sufficient contrast. The required minimum contrast ratio is 3.00:1.

Those are all of the issues we have for now. Thanks again for any help you can provide us on this.

And if you have any questions about any of these don't hesitate to ask! I can reach out to them and get detailed answers.

[underoot]

@spektred Thank you for the detailed and valuable description of the issues. We will take a look into it later when we will have time. Thank you again for your contribution!