search

bumbu / svg-pan-zoom

JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks
https://github.com/ariutta/svg-pan-zoom#demos
BSD 2-Clause "Simplified" License
1.74k stars 389 forks source link

Add keyboard accessibility to zoom controls #347

Open CarlyGerard opened 5 years ago

CarlyGerard commented 5 years ago

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.

ariutta commented 4 years ago

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.