Accessible by Default  🔗 **Source:** [Accessible by Default](https://accessible-by-default.dev/) > [!note]+ Document Notes > --- > tags: [accessibility, wcag, html-css, web-platform, site-changelog] > author: accessible-by-default.dev > source: accessible-by-default.dev > reference: https://accessible-by-default.dev/ > date created: 2026-10-19 15:30 > --- > <!-- deep-read: light-touch --> > > [!info] Generated analysis — not the author's words. Sections below are machine-written > > from the captured source. Only text inside `> [!quote]` blocks is verbatim from the author. > > Do not quote or attribute any other line to the named author. > # 🏷️ Title: Accessible by default > ## 📝 Summary > - **What it is.** The captured home page of accessible-by-default.dev, numbered here by blank-line splits (¶1 to ¶11, headings and list items each count). No author appears in the metadata given for this task, so the site name stands in. The one personal-looking identifier is the GitHub link in ¶11 (account `ThomasSweet`, repo `a11y-foundation`); whether that account wrote the site is unconfirmed. > - **The claim.** ¶2 says most of what WCAG asks for ships in the platform, that HTML and modern CSS meet the bar natively before any JavaScript, and that this claim "runs live" on every page, with criteria you can break and restore and tests you can rerun. The captured text gives no count or percentage for "most" and names no success criterion. > - **The changelog.** ¶3 to ¶10 are a "What changed" list, newest first, of six entries between 16 Sep 2026 and 12 Oct 2026: glass surfaces, prefers-contrast, defensive layouts and focus rings, form validation, scroll-driven animations, and scrollbar thumbs. Each entry links to its section. > - **What the capture does not establish.** The live break-and-restore demos and tests can't be seen in text. Whether the site itself passes WCAG isn't stated beyond the site's own claim. > - **Accessibility of the capture.** The image alt list for the page has one entry, and it is the value MISSING, meaning one image has no alt attribute. Which image it is and whether it is decorative can't be told from the text. Headings (¶1, ¶3) are present. Contrast can't be judged from text. No video or audio appears in the captured text. > - **Bottom line.** A self-published manifesto plus changelog for a teaching site, written by a site that is its own evidence. Opinion and advocacy, with no commercial interest stated in the capture. > ## 📖 Main content > - **¶1 to ¶2, thesis.** Heading "Built in, not bolted on"; the audience is developers who already ship UI; the site is "one argument, in four parts." > - **¶3 to ¶4, changelog intro.** Lists what moved in the platform and standards and what changed on the site. > - **¶5 to ¶7, three entries dated 12 Oct 2026.** Glass surfaces: tint alpha decides whether text stays readable, and the site's own glass token went to 90% after measuring. prefers-contrast: a checkbox shows what Increase Contrast on macOS and iOS changes, with token overrides to copy. Defensive layouts: paint containment, content-visibility and overflow can all cut a focus ring at the padding edge; padding of ring width plus offset keeps it whole. > - **¶8, entry dated 21 Sep 2026.** Validation section: a dimmed submit button looks dead from first paint; a disabled one also removes the browser's own report of what is wrong. > - **¶9, entry dated 18 Sep 2026.** Scroll-driven animations: a global duration reset doesn't reach a scroll timeline, so each reveal needs its own prefers-reduced-motion gate. > - **¶10, entry dated 16 Sep 2026.** Scrollbar thumbs tinted from page tokens at 3:1 and switched to the accent while keyboard focus is inside the region. > - **¶11, feed and commits.** Links to the site's feed and its GitHub commit history. > ## 📚 References > All eight anchors in the capture's link list map to ¶5 to ¶11: > - glass surfaces: https://accessible-by-default.dev/craft.html#craft-glass > - prefers-contrast: https://accessible-by-default.dev/craft.html#craft-more-contrast > - defensive layouts section: https://accessible-by-default.dev/craft.html#craft-defensive > - validation section: https://accessible-by-default.dev/craft.html#craft-validation > - scroll-driven animations showcase: https://accessible-by-default.dev/showcase.html#showcase-scroll-driven-animations > - scrollbar section: https://accessible-by-default.dev/craft.html#craft-scrollbar > - feed: https://accessible-by-default.dev/feed.xml > - commits: https://github.com/ThomasSweet/a11y-foundation/commits/main > The central claim in ¶2 has no link of its own in the captured markup. The linked pages are the site's own sections, not independent sources. > ## ✅ Action items > - **Anyone teaching or reviewing front-end accessibility.** Open the linked craft sections for focus ring clipping (¶7) and reduced-motion gating on scroll timelines (¶9); both are checkable in a browser. > - **Anyone citing the *most of WCAG* claim.** Ask the site for the method behind "most" before repeating it. > - **DevRel, OSPO, Community, The WPOCC.** No direct action from this source. > ## ❓ Questions > - What share of WCAG success criteria does "most" cover, and how was it counted? > - Which image on the page lacks alt text, and is it meant to be decorative? > - Who maintains the site, and is the `ThomasSweet` GitHub account the author? > ## ✅ Logical validity > #### Strong reasoning > - **¶5 to ¶10 give mechanisms with numbers.** Examples: a 90% glass token after measurement, thumbs at 3:1, padding equal to ring width plus offset. Each entry says what to change and why. > - **¶2 offers a way to test it.** Criteria you can break and restore, and tests you can rerun, make the claim falsifiable on the live site. > #### Fallacies > - **Unquantified generalization (¶2).** "Most of what WCAG asks for" has no count or method in the captured text. Fix: list the criteria the platform covers and the ones it doesn't. > - **Self-referential evidence (¶2).** The site is offered as proof of its own claim. Fix: link an independent audit. > - **Missing alt text.** One image on the page has no alt attribute, which sits awkwardly with the site's thesis. The capture can't show whether it's decorative. > #### Tone of voice > Confident and compact, aimed at working developers. > ## 🎯 Conclusion > Worth a look as a changelog of specific, testable front-end accessibility techniques. Treat the opening claim as the site's position, not a measured result, and verify the missing-alt image on the live page before citing the site as a model. > ## 🔄 Refactor Appendix — Accessible by default > > Density: light-touch note on a short home page and changelog; three literature atoms, no permanent candidates. > ### 📚 Literature Split Pad > #### [H1] The platform meets most of the bar natively > > [!quote] [¶2] > > Most of what WCAG asks for, the platform already ships — HTML and modern CSS meet the bar natively, before any JavaScript arrives. > **Context & use**: > - ¶2. The site's thesis; no figure or method is given for "most". > **Tags**: #xref > <!-- atomicity: 1 idea ✓ --> > #### [H2] Scroll timelines escape the global motion reset > > [!quote] [¶9] > > a global duration reset never reaches a scroll timeline, so every reveal needs its own prefers-reduced-motion gate. > **Context & use**: > - ¶9. A concrete reduced-motion pitfall with a stated fix. > **Tags**: #xref #share > <!-- atomicity: 1 idea ✓ --> > #### [H3] Containment and overflow can clip focus rings > > [!quote] [¶7] > > paint containment, content-visibility and overflow all cut a focus ring at the padding edge > **Context & use**: > - ¶7. Keyboard focus visibility; the fix is padding of ring width plus offset. > **Tags**: #xref > <!-- atomicity: 1 idea ✓ --> > ### 🧠 Atomic Split Pad > No permanent candidates: a changelog page whose techniques live in the linked sections. > ### ✏️ Fleeting Queue > - F1: Open the defensive layouts section and test focus ring clipping on one of my own components. > ### → Things 3 (max 2 actions) > - [ ] Check my components for focus rings clipped by overflow or containment — accessibility #things ### Built in, not bolted on Most of what WCAG asks for, the platform already ships — HTML and modern CSS meet the bar **natively**, before any JavaScript arrives. That claim runs live on every page here: criteria you can break and restore, craft decisions shown against the mistakes they replace, tests you can rerun. Written for developers who already ship UI; nothing here repeats what the rest of the web teaches well. One argument, in four parts — start anywhere, the thread runs through all of them. #### What changed The platform and the standards keep moving. This is what moved lately and what it changed here, newest first. 2. 12 Oct 2026CraftA new craft section on [glass surfaces](https://accessible-by-default.dev/craft.html#craft-glass): the alpha of the tint decides whether text on a translucent bar stays readable, and the site’s own glass token went up to 90% after it was measured. 3. 12 Oct 2026CraftA new craft section on [prefers-contrast](https://accessible-by-default.dev/craft.html#craft-more-contrast): tick one box to see what Increase Contrast on macOS and iOS changes here, and copy the token overrides that do it. 4. 12 Oct 2026CraftThe [defensive layouts section](https://accessible-by-default.dev/craft.html#craft-defensive) gained a figure: paint containment, content-visibility and overflow all cut a focus ring at the padding edge, and padding of ring width plus offset keeps it whole. 5. 21 Sep 2026CraftThe [validation section](https://accessible-by-default.dev/craft.html#craft-validation) now keeps its submit button live: dimmed while the form is invalid, a button looks dead from first paint, and disabled, it also takes away the browser’s own report of what is wrong. 6. 18 Sep 2026ShowcaseThe [scroll-driven animations showcase](https://accessible-by-default.dev/showcase.html#showcase-scroll-driven-animations) gained a reveal and the rule behind it: a global duration reset never reaches a scroll timeline, so every reveal needs its own prefers-reduced-motion gate. 7. 16 Sep 2026CraftThe craft chapter’s [scrollbar section](https://accessible-by-default.dev/craft.html#craft-scrollbar) now tints every thumb on the site from the page’s own tokens at 3:1 and turns it to the accent while keyboard focus is inside, so the thumb says which region the arrow keys will scroll. [Subscribe to the feed](https://accessible-by-default.dev/feed.xml) [Every commit on GitHub](https://github.com/ThomasSweet/a11y-foundation/commits/main), Accessible by Default, accessible-by-default.dev, 01m5asym5ayhtmy32vah1m46tk.