Make cats and bad puns accessible to all!
This presentation contains animated gifs with flashing imagery
:focusstyles with something visible
It was the best of focus, it was the worst of focus
Like all rules, there are exceptions. Make sure you have a good reason to break them, though!
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.
focusinevent and hijack it.
document.querySelectorAll('a[href], button:not([disabled]), area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]);
Remember the menus!
aria-hidden="true" to your hidden content to ensure Screen readers can't access it.
Use native elements whenever possible!
1. Removing an element with focus from the DOM
2. Programmatically changing focus in response to something other than a user event
3. Making everything focusable, including content-only elements
4. Positive tab indexes
5. Providing interaction only on