Accessibility

The CSS random() function adds visual variation in the browser, without JavaScript or Sass loops. Brecht De Ruyte demonstrates it with subtly tilted letters, cards animated on scroll, and shadows that respond to card rotation. A caching key can keep multiple properties in sync, while sibling-index() calculates the structure of a fanned-out card stack.

These effects are best suited to decorative elements: the article advises against randomizing grids, body text, or interactive targets. With browser support still rolling out, it recommends a stable baseline enhanced through @supports, and stresses respecting prefers-reduced-motion and screen-reader access.

Pour brings together a browser extension, a CLI, a VS Code extension and a contrast checker to assess accessibility against WCAG 2.2. Audits identify affected elements and explain fixes; criteria that require human judgment are marked for review.

The CLI can fail a CI step when it finds issues, generate an HTML report for a site, and expose tools to an agent through MCP. Automated checks assist with 51 of the 86 WCAG 2.2 criteria without claiming to determine compliance: a checklist accompanies the findings to support manual review.

Front-End Checklist organizes more than 350 rules into review workflows for accessibility, CSS, performance, security, privacy, and SEO. It offers guided launch and audit checklists, and exposes the same standards to agents through MCP for more structured code reviews.

This example collects Tailwind CSS utilities that enlarge an element’s interactive area without changing its appearance. The technique makes controls easier to tap, especially on mobile.

This playground demonstrates React modal-sheet options such as snap points, scrolling, fullscreen, and keyboard handling. It also includes accessibility and reduced-motion examples.

This Stylelint plugin checks CSS practices that can undermine layout or accessibility. Its configurations integrate these checks into a project’s code quality workflow.