Keyboard Navigation - AxiomBenchmark/Axiom GitHub Wiki

The keyboard navigation tool allows users to utilize Axiom without the need for a mouse. In addition, it can be imported for any applications that require keyboard navigation.

Users navigating Axiom with a keyboard or remote will be able to successfully do so without any added effort.

Import the keyboard navigation library into your html file as such.

<script src="/javascript/keyboard_navigation.js"></script>
<link rel="stylesheet" href="/stylesheets/navigation.css">

The script selects html elements based off of a x, y coordinate system. To define an element's coordinates, add data-x and data-y attribute values to your element.

<a class="rect-btn" data-x="0" data-y="0" href="benchmark/configure">Run Benchmark</a>
<input id="searchField" data-x="0" data-y="1" type="text" name="benchmark">
<input id="searchButton" data-x="1" data-y="1" type="submit" value=">">

For these elements, and starting at data-x = 0, data-y = 0, pressing the down arrow key will select the searchField element. Pressing the right arrow key will select the searchButton element.

Pressing the enter or space key will click on the selected element.

Remotes for devices like smart televisions, FireTV sticks, and cable set-top boxes map navigation keys to keyboard arrow and enter key-press values, so no additional code should be necessary.