This is a little script for running in TamperMonkey that renders a tooltip (if jquery tooltips are available) and sets a red border around any element that is tabbed to. Nothing too special, but it helped me troubleshoot and improve some keyboardability issues. If you want to try this out, just install the TamperMonkey plugin and paste this in. …

ShowTabFocus.js

// ==UserScript==
// @name         Show Tab Indices
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  render a jquery tooltip with the current index on every keypress for the active element
// @author       Max Marchuk
// @match        *://*/*
// @grant        none
// @require      http://code.jquery.com/jquery-3.3.1.js
// @require     https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js

// ==/UserScript==

let index = 1;

function showTabIndexForCurrentEl() {
        const current = $(document.activeElement);

        // The title attribute will override the title text for a jquery tooltip, so we need to delete it
        document.activeElement.title = '';

        current.css('border', '1px solid red');
        current.tooltip({
            html: true,
            trigger: 'manual',
            title: index,
            placement: 'left'
        });

        index += 1;

        current.tooltip('show');
}

(function() {
    'use strict';

    const  style = $('<style>.tooltip-inner {background-color: red !important;} .tooltip-arrow {border-left-color: red !important;}</style>');
    $('html > head').append(style);

    document.addEventListener('DOMContentLoaded', showTabIndexForCurrentEl);
    document.addEventListener('keyup', showTabIndexForCurrentEl);



})();