Adding keyboard navigation to HERE Maps API for Javascript

Web accessibility is the practice of removing barriers that may prevent people from fully experiencing content and supporting inclusion for individuals with disabilities. It can be a complex process to create fully accessible web solutions as the manner of which an individual interacts with the web can vary greatly from person to person. Based on the Web Content Accessibility Guidelines, or WCAG, keyboard navigation is one the ways to improve web accessibility.   

Today I'm sharing quick tips on how to add keyboard navigation to HERE Maps API for Javascript.

Code Sample

We need to capture the KeyboardEvent from user interaction with the keyboard, then apply the correspondent map interaction event to the map object in the HERE Maps API for Javascript code. The event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred. For example, adding keyboard navigation to zoom in and out with the keyboard key '+' and '-' can be done by adding the code below.

var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:50, lng:5},
  zoom: 4,
  pixelRatio: window.devicePixelRatio || 1
});

document.addEventListener(
  "keyup",
  (event) => {
    const keyName = event.key;

    if (keyName === "+") {
      map.setZoom(map.getZoom()+1);
    }

    if (keyName === "-") {
      map.setZoom(map.getZoom()-1);
    }
  },
  false,
);

Copy

Sample Application

Below is a simple web map application where you can press '+' to zoom in and '-' to zoom out of the map.

Conclusion

Improving web accessibility through keyboard navigation is essential for ensuring that all users, including those with disabilities, can access and interact with web content effectively. By incorporating keyboard navigation and following the Web Content Accessibility Guidelines (WCAG), you'll be making your HERE Maps API implementation more accessible and providing a better experience for all users.