Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s oppression and killing of Palestinians and the occupation and destruction of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“focus” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: interaction-design (non-exhaustive) · “focus” RSS feed (per email)

Entry (Sources) and Other Related TopicsDate#
What’s an Interactive Element? (mat)82
html, concepts
Testing Methods: Content on Hover or Focus (dec)81
accessibility, wcag, testing
Taking a Shot at the Double Focus Ring Problem Using Modern CSS (eri/pic)80
css, accessibility
Understanding Focus Indicators for Web Accessibility (a11)79
accessibility, keyboard-navigation, wcag, compliance
A11y 101: 2.4.3 Focus Order (nat)78
introductions, accessibility
CSS-Only Solutions Are Not Accessible (cfe)77
css, accessibility
Focus Not Obscured (taf)76
accessibility, keyboard-navigation, wcag
A Primer on Focus Trapping (zel/css)75
introductions, keyboard-navigation, javascript, accessibility
How Keyboard Traps Impact Web Accessibility (a11)74
accessibility, keyboard-navigation, testing
Managing Focus and Visible Focus Indicators: Practical Accessibility Guidance for the Web (tpg)73
accessibility, keyboard-navigation, wcag
It’s All About (Accessibility) Focus and Compose (eev)72
accessibility, keyboard-navigation, components
Tabindex: What It Is, How It Works, and When to Use It (pop)71
html, keyboard-navigation, accessibility
Top 5 Web Accessibility Issues in 2024 (and How to Fix Them) (int)70
accessibility, semantics, keyboard-navigation, contrast, colors
A11y 101: 2.1.2 No Keyboard Trap (nat)69
introductions, accessibility, wcag, keyboard-navigation
Where to Put Focus When Opening a Modal Dialog (aar)68
accessibility, modals, forms
A11y 101: 1.4.13 Content on Hover or Focus (nat)67
introductions, accessibility, wcag
Foundations: Keyboard Accessibility (tet)66
fundamentals, accessibility, keyboard-navigation, html
Focus Priming (tem)65
accessibility
What Does It Really Mean for a Site to Be Keyboard Navigable (sma)64
accessibility, keyboard-navigation, skip-links
[“a:focus-visible”] (ada)63
css, links
How Navigation Should Work for Keyboard Users (tem)62
navigation, keyboard-navigation, accessibility
Quick Accessibility Wins That Are Easy to Implement (kev)61
videos, accessibility, html, semantics, alt-text, images, contrast, colors, keyboard-navigation, skip-links
Is the Button Focusable? (mat)60
accessibility, buttons, quizzes
Focus Styles and Programmatic Focus (oll)59
css, keyboard-navigation
Accessibility Essentials Every Front-End Developer Should Know (mar)58
accessibility, fundamentals, html, semantics, forms, keyboard-navigation, modals, alt-text, responsive-design, reduced-motion, aria
Accessibility First: How to Design Inclusive Frontend Experiences57
how-tos, design, accessibility, html, semantics, alt-text, keyboard-navigation, aria, contrast, forms
When Is a Skip Link Needed? (tpg)56
accessibility, skip-links, keyboard-navigation
Starting Off Right: Where Autofocus Shines (kil/mat)55
html, forms
Two Different Kinds of “Focusable” UI Elements (yat)54
accessibility, keyboard-navigation
Beautiful Focus Outlines (med)53
css, accessibility, examples
“aria-activedescendant” Is Not Focus (cod)52
accessibility, aria
Basic Keyboard Shortcut Support for Focused Links (eri)51
links, support, browser-engines, keyboard-shortcuts, accessibility
A Brief Introduction to Keyboard Accessibility (kar)50
introductions, accessibility, keyboard-navigation
Focus vs. Accessibility Focus49
accessibility, comparisons
Managing User Focus With “:focus-visible” (css)48
css, selectors
When to Use “tabindex="0"” (gra/tet)47
accessibility, keyboard-navigation, html
Accessibility: Implementing Focus Traps46
accessibility, keyboard-navigation
Big, Beautiful, Beefy Focus States With “:focus-visible” (dav)45
css, selectors
Basic Accessibility Mistakes I Often See in Audits (cfe)44
accessibility, mistakes, auditing, html, semantics, links, buttons
Hover Contrast Bookmarklet (joe)43
bookmarklets, colors, contrast, accessibility
Evolution of Visible Focus42
videos, accessibility
Understanding SC 2.4.11 “Focus Not Obscured (Minimum)”41
accessibility, wcag
Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators (deq)40
accessibility, forms, user-experience, tips-and-tricks
Where to Put Focus When Deleting a Thing (aar)39
accessibility
Visually Hidden Links With 0 Dimensions (mat)38
hiding, accessibility, links, apple, safari
O “dialog” Focus, Where Art Thou? (mat)37
accessibility, modals, html
The Universal Focus State (eri)36
accessibility, css
Sticky Content: Focus in View (tet)35
accessibility, scrolling, css
The Problem With Automatically Focusing the First Input and What to Do Instead (ada)34
user-experience, accessibility, forms
WCAG 2.2 Misses Mark on Defining Visible Focus (yat)33
accessibility, wcag, standards
Short Note: Why Isn’t “role=presentation”/“none” Allowed on Focusable Elements? (ste)32
accessibility, aria, html
Tether Elements to Each Other With CSS Anchor Positioning (jhe/dev)31
css, anchor-positioning, apis, examples
Buttons, Links, and Focus (tem)30
accessibility, semantics, buttons, links
Focus Appearance Thoughts (ala)29
accessibility, css
Foundations: Visible Focus Styles (tet)28
accessibility, fundamentals, css
Website Accessibility (15 Best Practices) (bru)27
accessibility, best-practices, content, readability, captcha, images, alt-text, forms, html, tooling
Prevent Focused Elements From Being Obscured by Sticky Headers (sib/tpg)26
accessibility, usability, css
4 More HTML Concepts You Didn’t Know (j9t)25
html, concepts, forms
Focus Appearance Explained (tem)24
accessibility, wcag, forms
Bring Focus to the First Form Field With an Error (aar)23
accessibility, forms
With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (hdv)22
css, selectors, accessibility, keyboard-navigation
Making Disabled Buttons More Inclusive (san/css)21
forms, buttons, aria, html, attributes, accessibility
Stop Removing Focus (col)20
accessibility, css
Developing a Focus Style for a Themable Design System19
accessibility, design-systems, theming
The Focus-Indicated Pseudo-Class “:focus-visible” (web)18
css, selectors
How to Check What Item Is in Focus When Accessibility Testing17
how-tos, accessibility, testing
Standardizing Focus Styles With CSS Custom Properties (5t3/css)16
css, custom-properties, accessibility
A Guide to Designing Accessible, WCAG-Compliant Focus Indicators (sar)15
guides, accessibility, wcag, compliance
Understanding Logical Focus Order14
accessibility, html
A Complete Guide to Accessible Front-End Components (vit/sma)13
guides, components, accessibility, buttons, carousels, color-palettes, visualization, testing
Copy the Browser’s Native Focus Styles (chr/css)12
css
Having a Little Fun With Custom Focus Styles (css)11
css, buttons
“ERROR Error”: You Can’t Have a Focus Trap Without at Least One Focusable Element10
angular, keyboard-navigation
I Threw Away My Mouse (mat/24a)9
accessibility, keyboard-navigation, keyboard-shortcuts
Focus Trapping for Accessibility (A11Y)8
accessibility, keyboard-navigation, javascript
Writing Automated Tests for Accessibility (mar/24a)7
accessibility, testing, automation, keyboard-navigation
Writing JavaScript With Accessibility in Mind (mat)6
javascript, accessibility, buttons, semantics, aria
Keyboard-Only Navigation for Improved Accessibility (nng)5
accessibility, keyboard-navigation, testing
When Do Elements Take the Focus? (sib)4
accessibility, html
“a { outline: none; }”—Don’t Do It3
websites, accessibility, css
The Plague of “outline: 0” (jar/web)2
accessibility, css
JavaScript Keyboard Accessibility (sen)1
javascript, accessibility, keyboard-navigation