svg-pan-zoom icon indicating copy to clipboard operation
svg-pan-zoom copied to clipboard

Add keyboard accessibility to zoom controls

Open CarlyGerard opened this issue 4 years ago • 1 comments

Currently, the zoom feature in this library appears to only be usable by mouse or touchpad devices.

Because the element generating the zoom in/zoom out icons are not inherently keyboard accessible, this means someone that cannot use a mouse or touchpad successfully cannot zoom in on the SVG, which could be a map or similar content. This functionality is crucial for accessibility. https://www.w3.org/TR/WCAG21/#keyboard-accessible

I would recommend adding keyboard event listeners wherever click/touchstart events are. Keyboard event listeners can look for whether the Enter or Space key is entered, and on keypress, zoom in or out accordingly depending on which button the keyboard pressed.

Additionally, the user should be able to use the arrow keys to navigate throughout the SVG and focus on certain areas, similar to the way a mouse user can drag the SVG to focus on certain areas.

This shouldn't take away from any other features, and only add more accessibility to the library.

CarlyGerard avatar Aug 19 '19 22:08 CarlyGerard

Thanks for the feedback. I definitely support this and have added the "help wanted" label to encourage anyone from the community to make a pull request.

ariutta avatar Oct 29 '19 17:10 ariutta