Skip to main content

Kitchen Sink

This page includes a wide range of interactive elements to demo OpenKeyNav.

note

Make sure OpenKeyNav is on. If these commands aren't working, OpenKeyNav might be off. Press Shift + o to turn OpenKeyNav on/off.

Drag-and-drop Elements (m)​

Moveable Items

Item One
Item Two
Item Three

Drop Targets

Drop Zone 1
Drop Zone 2

 

info

Requires Drag Mode to be configured. See full drag mode configuration options.

const openKeyNav = new OpenKeyNav();
openKeyNav.init({
  ...
  modesConfig: {
    move: {
      config: [
        {
          fromElements: '.moveableElement',
          toElements: '.dropZoneTargetType1, .dropZoneTargetType2',
          callback: (from, to) => {
            to.appendChild(from);
          },
        },
      ],
    },
  },
});

Buttons (k)​

info

Semantically coded links are tab-navigable and can be activated with enter.

OpenKeyNav enables users to click on links via Click Mode (k).

1. Internal Link 
<a href="./basic_example">1. Internal Link</a>
2. External Link 
<a href="https://github.com/LDubya/OpenKeyNav" target="_blank" rel="noopener noreferrer">
    2. External Link
</a>
3. Link without an href, tabindex=0 
<a onclick="alert('Link 3 clicked')" tabindex="0">3. Link without an href, tabindex=0</a>

Inputs and Forms (k)​

info

You can use tab, arrow keys, space, and enter to interact with form fields.

OpenKeyNav enables users to click on / focus on form fields via Click Mode (k).




info

Override key (ctrl). Press ctrl+[key] to execute an OpenKeyNav command while focused on a text input, checkbox, etc. For example, press ctrl+k for Click Mode. OpenKeyNav tries to avoid activation when the focus is on a form field, in case the user is inputting text.





Headings (h)​

Heading Level 1 (1)

Heading Level 2 (2)

Heading Level 3 (3)

Heading Level 4 (4)

Heading Level 5 (5)
Heading Level 6 (6)

Scrollable Regions (s)​

Scrollable region #1

Line 2

Line 3

Line 4

Line 5

Line 6

Scrollable region #2

Line 2

Line 3

Line 4

Line 5

Line 6

Special cases and gotchas​

4. Link without an href (not tabbable) 
<a onclick="alert('Link 4 clicked')">4. Link without an href (not tabbable)</a>
warning

Although OpenKeyNav's Click Mode can activate a link (<a></a>) that isn't tabbable, untabbable links create accessibility barriers, are a WCAG violation, and should be remediated.

Many users, including those with motor disabilities or visual impairments, rely on the keyboard (especially the "Tab" key) to navigate web pages. If links cannot be focused by tabbing, these users cannot access the content the links point to.

note

If you're treating a link (<a></a>) as a button by handling the click event using Javascript, then to ensure keyboard accessibility you must:

  1. handle the enter keypress the same way you handle a mouse click event,
  2. and either:
    1. give the link an empty href attribute value (<a href="">)
    2. or give the link a tabindex attribute greater than -1, ideally 0 (<a tabindex="0">).

Alternatively, you could just use a <button>, which does all of this out of the box.