3 steps to be 80% accessible

Website is usable with keyboard only

Smart focus management

Website can be used with screen reader

@JakubJedryszek

jj09.net

Website is usable with keyboard only

focus outline is visible

no extra/unnecessary tabstops

no tabstop traps

@JakubJedryszek

jj09.net

Smart focus management

set focus on appropriate elements after user actions

restore focus to appropriate elements after user actions 

make tab order user friendly

@JakubJedryszek

jj09.net

Website can be used with screen reader

When element gets focused, screen reader should provide meaningful information

Min bar: Make it work with Chrome + NVDA

The best ARIA is no ARIA

Add aria-* tags if needed (to help screen reader)

@JakubJedryszek

jj09.net

Ibiza Tips & Tricks

[Impl] KeyboardShortcutHandler.ts

[QUnit] KeyboardShortcutHandler.test.ts

[Selenium] KeyboardShortcutTests.cs

use waitForBindings() to set focus

use Interactions.DismissHandler to restore focus

@JakubJedryszek

jj09.net

Why keydown?

keypress does not work for special keys (e.g., ESC, ARROWS)

with keyup you cannot detect two keys (e.g., ? == SHIFT+/)

if needed: add separate handlers

@JakubJedryszek

jj09.net

Handling Keyboard

$element.on(EventTypes.keydown, evt => {
    if (evt.which === Util.KeyCode.Enter 
        && KeyboardHelper.getModifierKeys(evt) === ModifierKeys.None) {
        // do stuff
        return false;
    }
});


$element.on(EventTypes.keydown, evt => {
    if (evt.which === Util.KeyCode.Enter 
        && KeyboardHelper.getModifierKeys(evt) === ModifierKeys.None) {
        // do stuff
        evt.stopPropagation();
        evt.preventDefault();
    }
});

@JakubJedryszek

jj09.net

Unit testing keyboard

// emulate pressing key
TypingEmulator.writeKeyCode(element, KeyCode.H);

// checking for focused element
strictEqual(document.activeElement, element2);

// checking for focused element async
TestHelper.strictEqualAsync(
    () => document.activeElement, element2);

@JakubJedryszek

jj09.net

UI testing keyboard

// emulating user key press
webDriver.SwitchTo().ActiveElement().SendKeys("h");


// might be flakey if executed right after key action
Assert.IsTrue(IsFocused(element)); 


// better, async assert
webDriver.WaitUntil(() => IsFocused(element));


// checking for focus with Selenium
bool IsFocused (IWebElement element) {
    return Equals(webDriver.SwitchTo().ActiveElement(), element);
}


// checking for focus with JavaScript
bool IsFocused (string element) {
    return Convert.ToInt32((webDriver as IJavaScriptExecutor)
        .ExecuteScript("return document.activeElement == " + element)) == 1;
}

@JakubJedryszek

jj09.net