Focusing on Focus
summary
Claim: removing browser focus outlines breaks keyboard and assistive-tech users, and accessible focus can be restored without losing brand styling. Shows live demos of CSS :focus tricks, focus-visible polyfill from WICG, and focus-within to style parent containers; warns against resets like Meyer/normalize that strip focus. Gives tabindex guidance (prefer 0, avoid positive/negative where possible) and cites 20% prevalence of disability (about 1.4B people) and 814 federal website lawsuits in 2017. Demos and polyfill work in practice via a CodePen.
AI-written summary · about
chapters (9)
- 0:00Start
- 13:33Ally?
- 15:13Web accessibility means that people with disabilities can use the web.'
- 16:31'The web is not a barrier to people with disabilities, it is the solution..
- 27:21Eric Meyers Reset
- 27:58What about Normalize?
- 30:09Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
- 36:27Focus Styles Borders Background
- 38:52Focus Visible Polyfill
related talks
32mCommon ways we break accessibility and how to avoid them
57mLose Your Head, But Not Your Focus
39mManaging Focus for Accessible Digital Applications: From the Essential to the Unnecessary
09mAccessible CSS in Everyday Life
25mStuck in a Focustrap: Mastering Keyboard Accessibility
37mIt's All About Focus - and Accessibility
25mLove Thy Keyboard
16mThe double faces of CSS