Enable Keyboard Accessibility On HTML Lists – Gridnav.js

Preview:

Description:

Using the keyboard for navigation is incredibly important for keyboard accessibility. Not every user has a mouse, not every user can use a mouse, and not every user wants to use the mouse to navigate.

In this post, I will introduce you to a keyboard-accessibility JavaScript library that enables you to navigate through list items using the a, s, d, w, left, down, right, and up keys.

How to use it:

1. Download and load the Gridnav.js.

<script src=”gridnav.js”></script>

2. Initialize the Gridnav.js on the HTML list and done.

<ul id="list">
  <li><button>1</button></li>
  <li><button>2</button></li>
  <li><button>3</button></li>
  <li><button>4</button></li>
  <li><button>5</button></li>
  ...
</ul>

var instance = new Gridnav('#list');

3. Specify the number of items per row.

<ul id="list" data-amount="5" >
  <li><button>1</button></li>
  <li><button>2</button></li>
  <li><button>3</button></li>
  <li><button>4</button></li>
  <li><button>5</button></li>
  ...
</ul>

4. Specify which element should get focus when using the keyboard for navigation.

<ul id="list" data-element="button">
  <li><button>1</button></li>
  <li><button>2</button></li>
  <li><button>3</button></li>
  <li><button>4</button></li>
  <li><button>5</button></li>
  ...
</ul>