Accessibility

[orangemug]

Maputnik should be for everybody, currently we're not a very friendly app for the visually impaired and users with reduced movement. This is a master ticket which outlines some of the steps to make a better more friendly application for those users. Most of the things listed will require separate tickets and more research before development.

Note: I'm not an expert in web accessibility, although I've done a bit of work and quite a bit of reading/research in the past. Please get involved if you'd like to help and lets make Maputnik accessible together

App accessibility

App accessibility how easy it is for users to use our app.

For those which reduced vision

• Contrast of UI
  • We need to check over the contrast ratio across the app (see http://contrast-ratio.com/)
• Type size
  • Increasing zoom reduces space for the map pane, could we solve this with a better UI?
• Increasing browser default font size should increase app font size.
  • Currently it's fixed at 14px in html { /* ... */ }
• Input elements are currently described with a popup, how does a screen reader cope with these?
  • Working branch master...orangemug:accessibility/input-title-and-descriptions
• Color preview very small when not using the color picker (see Make color swatch larger so its easier to see #297)
• Are errors in the map style accessible by a screen reader?
  • Currently errors are appended to the map pane. I'm assuming closer to the input elements is better for all users.
• Button links (without hrefs) should be proper <button/>s so they are keyboard accessible (See Made buttons keyboard accessible #298)
• Mark selected elements in layers panel for screen readers.

Reduced movement

• Keyboard use of the app
  • Layers menu
    • http://oaa-accessibility.org/example/41/
    • https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-1/treeview-1b.html
    • http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
  • Modals (see Added accessible modal via react-aria-modal #300)
    • Should steal keyboard focus
    • Escape to close modal
    • See W3C docs for full details https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html
• JSON editor
  • Switch to monaco-editor maybe? See https://github.com/Microsoft/monaco-editor/wiki/Accessibility-Guide-for-Integrators
• Skip to content https://webaim.org/techniques/skipnav/ (issue Added skip-menu link for keyboard users #309)
  • Screen readers shouldn't need to read out the menu each time
• Expand/collapse panes (Added button to expand/collapse layer group #299)
  • Not keyboard accessible
• Layers panel buttons (delete, duplicate, show/hide) don't have text descriptions only icons
  • Keyboard accessible layer options #306 - these are also hidden from aria with an additional menu inside the <LayerEditor/>
• Moving layers up down in list can only be done via dragging of layers
  • Keyboard accessible layer options #306
• Input element focus halo
  • Not consistent or visible enough
• Keyboard shortcuts (Keyboard shortcuts #313)
  • Keyboard shortcuts would probably benefit all users

Other accessibility issues

• Vestibular disorders - see https://css-tricks.com/introduction-reduced-motion-media-query/
  • Support prefers-reduced-motion only for safari at the moment. (Added prefers-reduced-motion support #296)

Output accessibility

How easy it is for all of our users to make accessible maps for display in print and on screen.

Making maps for people with reduced vision

• Add color filters for the main map pane to simulate color blindness
  • map filter filters (Color blindness emulation #312)
  • Build UI for ticket Color blindness emulation #312
• Create an accessibility page/section in the docs (wiki) and link to a good guide explaining color accessibility (added https://github.com/maputnik/editor/wiki/Home/_compare/8eae287a5eea95cb8e5795112d870a6e1493d0a2)

Documentation

Hearing loss

• Do videos support captioning?
  • Overall pretty good 'auto captioning' from youtube. Needs to be reviewed properly. Reviewed captions from @lukasmartinelli youtube videos and they are a few errors but they are minor and understandable. We should continue to use YouTube

Visual

• Good written documentation for screen readers?

Questions?

I understand colour accessibility and reduced movement, but Maputnik is a visual editor does making it accessible to a screen reader make sense?

Good question, there are lots of varying degrees of reduced visibility. Some users be using a screen reader to assist rather than the only mean of interaction. We should be welcoming to people to give Maputnik a try regardless of their Accessibility Requirements.

Feedback

Any feedback is welcome and encouraged. If anybody wants to get involved or has expertise in either making apps accessible or is a user who uses assistive technologies and would like to help, please leave a comment below.

[pathmapper]

Hi @orangemug, great list!

Just wanted to mention that there is currently a new Mapbox GL Accessibility Plugin developed:
https://github.com/mapbox/mapbox-gl-accessibility/

Maybe it's worth to take a look.

[orangemug]

@pathmapper thanks that's really neat.

[pathmapper]

Add color filters for the main map pane to simulate color blindness

I am currently using http://colororacle.org/ to simulate color blindness.

There are a lot of useful information on the website e.g.

• http://colororacle.org/links.html
• http://colororacle.org/design.html

Github Repositories:

• https://github.com/nvkelso/color-oracle-java
• https://github.com/nvkelso/color-oracle

[orangemug]

@pathmapper I've attempted to 'add color filters for the main map pane to simulate color blindness' in PR #312

Do you have any ideas or good resources to test we're getting the correct results?

[pathmapper]

Great idea using SVG filters @orangemug !

We could check which types are available in colororacle and compare if the OSM Liberty style looks the same using it.

[orangemug]

@pathmapper yeah I guess if we, screenshot the editor with a style loaded and

• each SVG filter applied
• each colour oracle filter applied

Then compare the screenshots

[orangemug]

My original reason for not opening individual issues was to not spam the issue tracker. Now that I've completed all the easier items in this issue, I've opened individual issues for all the remaining items to track their progress and make it easier for others to get involved.

Closing this issue