Understanding Focus in the Browser

It’s difficult to implement good a11y for a web app without first understanding focus.

I’ve practical knowledge of focus and how it works, particularly in relation to DOM events and CSS. I’ve limited theoretical knowledge about it.

Questions:

• What is focus?
• What (precisely) can be focussed?
• What are the implications of an element being focussed?
• Relationship between focus, ARIA attributes and assistive tech like screen readers?

Starting point: html.spec.whatwg.org/multipage/interaction.html#focus