Navigate Between Elements With Directional Buttons - jQuery Directional

Navigating websites can be challenging for users who rely on remote/keyboard controls rather than a mouse.

The Directional jQuery plugin provides an accessible solution allowing them to navigate between elements with directional buttons and arrow keys.

This can be valuable for individuals with motor impairments or those who prefer keyboard-based navigation. It also finds excellent use cases in web apps designed for Smart TVs, where traditional mouse interactions might be less convenient.

How to use it:

1. Download the Directional plugin and load the jquery.directional.min.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.directional.min.js"></script>

2. Call the function Directional and the plugin will take care of the rest. Note that each focusable element must have a tabindex attribute as follows:

<h1 tabindex="0">jQuery.Directional</h1>
<p class="lead" tabindex="1">jQuery Plugin for page navigation using directional buttons. Functional for Web-Apps on Smart TV's</p>
...

$.fn.Directional();

3. Determine whether to rewrite tabindex values for enhanced navigation logic. Default: false.

$.fn.Directional({
  rewriteindexes: true,
});

4. Select a default element to start from when navigating through the page.

$.fn.Directional({
  selectelement: $("h1"),
});

5. Determine whether to trigger a click event on the focused item when pressing Enter. Default: false.

$.fn.Directional({
  clickonenter: true,
});

6. Check the device if a SmartTV. Requires IsSmartTv.js.

<script src="/path/to/IsSmartTv.js"></script>

$.fn.Directional({
  checkistv: true
});

Changelog:

2024-01-16

• Added IsSmartTv.js support.

---

This awesome jQuery plugin is developed by jeankassio. For more Advanced Usages, please check the demo page or visit the official website.