Comments (4)
A branch attempting to summarise a map mb-pages...orangemug:feature/issue-5
I'm still a little unclear which element the aria-*
should exist on but since the <canvas/>
has the tabIndex
that seems to make sense. Has anybody got any good resources (blogs, tech specs, etc...) for maps and accessibility?
from mapbox-gl-accessibility.
Yep the canvas has aria-label=Map
[1] by default, which was added in mapbox/mapbox-gl-js#3782.
That canvas element is the one that needs to be focused for the arrow keys to pan the map so using a label like "Map" helps users using assistive technologies know this is the map element.
The spec says aria-label "provides the user with a recognizable name of the object", so I don't think it's right to overload it with a longer description. I think aria-describedby is where a longer description should go.
As for the description is likely very application dependent, so good to make it settable. Could be simply "Map of London" or "Map of pubs in London".
I'm not sure about including the zoom level as a number, as users don't know about zoom levels. I think describing the location as "Map of the world", "Map of Europe", "Map of UK", "Map of London", "Map of South Bank", "Map of Bernie Spain Gardens" does a better job.
from mapbox-gl-accessibility.
I'm not sure about including the zoom level as a number, as users don't know about zoom levels.
mapbox/mapbox-gl-native#4821 has an example of the VoiceOver summary format in MapKit, which the Mapbox Maps SDK for iOS now mimics. These SDKs include the zoom level because there’s also a built-in gesture for zooming the map in and out. Essentially it’s a readout of the slider’s current state. Similarly, the lists of visible annotations, places, and roads are present because both SDKs allow the user to navigate through the full list of annotations, places, and roads one by one. Without those controls, I agree that this summary format would seem a bit contrived.
from mapbox-gl-accessibility.
Hey @1ec5 @andrewharvey so I think there is some confusion. To add iOS SDK parity I believe we just need to implement https://github.com/mapbox/mapbox-gl-native/blob/dcd7da14f6627a09a5840a3046b5708449962f69/platform/ios/src/MGLMapView.mm#L2293-L2330
So this is aims to be the first part of that implementing
- The zoom level - https://github.com/mapbox/mapbox-gl-native/blob/dcd7da14f6627a09a5840a3046b5708449962f69/platform/ios/src/MGLMapView.mm#L2298
- The number of visible annotations - https://github.com/mapbox/mapbox-gl-native/blob/dcd7da14f6627a09a5840a3046b5708449962f69/platform/ios/src/MGLMapView.mm#L2320
Can you confirm that's whats required?
@andrewharvey as for aria-label
good catch I'll remove that.
from mapbox-gl-accessibility.
Related Issues (19)
- Automatically choose layers based on source layers HOT 2
- derive width and height from feature property HOT 2
- build a distributed bundle HOT 9
- Make roads accessible HOT 2
- compliance with WCAG HOT 2
- Link is broken HOT 3
- add image/video of demo to README.md
- Order POIs by proximity to user location HOT 1
- Inherit mouse events HOT 3
- Add some tests HOT 1
- Event listener for when elements are drawn on the page?
- Filter out duplicate features with the largest one
- Error when running `npm install & npm start` HOT 3
- Provide more information about each POI
- Demo requires access token
- Use localized name property by default HOT 1
- Label features by evaluated text-field HOT 1
- Accessibility Elements not created on map load
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mapbox-gl-accessibility.