Don't forget your keys

Make cats and bad puns accessible to all!

cat on a keyboard

This presentation contains animated gifs with flashing imagery

Who uses keyboards?

Cat using a keyboard
Some cats have trouble catching mice

OK, besides cats

  • No or almost no vision
  • Low vision
  • Mobility impairments (Parkinson's, ALS)

Permanent • Temporary • Situational

  • Loss of vision at an early age
  • Eye surgery
  • Broken mouse/trackpad

Maintaining visual focus

TodoMVC loses visual focus
illustrated tear in reality from the comic XKCD
Source: XKCD
TodoMVC CSS uses outline: none
Don't do this

How to do better

  • Keep the default :focus styles
  • Replace the default :focus styles with something visible
  • Certain styles can make an element unfocusable (display: none and visibility: hidden)
  • If it's focusable, it should have programmatically accessible text

A tale of two menus

It was the best of focus, it was the worst of focus

Unimpressed cat with monocle
Monsieur Defeline comes to avenge bad focus

Menu 1: focuses when closed

Focus moves to hidden menu on Washington Post site
illustrated tear in reality from the comic XKCD
Source: XKCD

Menu 2: doesn't focus when opened

Focus moves behind open menu on ABC News site
illustrated tear in reality from the comic XKCD
Source: XKCD

Takeaways

  • Visible & focusable => focus order
  • No cursor interaction => no keyboard interaction
  • display: none; visibility: hidden; or javascript

Like all rules, there are exceptions. Make sure you have a good reason to break them, though!

Keyboard patterns

Person turned into a skeleton waiting to tab through a menu

Tab in, tab out

From the WAI-ARIA Authoring Practices 1.1:

A primary keyboard navigation convention common across all platforms is that the tab and shift+tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include multiple focusable elements.

Example:

Good menu keyboard pattern animation
From WAI-ARIA examples

Bonus pattern: skip links

Skip links example from the New York Times
Finally, a media website used as a good example

Focus traps

Cat in a box
A good modal is like a cardboard box: square and full of cats.

When should you use a focus trap?

  • Modals of any kind
  • Slideout content (like the mobile menus earlier)
  • ??

Make your focus trap

Traditional options:

  1. Listen to the focus or focusin event and hijack it.
  2. Set every focusable element in the hidden region to tabindex="-1"

"Focusable" can get messy

document.querySelectorAll('a[href],
	button:not([disabled]),
	area[href],
	input:not([disabled]),
	select:not([disabled]),
	textarea:not([disabled]),
	iframe,
	object,
	embed,
	*[tabindex],
	*[contenteditable]);

New (and improved) options:

  • <dialog>
  • inert

Unfocusable ≠ hidden

Remember the menus!

Add aria-hidden="true" to your hidden content to ensure Screen readers can't access it.

The finished product:

Good modal focus example
From eBay MIND Patterns, highly recommended

Semantics vs. Function

Magritte's Treachery of Images painting

role="button"

  • Screen Readers care
  • Keyboards do not care

Use native elements whenever possible!

Lightning Round: Common Mistakes

Kitten with lightning

1. Removing an element with focus from the DOM

Angry cat

2. Programmatically changing focus in response to something other than a user event

Angry cat

3. Making everything focusable, including content-only elements

Angry cat

4. Positive tab indexes

Angry cat

5. Providing interaction only on :hover events

Angry cat

Go forth and make thy widgets accessible!