Git Product home page Git Product logo

a11y-map's Introduction

a11y-map

A prototype app to test adding keyboard interaction (similar to Google's a11y behavior)with Esri's ArcGIS API for JavaScript version 4.

This repo will not longer be maintained. Up to date version of code is available in the [Esri Github org]:(https://github.com/Esri/a11y-map)

View it live

App

Features

To see the a11y features tab into the map. Once you do so you'll see an extent graphic and feature list are added to the map to allow users to navigate the map content via the keyboard.

  • Use the arrow keys to move around the map
  • Use the +/- keys to zoom in and out of the map
  • To learn more about one of the features wihin the selection box press the associated number key.
  • To learn more about the direction the box is moving and current location press the i button

At this point this is just a prototype app and feedback and comments are greatly appreciated.

You can access a live version of the app for testing here. The live test app supports a web map url parameter so you can append ?webmap= to the url to test with various web maps. The app requires that the map has a feature layer as the first layer and it uses the first string field it finds as the display field.

Another interesting app that shows navigating content in an accessible manner is Patrick Arlt's demo app available here. Accessible Search

Instructions

Tab into the map to activate the extent search and display results. Once in the map you can use the arrow keys to move right, left, up or down in the map. Use - to zoom in and + to zoom out. While the location dialog is active press i for more details about the area. Under the hood pressing i does a reverse geocode to find the address for the center of the query box.

Requirements

  • Your favorite IDE
  • Web browser with access to the Internet

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2016 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

a11y-map's People

Contributors

kellyhutchins avatar nwisehart avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

a11y-map's Issues

Mobile support

We need to check if the demo app and its pattern work on mobile devices. I will report any findings here.

Feature Request: Add hotkey to navigate between data points / polygons

Steps to reproduce:

  • go to /a11y-map/index.html
  • navigate with keyboard to area with pop-ups
  • enter a pop-up

Expected result:

  • press [INSERT KEY HERE] to transfer to next data point (potentially ordered by legend?)
  • current pop-up is closed and map moves to new point
  • New pop-up is opened and read into live region
  • Add feature to read current map position on close of pop-ups

Context:
In current format, a user with a visual impairment may be unable to navigate between data points in a orderly format, or unable to visit all data points without context of where they are.

Feature Request: Add hotkey to navigate active window to nearest data point/polygon

Steps to reproduce:

  • go to /a11y-map/index.html
  • navigate with keyboard to area without pop-ups

Expected result:

  • press [INSERT KEY HERE] to move window to nearest data point
  • movements should be read into the live region to give user context on where they are being moved
  • finished with end result read into live region

Context:
In current format, a user with a visual impairment may be unable to navigate to an initial datapoint

Add option to limit navigation area

Limit map navigation to the area where results are located. As a temporary 'fix' I added a listener for the 'h' key that moves the map back to the initial loading location when pressed.

Usage feedback from visually impaired IT specialist

Test each of these issues

  • Number needs to be pressed at least twice before the info about that number is displayed
  • As numbers appear the screen reader starts reading. If there are a large number the screen reader reads the list at least twice each tie assigning a different number to the landmarks. Only the number assigned after the last reading is correct and leads to the correct description.
  • It seems as though you can go to the next and previous points after you select one, but I am not clear on what keystrokes you need to press to do this. After a point is described I do not hear references to next, previous and menu
  • In order to move on the map the arrow keys are pressed repeatedly which interrupts the screen reader quite often, causing the user to possibly miss important announcements. Mainly whether there is a point on the map that may have more information. It would be useful if the computer can emit a tone to indicate that points of interest popped up on the map?

Bug: east/west travel on keyboard is interrupted when VoiceOver Live Region active

Steps to reproduce:

  • go to /a11y-map/index.html
  • navigate with keyboard to area over pop-ups
    • I went 7 arrows west, then 5 arrows south from the starting position to sit over a region of three pop-ups
  • turn on VoiceOver for OS X (cmd-f5)
  • try to rapidly travel east with keyboard (right arrow)

Expected result:

  • Travels east

Context:
Initial assumption is that the ARIA Live Region is taking priority over the JS to move the map east and west. This doesn't happen with north and south though.

Supporting Info:

  • Google Chrome Version 68.0.3440.106
  • OS X High Sierra
  • localhost..././a11y-map/index.html

Feature Request: Accessible map template requires legend to be shown

Expected Behavior:
Legend should be active and displayed on map open.

Context:
For users with visual impairments, a legend provides a meaningful way to navigate data outside of using the map. Also when legend information is ordered or sorted by the data it is portraying (ex. regions ordered by population density), it provides clearer context to the significance of the data and the relationship between data points.

Bug: ESC key should exit pop-ups

Steps to reproduce:

  • go to /a11y-map/index.html
  • navigate area to pop-up
  • open pop-up
  • press 'esc'

Expected Behavior:

  • should close the pop-up

Supporting Info:

  • Google Chrome Version 68.0.3440.106
  • OS X High Sierra
  • localhost..././a11y-map/index.html

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.