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


  • 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.


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


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


  • 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!