search

medialize / ally.js

JavaScript library to help modern web applications with accessibility concerns
http://allyjs.io/
MIT License
1.53k stars 82 forks source link

add spatial navigation support #65

Open rodneyrehm opened 8 years ago

rodneyrehm commented 8 years ago

While ally.query.tabbable can find all keyboard focusable elements on a page, we do not yet understand the 2D relationship between elements that is necessary for supporting spatial navigation.

@cvan has implemented a SpatNav for GamePad d-pad and @Flamefork created FreeFocus.

I'm looking to implement something similar in my applications to provide keyboard navigation in a tiled items block (very similar to navigating icons on your desktop). Since all of this looks related, it may be a good idea to discuss the potential space fo collaboration.

I think @cvan has already implemented the Current Focus Point Algorithm| in his GamePad library. Are there other algorithms we should consider? Do we need to support multiple algorithms?

Are there any reasons for not including SpatNav support (even if only the algorithm) in ally.js?

rodneyrehm commented 8 years ago

another implementation: https://github.com/luke-chang/js-spatial-navigation/

rodneyrehm commented 8 years ago

approach for widget - https://www.christianheilmann.com/2016/08/15/better-keyboard-navigation-with-progressive-enhancement/

Flamefork commented 8 years ago

Hello!

Current Focus Point Algorithm proved to be a good fit, we use it (in FreeFocus) in production for about 2 years now in a keyboard-only (or keyboard-first for some platforms) application.

I would recommend to look into FreeFocus core for implementation, and jQuery plugin for API ideas.

Basically, FreeFocus is designed to be a "drop-in" spatial navigation support, to build the app the way we used to in webdev, not building the widget structure around rows/columns/any spatial concepts. This design could be a good fit for ally.js.