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 Experiences | | 57 |
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 Focus | | 49 |
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 Traps | | 46 |
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 Focus | | 42 |
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 System | | 19 |
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 Testing | | 17 |
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 Order | | 14 |
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 Element | | 10 |
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 It | | 3 |
websites, accessibility, css |
The Plague of “outline: 0” (jar/web) | | 2 |
accessibility, css |
JavaScript Keyboard Accessibility (sen) | | 1 |
javascript, accessibility, keyboard-navigation |