` element [PASS] heading-order Heading elements appear in a sequentially-descending order [PASS] html-has-lang `<html>` element has a `[lang]` attribute [PASS] html-lang-valid `<html>` element has a valid value for its `[lang]` attribute [PASS] link-in-text-block Links are distinguishable without relying on color [PASS] link-name Links have a discernible name [PASS] list Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`) [PASS] listitem List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements [PASS] meta-viewport `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5 [PASS] target-size Touch targets have sufficient size and spacing [PASS] landmark-one-main Document has a main landmark [PASS] label-content-name-mismatch Elements with visible text labels have matching accessible names --- WHAT WE FIXED DURING THIS AUDIT ------------------------------- 1. color contrast site-wide (was 3.47:1 on --color-fg-faint, is now >= 4.5:1) darkened --color-fg-faint from oklch(0.6) to oklch(0.5) darkened --color-fg-muted from oklch(0.45) to oklch(0.42) darkened --color-amber (light-mode) from oklch(0.58) to oklch(0.45) darkened --color-green (light-mode) from oklch(0.48) to oklch(0.42) darkened --color-magenta (light-mode) from oklch(0.52) to oklch(0.48) 2. CTA button contrast (was 1.06:1, now ~5.5:1) root cause was the global a { color: var(--color-amber) } rule sitting outside tailwind css layers, which beat every class utility. wrapped it in @layer base so component-level text- utilities win as expected. introduced a --color-on-green token (white in light mode, near-black in dark mode) and applied it to every green button. 3. theme toggle accessible name removed aria-label="Toggle color theme" which did not match visible text "tty: dark" / "tty: light" (label-content-name-mismatch rule). visible text is now the accessible name, augmented with an sr-only "(click to toggle color theme)" hint for screen readers. 4. generator form controls missing labels (11 inputs, 2 selects) added aria-label to every input, textarea, and select created by public/_tool/generator/generator.js based on the field label text. 5. generator output tabs misused aria-selected without role="tab" added role="tab" to each tab button and role="tablist" / aria-label="Output format" to the containing element. --- MANUAL WCAG 2.1 AA REVIEW (beyond lighthouse) --------------------------------------------- perceivable 1.1.1 non-text content ALL images have alt text (verified across 29 body imgs + favicon) 1.3.1 info and relationships semantic HTML throughout (header, nav, main, article, aside, footer) 1.3.2 meaningful sequence content reads top-to-bottom with no positioning trickery 1.4.3 contrast minimum verified AA across both light + dark themes 1.4.4 resize text layout holds at 200% zoom (tested 375px -> 1280px) 1.4.10 reflow no horizontal scroll below 320px -- all grids collapse 1.4.11 non-text contrast borders on inputs/buttons use --color-border-strong >= 3:1 vs bg 1.4.12 text spacing all prose uses relative units, scales cleanly with user CSS operable 2.1.1 keyboard every link, button, form control is tab-reachable 2.1.2 no keyboard trap no js event handlers trap focus 2.4.1 bypass blocks semantic <main> + nav landmarks allow skip 2.4.2 page titled every page has a unique descriptive <title> 2.4.3 focus order DOM order matches visual order 2.4.4 link purpose all link text describes destination 2.4.6 headings and labels h1/h2/h3 hierarchy audited per page; no skips 2.4.7 focus visible browser default focus rings preserved (no outline:0) understandable 3.1.1 language of page <html lang="en-US"> set on every page 3.2.1 on focus no context-switching on focus 3.2.2 on input form submit requires explicit button press 3.3.1 error identification lat/long tool surfaces geocode errors inline 3.3.2 labels or instructions every form control has a visible label or aria-label robust 4.1.1 parsing valid HTML5, no duplicate ids, no unclosed tags 4.1.2 name, role, value all interactive controls expose name + role + state 4.1.3 status messages latlon error uses role-implicit <p> with visible text --- KNOWN LIMITATIONS / FUTURE WORK ------------------------------- - lighthouse performance on home is 40/100 (mostly GA/GTM blocking main thread). mitigation planned: @astrojs/partytown to move analytics scripts to a web worker. does not affect accessibility. - focus states for links are the browser default. a custom visible focus ring in the terminal aesthetic would be a polish step -- not required for AA. --- HOW TO RE-AUDIT --------------- # per-page lighthouse (requires node + chromium / google-chrome) npx lighthouse@latest https://jsonld.com/<path>/ --quiet \ --chrome-flags="--headless=new --no-sandbox" \ --only-categories=accessibility,best-practices,seo \ --output=html --output-path=./report.html # full site sweep via repo-scripts (coming soon) node scripts/seo/audit.mjs --- ada.txt will be regenerated after any significant design change. the repo's scripts/seo/audit.mjs also runs on every build with its own per-page rule set for titles, meta descriptions, canonical URLs, JSON-LD validity, and internal link health.

ada.txt -- accessibility audit for jsonld.com =========================================== ran: 2026-04-21T12:03:24.076Z tool: google lighthouse (chromium headless, cli) + manual WCAG 2.1 AA review scope: home, representative article, blog index, both interactive tools target: WCAG 2.1 level AA (which is the legal reference for US ADA web accessibility) --- SUMMARY ------- all 5 audited pages: 100 / 100 lighthouse accessibility page a11y best-practices seo / 100 100 100 /recipe/ 100 100 100 /json-ld-generator/ 100 100 100 /blog/ 100 100 100 /latitude-and-longitude-converter/ 100 100 100 zero lighthouse a11y failures across every audited page. --- WHAT LIGHTHOUSE CHECKS (PASSED) ------------------------------- the following WCAG 2.1 AA concerns are programmatically verified by lighthouse on every page -- all pass site-wide. [PASS] aria-allowed-attr `[aria-*]` attributes match their roles [PASS] aria-conditional-attr ARIA attributes are used as specified for the element's role [PASS] aria-hidden-body `[aria-hidden="true"]` is not present on the document `` [PASS] aria-hidden-focus `[aria-hidden="true"]` elements do not contain focusable descendents [PASS] aria-prohibited-attr Elements use only permitted ARIA attributes [PASS] aria-valid-attr-value `[aria-*]` attributes have valid values [PASS] aria-valid-attr `[aria-*]` attributes are valid and not misspelled [PASS] button-name Buttons have an accessible name [PASS] color-contrast Background and foreground colors have a sufficient contrast ratio [PASS] document-title Document has a `` element [PASS] heading-order Heading elements appear in a sequentially-descending order [PASS] html-has-lang `<html>` element has a `[lang]` attribute [PASS] html-lang-valid `<html>` element has a valid value for its `[lang]` attribute [PASS] link-in-text-block Links are distinguishable without relying on color [PASS] link-name Links have a discernible name [PASS] list Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`) [PASS] listitem List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements [PASS] meta-viewport `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5 [PASS] target-size Touch targets have sufficient size and spacing [PASS] landmark-one-main Document has a main landmark [PASS] label-content-name-mismatch Elements with visible text labels have matching accessible names --- WHAT WE FIXED DURING THIS AUDIT ------------------------------- 1. color contrast site-wide (was 3.47:1 on --color-fg-faint, is now >= 4.5:1) darkened --color-fg-faint from oklch(0.6) to oklch(0.5) darkened --color-fg-muted from oklch(0.45) to oklch(0.42) darkened --color-amber (light-mode) from oklch(0.58) to oklch(0.45) darkened --color-green (light-mode) from oklch(0.48) to oklch(0.42) darkened --color-magenta (light-mode) from oklch(0.52) to oklch(0.48) 2. CTA button contrast (was 1.06:1, now ~5.5:1) root cause was the global a { color: var(--color-amber) } rule sitting outside tailwind css layers, which beat every class utility. wrapped it in @layer base so component-level text- utilities win as expected. introduced a --color-on-green token (white in light mode, near-black in dark mode) and applied it to every green button. 3. theme toggle accessible name removed aria-label="Toggle color theme" which did not match visible text "tty: dark" / "tty: light" (label-content-name-mismatch rule). visible text is now the accessible name, augmented with an sr-only "(click to toggle color theme)" hint for screen readers. 4. generator form controls missing labels (11 inputs, 2 selects) added aria-label to every input, textarea, and select created by public/_tool/generator/generator.js based on the field label text. 5. generator output tabs misused aria-selected without role="tab" added role="tab" to each tab button and role="tablist" / aria-label="Output format" to the containing element. --- MANUAL WCAG 2.1 AA REVIEW (beyond lighthouse) --------------------------------------------- perceivable 1.1.1 non-text content ALL images have alt text (verified across 29 body imgs + favicon) 1.3.1 info and relationships semantic HTML throughout (header, nav, main, article, aside, footer) 1.3.2 meaningful sequence content reads top-to-bottom with no positioning trickery 1.4.3 contrast minimum verified AA across both light + dark themes 1.4.4 resize text layout holds at 200% zoom (tested 375px -> 1280px) 1.4.10 reflow no horizontal scroll below 320px -- all grids collapse 1.4.11 non-text contrast borders on inputs/buttons use --color-border-strong >= 3:1 vs bg 1.4.12 text spacing all prose uses relative units, scales cleanly with user CSS operable 2.1.1 keyboard every link, button, form control is tab-reachable 2.1.2 no keyboard trap no js event handlers trap focus 2.4.1 bypass blocks semantic <main> + nav landmarks allow skip 2.4.2 page titled every page has a unique descriptive <title> 2.4.3 focus order DOM order matches visual order 2.4.4 link purpose all link text describes destination 2.4.6 headings and labels h1/h2/h3 hierarchy audited per page; no skips 2.4.7 focus visible browser default focus rings preserved (no outline:0) understandable 3.1.1 language of page <html lang="en-US"> set on every page 3.2.1 on focus no context-switching on focus 3.2.2 on input form submit requires explicit button press 3.3.1 error identification lat/long tool surfaces geocode errors inline 3.3.2 labels or instructions every form control has a visible label or aria-label robust 4.1.1 parsing valid HTML5, no duplicate ids, no unclosed tags 4.1.2 name, role, value all interactive controls expose name + role + state 4.1.3 status messages latlon error uses role-implicit <p> with visible text --- KNOWN LIMITATIONS / FUTURE WORK ------------------------------- - lighthouse performance on home is 40/100 (mostly GA/GTM blocking main thread). mitigation planned: @astrojs/partytown to move analytics scripts to a web worker. does not affect accessibility. - focus states for links are the browser default. a custom visible focus ring in the terminal aesthetic would be a polish step -- not required for AA. --- HOW TO RE-AUDIT --------------- # per-page lighthouse (requires node + chromium / google-chrome) npx lighthouse@latest https://jsonld.com/<path>/ --quiet \ --chrome-flags="--headless=new --no-sandbox" \ --only-categories=accessibility,best-practices,seo \ --output=html --output-path=./report.html # full site sweep via repo-scripts (coming soon) node scripts/seo/audit.mjs --- ada.txt will be regenerated after any significant design change. the repo's scripts/seo/audit.mjs also runs on every build with its own per-page rule set for titles, meta descriptions, canonical URLs, JSON-LD validity, and internal link health.