# Accessibility · Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/tags/accessibility>)

Interfaces usable with keyboards, assistive technology and diverse sensory or motor needs.

## [Web accessibility: Laura Kalbag’s book is free to read online](<https://sebastien.rigaux.be/en/tech-watch/links/web-accessibility-laura-kalbags-book-is-free-to-read-online>)

Laura Kalbag has made *Accessibility for Everyone* free to read on the web. First published by A Book Apart in 2017, the book is now available to the web community as a resource for learning about accessibility.

Kalbag notes that accessibility best practices have changed little, while some recommended tools and job titles may be outdated; the Web Content Accessibility Guidelines are also approaching version 3.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/web-accessibility-laura-kalbags-book-is-free-to-read-online.md>) · [Original resource](<https://accessibilityforeveryone.site/>)

## [Modern Web Guidance brings current web practices to coding agents](<https://sebastien.rigaux.be/en/tech-watch/links/modern-web-guidance-brings-current-web-practices-to-coding-agents>)

Modern Web Guidance gives coding agents expert guidance on browser APIs, CSS, performance, and accessibility, steering them toward native solutions instead of legacy patterns. The repository brings together 232 features and 186 use cases as skills installable in multiple agents.

Its CLI searches locally for a guide and adds it to the agent’s context. The guidance incorporates Baseline compatibility data, targeted fallbacks, and automated evaluation; the project is marked as a preview release.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/modern-web-guidance-brings-current-web-practices-to-coding-agents.md>) · [Original resource](<https://github.com/GoogleChrome/modern-web-guidance>)

## [The Website Specification: practical technical criteria for websites](<https://sebastien.rigaux.be/en/tech-watch/links/the-website-specification-practical-technical-criteria-for-websites>)

This specification brings together 178 topics covering a website’s technical responsibilities, including HTML, accessibility, security, performance, SEO, privacy and resilience. Each topic explains why it matters and how to implement it, with items marked as required, recommended, optional or to avoid.

A yes/no checklist turns those criteria into an audit that teams can revisit after fixes. Grounded in primary sources and platform-agnostic, the specification is also available to agents through a read-only MCP server, with no authentication required for its reference tools.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/the-website-specification-practical-technical-criteria-for-websites.md>) · [Original resource](<https://specification.website/>)

## [Interop 2027: ten CSS proposals, from accessibility to animation](<https://sebastien.rigaux.be/en/tech-watch/links/interop-2027-ten-css-proposals-from-accessibility-to-animation>)

Josh W. Comeau reviews ten proposals being considered for Interop 2027: CSS functions, custom border shapes, anchor- and scroll-related queries, reading order, intrinsic-size animations, and grid decorations. Several address practical problems: `reading-flow` could align keyboard navigation with a responsive layout, while grid decorations could draw separators without adding empty DOM cells.

The proposals are at different stages of maturity. As of October 2026, several are available in Chromium but not yet in Firefox or Safari; `inherit()` is implemented in no browser. The article shows where progressive enhancement is feasible, with safeguards such as `@supports` for height transitions.

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/interop-2027-ten-css-proposals-from-accessibility-to-animation.md>) · [Original resource](<https://www.joshwcomeau.com/css/interop-2027/>)

## [CSS \`random()\`: Add playful variation without breaking layout](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout>)

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.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout.md>) · [Original resource](<https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/>)

## [Pour brings WCAG audits from the browser into CI](<https://sebastien.rigaux.be/en/tech-watch/links/pour-brings-wcag-audits-from-the-browser-into-ci>)

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.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/pour-brings-wcag-audits-from-the-browser-into-ci.md>) · [Original resource](<https://pour.dev/>)

## [A front-end checklist with more than 350 quality rules](<https://sebastien.rigaux.be/en/tech-watch/links/a-front-end-checklist-with-more-than-350-quality-rules>)

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.

2026-09-18 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/a-front-end-checklist-with-more-than-350-quality-rules.md>) · [Original resource](<https://frontendchecklist.io/>)

## [Expand a control’s hit area with Tailwind CSS](<https://sebastien.rigaux.be/en/tech-watch/links/expand-a-control-s-hit-area-with-tailwind-css>)

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.

2026-03-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/expand-a-control-s-hit-area-with-tailwind-css.md>) · [Original resource](<https://bazza.dev/craft/2026/hit-area>)

## [Explore modal sheet behaviors with React Modal Sheet](<https://sebastien.rigaux.be/en/tech-watch/links/explore-modal-sheet-behaviors-with-react-modal-sheet>)

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

2026-03-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/explore-modal-sheet-behaviors-with-react-modal-sheet.md>) · [Original resource](<https://temzasse.github.io/react-modal-sheet/#/>)

## [Defensive CSS: detect layout pitfalls with Stylelint](<https://sebastien.rigaux.be/en/tech-watch/links/defensive-css-detect-layout-pitfalls-with-stylelint>)

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

2024-12-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/defensive-css-detect-layout-pitfalls-with-stylelint.md>) · [Original resource](<https://www.npmjs.com/package/stylelint-plugin-defensive-css>)
