Designing Focus Indicators That Meet WCAG Standards

Sara Soueidan argues that custom focus outlines can be more accessible than those provided by the browser default — provided you implement them correctly. Her deep dive covers the nuances of creating visible, predictable focus states that don't rely on the browser's sometimes-inadequate defaults.

Syntax Highlighting With Accessibility in Mind

Eric Bailey's a11y-syntax-highlighting repository offers code syntax highlighting themes for various software tools that are both visually appealing and compliant with WCAG color contrast guidelines. The themes also include support for Windows High Contrast mode.

Honoring Users' Motion Preferences

Michelle Barker provides a guide on when and how to respect the prefers-reduced-motion setting. There's no single correct approach, but honoring user preference is essential. While CSS properties like transition and animation are obvious candidates, Barker points out less obvious cases such as scroll-behavior and JavaScript-based animations, where you can also test for the user's preference programmatically.

Getting More Value From Accessibility Audits

Jeremy Keith suggests that when commissioning an accessibility audit, you should hope for feedback focused on interactive widgets. Spending an expert's time on easily fixable color contrast issues is wasteful — those are problems you can identify and correct yourself without specialized help.

How CSS Affects Screen Reader Behavior

While many assume CSS has no effect on screen readers, Jozsef Polgar notes some real impacts. A classic example: setting list-style: none on lists causes VoiceOver to stop reading them as lists. Polgar points to Ben Meyer's article covering similar territory.

The Case for the <search> Element

Sara Soueidan makes a case for the <search> element, despite skepticism in the community — some argue focus should be on more pressing elements like <dialog> and inert. Soueidan's argument: the element provides a free role="search", similar to how <nav> and <main> provide their respective implicit roles.

Rethinking Color Systems Beyond HSL

Eugene Fedorenko argues that HSL and HSV are adequate for picking single colors but unsuitable for building color systems: "They simply transform the RGB model and ignore the complexities of human perception." Next-generation formats like LCh, Lch(ab), HCL, and LCH(uv) offer perceptual uniformity, and browser support is beginning to trickle in.

Custom Styling for Radio Buttons and Checkboxes

Scott O'Hara demonstrates that you can fully replace radio buttons and checkboxes with custom styling while maintaining accessibility — but doing it right requires handling every possible state. For simpler cases, you can go a long way by adjusting only width/height and using the accent-color property.

Keeping Keyboard Focus Order Logical

Rachel Leggett defines logical focus order as "the idea that someone navigating your webpage with a keyboard (i.e. without a mouse) will encounter elements in an order that makes sense." The order property is a common culprit for breaking this order, but less obvious issues arise from hidden elements that remain interactive and can disrupt the expected flow.

Testing With Screen Readers in the Browser

Assistiv Labs offers a service similar to CrossBrowserTesting or BrowserStack but specifically for testing with screen readers like JAWS and NVDA. Setting up local testing environments can be expensive and technically burdensome — requiring paid copies of Parallels, Windows, and time-limited JAWS versions — making this browser-based alternative a potentially easier path.