Accessibility Fixes, Tools, and Patterns Worth Knowing

Accessibility work often comes down to small details that have outsized effects. A recent roundup of saved links highlights several such details: a fix for a CSS property that previously broke semantics, warnings about layout reordering, practical testing tools, and a few patterns to reconsider.

display: contents Is Safer in Chrome Now

Rachel Andrew reports that Chrome has fixed an accessibility issue with display: contents;. Previously, if you used that property on a wrapper like a <ul> so its <li> children could participate directly in a parent grid, the list's accessible semantics were lost. Subgrid isn't a substitute in that scenario. With the fix, you can remove the wrapper from layout without wiping out the list's meaning.

That same grid context also raises the broader issue of content re-ordering. As Andrew notes in a separate slide deck, it's easy for modern layout techniques to make the visual order diverge from the source order. Right now the safe guidance is to avoid such divergence. A CSSWG issue suggests the future might bring a way for browsers to update tab order so it matches a visually reordered layout.

Practical Testing Tools and Techniques

Artem Sapegin compiled a list of useful accessibility testing aids:

  • eslint-plugin-jsx-a11y for catching issues during linting
  • storybook-addon-a11y for component-level checks
  • cypress-axe for automated end-to-end audits
  • Contrast app for checking color contrast
  • Spectrum browser extension for accessibility checks
  • Your tab key, for verifying keyboard navigation manually

Tools and Pattern Critiques

ButtonBuddy, a tool from Stephanie Eckles, generates button CSS with color contrast in mind: it outputs colors as custom properties that already meet contrast guidelines.

Amber Wilson walks through five iterations of an accessible anchor link inside a header, showing that even a refined solution leaves questions to consider.

Bruce Lawson warns against putting pointer-events: none on form labels. The practice apparently traces back to Material Design's floating label pattern, but Lawson argues it's misguided for accessibility.

Sara Soueidan tested real assistive technology to see how common interactive elements are presented. Her findings: a "read more" link doesn't tell users what they'll read more of, and "add to cart" alone lacks context. The solution is to add descriptive text—for example, the product name—but that extra text should go at the end of the button, not in the middle, to avoid breaking how the label is announced.