FOCUS INDICATOR BOOKMARK

A bookmarklet that helps with testing the keyboard accessibility
of a web page.


This bookmarklet has two primary functions:

First, the bookmark forces elements on a web page to render a high
contrast focus indicator when they receive focus (are ”tabbed into”
using the TAB key). Testers sometimes find that not all focusable
elements on a page display focus properly or at all. It may then be
difficult to keep track on where keyboard focus moves along the page.
This bookmarklet aims to help with that problem.

Secondly, the bookmark can report focused elements’ attributes and any
changes to the attributes during testing. This may reduce the need to
use ”Inspect” and other browser features that move focus off the
element and page.


How to install the bookmarklet:

1. Copy the minified Javascript content of the address-field-content.txt
file to clipboard. Note the ”javascript:” token at the beginning; it mus be
included in the copied content. 
2. Create a new bookmark in Chrome. 
3. Paste the copied clipboard content into the ”Address:” field, that is,
make the content the bookmark’s target "web site address."


How to run the bookmarklet:

The bookmarkelt should work on all modern browsers, but it has been
tested with Chrome.

Open the Browser console (Chrome: Develoepr tools -> Console.)

When you are on a page on which you want to run the bookmarklet, ”go
to” the keyboard testing bookmark as if you wanted to launch it as a
bookmarked page. Chrome will execute the JS code from the bookmark
against the open page and the bookmarklet will start running.

You should see a printout in the console stating that the bookmark has
launched.

When the bookmarklet is running, press ’h’ to display help on
available hotkeys. All printouts are displayed in the console. 

The bookmarklet can only manipulate elements that are not inside a
shadow DOM or an iframe that fetches an external web site content.


Features and hotkeys:

* i: Turn the high contrast focus indicator on or off. This allows you
  to observe elements without overriding their built-in focus
  styling.
* s: Switch between different focus indicator styles.
* a: Turn automatic logging on focus on or off. This helps keep the
  console clear when there is no need to explore all of the available
  content.
* f:  Switch between different auto-log formats.
* l: (Lower case L): Log attributes and their values from a currently
  focused element as a formatted list.
* d: Diff: Press d once on an element to set a diff state. Press d
  again to print out a diff report that shows what changes to the
  element’s attributes have occurred between the two snapshots.
  Pressing d again will produce a new report. Diff states are
  remembered even if you navigate away from an element and  return to
  it later. 
* c: Clear diff states from memory.

* CTRL + q: Toggle navigation mode on/off. When you are in the
  navigation mode, the above hot keys are disabled, not just blocked
  via JS preventDefault(). This allows you to trigger page-specific
  key handlers or prevent accidental prinouts. Autolog remains on unless
  first disabled.


Contact:
Tero Pesonen
tpe@siteimprove.com


Disclaimer:
You can use and modify this bookmark freely.