Accessibility

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 https://github.com/maputnik/editor/compare/master...orangemug:accessibility/input-title-and-descriptions
• Color preview very small when not using the color picker (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 #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 #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 #309)
  • Screen readers shouldn’t need to read out the menu each time
• Expand/collapse panes (#299)
  • Not keyboard accessible
• Layers panel buttons (delete, duplicate, show/hide) don’t have text descriptions only icons
  • https://github.com/maputnik/editor/pull/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
  • https://github.com/maputnik/editor/pull/306
• Input element focus halo
  • Not consistent or visible enough
• 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. (#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 (#312)
  • Build UI for ticket #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.

[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