mirror of
https://github.com/jamditis/claude-skills-journalism.git
synced 2026-09-14 16:00:34 +08:00
Joe Amditis
3e0e3a8dff
* Shorten skill and plugin descriptions, remove em-dashes Trim every SKILL.md description to <=130 characters (longest is now 130, aggregate 7,464 across all 62 skills) so the full set stays under Codex's skills-metadata budget and stops the overflow warnings on load. Descriptions stay third-person and front-load their trigger keywords so discovery is unaffected. Also shorten the 12 plugin.json and matching marketplace.json blurbs (journalism-core dropped from 1,036 to 378 chars). Replace em-dashes with commas repo-wide (2,558 lines across 228 files), following the repo's own ai-writing-detox guidance. The demonstrative em-dashes that teach the pattern in ai-writing-detox and ai-slop-detector are preserved; a quote attribution keeps an ASCII hyphen. All 175 tests pass; validate:agent-skills reports 62 skills, 0 failed. * Add changelog entry for description and em-dash cleanup * Fix review: restore table markers, attributions, photo-metadata triggers The blanket em-dash-to-comma pass corrupted three non-prose uses of the em-dash that a comma cannot represent: - Table "not applicable" cells (photo-metadata SKILL.md and reference.md, the Brazil recurso-cgu template, and the photo-metadata and accessibility-compliance docs pages) became a lone comma. Restored them to a hyphen marker: 47 markdown cells and 9 HTML cells. - Pull-quote and slide citation prefixes in the pdf-playground report and slides templates became a leading comma. Restored the ASCII attribution hyphen. - The photo-metadata description dropped its distinctive safety triggers. Reworded to keep GPS stripping, C2PA credentials, and AI-source labeling alongside IPTC/EXIF/XMP, still within 130 characters. npm test 175/175, validate:agent-skills 62/62, check:docs-css verified. * Bump plugin versions, keep visual-explainer triggers, log superjawn divergence Address the remaining review findings: - Patch-bump all 12 plugins in plugin.json and marketplace.json (and the okf-wiki and visual-explainer root skill version fields) so existing installs are offered the shortened descriptions. Update the version- alignment guard tests and the journalism-core install canary accordingly. - Rework the visual-explainer description to keep its distinctive workflow triggers (timelines, source maps, slide decks, comparison tables, recaps, plan and diff reviews) within the 130-character cap. - Record the superjawn upstream divergence: drop skill_md_parity to false for the five skills whose SKILL.md changed, add supporting_file_overrides for the touched supporting files, and document it in superjawn/CREDITS.md. All 175 node tests pass; validate:agent-skills 62/62; check:docs-css verified; longest description 130 chars, aggregate 7,472 across 62 skills. * Rewrite CCM brand em-dash rule to name commas as the replacement The repo-wide em-dash pass stripped the glyph from the CCM brand rule's example, leaving 'Prefer em dashes ()' which was both malformed and contradicted the new no-em-dash policy. Rewrite it to prefer commas. * Fix parser regression, restore leading-comma sentences, keep more triggers Fourth review round: - The repo-wide em-dash sweep rewrote a functional delimiter in autocontext/scripts/seed-from-claude-md.py: is_command_reference matched "/cmd — description" via " — ", and changing it to ", " both stopped recognizing external CLAUDE.md command docs (which still use em-dashes) and misclassified any slash-prefixed rule containing a comma. Restored the em-dash delimiter (a functional exception, like the ai-writing-detox teaching examples) and added a regression-guard test for the case the original suite never covered. - Fixed the sentence-leading commas the sweep left on wrapped lines in okf-wiki/SKILL.md, academic-writing, and the okf example photo-metadata bundle by moving the comma to the end of the preceding line. - Reworked the web-scraping and interview-prep descriptions to keep their distinctive triggers (social media, yt-dlp, CAPTCHA/403 for web-scraping; recording, consent, one-party/all-party law for interview-prep). Verification: node 175/175, autocontext pytest 26/26 (incl. new guard), validate:agent-skills 62/62. Longest description 130, aggregate 7,489. * Fix exported-quote attribution and keep academic-writing compliance triggers - The em-dash sweep turned the speaker attribution in interview-transcription's export_for_story() into a leading comma, so every publication-ready quote exported as ", Speaker Name". Restored the ASCII attribution hyphen. - Reworked the academic-writing description to keep its distinctive compliance triggers (CRediT, preregistration, Plan S, Nelson Memo, ORCID, LLM disclosure) within the 130-character cap. * Restore distinctive discovery triggers in four descriptions Codex's review keeps surfacing skills whose shortened description dropped a distinctive trigger that maps to dedicated, consequential guidance in the body (which cannot load if the skill is not selected). Restore those triggers within the 130-character cap: - one-way-door: add event schemas and CI/CD (both are explicit one-way-door categories with their own contract and deployment-risk checks). - api-hardening: name Express, FastAPI, and serverless (framework-specific hardening sections). - web-archiving: name the Wayback Machine and Archive.today (how users actually ask for this). - secure-auth: name OWASP and NIST. node 175/175, validate:agent-skills 62/62; longest description 130 chars. * Fix CRediT taxonomy and doc-span corruption, restore four more triggers The em-dash sweep corrupted two constructs where the dash carried meaning: - The CRediT taxonomy in academic-writing listed "Writing — original draft" and "Writing — review & editing" as two of its 14 roles; the comma swap made them read as four separate roles. Restored the hyphen in both role names. - Seven label/value rows in docs/superjawn/index.html (and one dir-tree annotation in visual-explainer css-patterns) put the separator at the start of the second span, rendering "Web , error string searches". Moved the separator onto the label (colon) / used a hyphen annotation. Also restored distinctive discovery triggers flagged by review: - python-pipeline: Google Sheets/Drive integration - page-monitoring: RSS feed generation - zero-build-frontend: Manifest V3 browser extensions - pdf-design: secure upload node 175/175, pytest 304/304, validate:agent-skills 62/62, check:docs-css. * Sync displayed versions, fix pitch contrast, restore three triggers - Version bumps: update the displayed plugin versions that trailed the manifest bumps: CLAUDE.md inventory (journalism-core, research-toolkit, video-toolkit, pdf-playground, superjawn) and the docs badges in docs/index.html, docs/superjawn, and docs/video-toolkit, plus the video-toolkit docs test guard. - story-pitch: the em-dash sweep flattened "background checks - through a spreadsheet" into a comma, losing the contrast in the model pitch. Restored it with an explicit "but". - Restore triggers: ai-writing-detox (writing/drafting, not just editing), brainstorming (MUST + modifying behavior), okf-wiki (builds from existing docs/notes/repo, the input flow, not "from concept files"). node 175/175, validate:agent-skills 62/62, check:docs-css. * Restore four more discovery triggers - context-engineering-fundamentals: lost-instructions / dropped-evidence - vibe-coding: name Copilot, Codex, Aider, Windsurf (not just Claude Code/Cursor) - video-transcribe: audio-only (WAV, podcasts), not just video - zero-build-frontend: Google Sheets as a database node 175/175, validate:agent-skills 62/62.
4179 lines
257 KiB
JSON
4179 lines
257 KiB
JSON
[
|
|
{
|
|
"url": "http://127.0.0.1:8765/about/",
|
|
"path": "about/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<h3 class=\"text-sm font-semibold text-clay/50 uppercase tracking-wide mb-2\">Email</h3>",
|
|
"target": [
|
|
"div:nth-child(1) > .text-clay\\/50.uppercase.tracking-wide"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<h3 class=\"text-sm font-semibold text-clay/50 uppercase tracking-wide mb-2\">Work email</h3>",
|
|
"target": [
|
|
"div:nth-child(2) > .text-clay\\/50.uppercase.tracking-wide"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-ink underline underline-offset-2\">Center for...",
|
|
"target": [
|
|
".flex-col.md\\:flex-row.justify-between > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
".text-clay\\/70.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/academic-writing/",
|
|
"path": "academic-writing/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/academic-writing\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/academic-writing\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-sem...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/accessibility-compliance/",
|
|
"path": "accessibility-compliance/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60 mb-3 font-medium\">Include:</p>",
|
|
"target": [
|
|
"div:nth-child(1) > .font-medium.mb-3.text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-accent font-bold\">WHO</span>",
|
|
"target": [
|
|
".items-start.gap-3:nth-child(1) > .font-bold.text-accent"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.68 (foreground color: #0891b2, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-accent font-bold\">WHAT</span>",
|
|
"target": [
|
|
".items-start.gap-3:nth-child(2) > .font-bold.text-accent"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.68 (foreground color: #0891b2, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-accent font-bold\">WHERE</span>",
|
|
"target": [
|
|
".items-start.gap-3:nth-child(3) > .font-bold.text-accent"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.68 (foreground color: #0891b2, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60 mb-3 font-medium\">Avoid:</p>",
|
|
"target": [
|
|
"div:nth-child(2) > .font-medium.mb-3.text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60 mb-2\">Photo: Protesters holding signs outside courthouse</p>",
|
|
"target": [
|
|
".space-y-6 > div:nth-child(1) > .mb-2.text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.89 (foreground color: #7f7d7a, background color: #f9f9f8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60 mb-2\">Photo: Headshot of interview subject</p>",
|
|
"target": [
|
|
".space-y-6 > div:nth-child(2) > .mb-2.text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.89 (foreground color: #7f7d7a, background color: #f9f9f8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60 mb-2 font-medium\">Bright palette</p>",
|
|
"target": [
|
|
"div:nth-child(1) > .text-xs.font-medium.mb-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60 mb-2 font-medium\">Categorical palette</p>",
|
|
"target": [
|
|
"div:nth-child(2) > .text-xs.font-medium.mb-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/accessibility-compliance\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub reposi...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #0891b2, background color: #ede6d4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/accessibility-compliance\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-6 py-3 rounded-full fo...",
|
|
"target": [
|
|
".bg-white"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.68 (foreground color: #0891b2, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #0891b2, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".gap-6.items-center.flex > .hover\\:text-ink.transition-colors[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".gap-6.items-center.flex > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/ai-writing-detox/",
|
|
"path": "ai-writing-detox/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<span class=\"banned-word\">delve</span>",
|
|
"target": [
|
|
"tr:nth-child(1) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">realm</span>",
|
|
"target": [
|
|
"tr:nth-child(2) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">tapestry</span>",
|
|
"target": [
|
|
"tr:nth-child(3) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">landscape</span>",
|
|
"target": [
|
|
"tr:nth-child(4) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">leverage</span>",
|
|
"target": [
|
|
"tr:nth-child(5) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">robust</span>",
|
|
"target": [
|
|
"tr:nth-child(6) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">seamless</span>",
|
|
"target": [
|
|
"tr:nth-child(7) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">comprehensive</span>",
|
|
"target": [
|
|
"tr:nth-child(8) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">transformative</span>",
|
|
"target": [
|
|
"tr:nth-child(9) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"banned-word\">innovative</span>",
|
|
"target": [
|
|
"tr:nth-child(10) > td:nth-child(1) > .banned-word"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #ef4444, background color: #fef2f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">utilize</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(1) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">facilitate</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(2) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">implement</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(3) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">functionality</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(4) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">methodology</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(5) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">in order to</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(6) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">due to the fact that</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(7) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">at this point in time</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(8) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">a large number of</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(9) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-clay/60\">has the ability to</span>",
|
|
"target": [
|
|
".py-2.justify-between.border-mist\\/20:nth-child(10) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">\"delve\"</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(1) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">\"landscape\"</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(2) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">\"crucial\"</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(3) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">\"robust\"</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(4) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">\"leverage\"</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(5) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">\"comprehensive\"</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(6) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">Starting \"So,\"</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(7) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-red-600\">\"rich\" (modifier)</code>",
|
|
"target": [
|
|
".bg-mist\\/20.px-4.text-center:nth-child(8) > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #dc2626, background color: #f3f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-green-600 mb-3 font-medium\">Right (sentence case)</p>",
|
|
"target": [
|
|
".text-green-600"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.29 (foreground color: #16a34a, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".gap-6.items-center.flex > .hover\\:text-ink.transition-colors[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".gap-6.items-center.flex > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/api-hardening/",
|
|
"path": "api-hardening/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/api-hardening\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.87 (foreground color: #dc2626, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.87 (foreground color: #dc2626, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/autocontext/",
|
|
"path": "autocontext/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<div class=\"text-sm text-mist\">Built by <a href=\"https://github.com/jamditis\" class=\"text-accent hover:underline\">Joe Amditis</a></div>",
|
|
"target": [
|
|
".flex-col.md\\:flex-row.justify-between > .text-mist.text-sm:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" class=\"hover:text-ink transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".gap-6.items-center.text-mist > .hover\\:text-ink.transition-colors:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:text-ink transition-colors\">All skills</a>",
|
|
"target": [
|
|
".gap-6.items-center.text-mist > .hover\\:text-ink.transition-colors[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "scrollable-region-focusable",
|
|
"impact": "serious",
|
|
"help": "Scrollable region must have keyboard access",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/scrollable-region-focusable?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<pre><code>claude plugin marketplace add https://github.com/jamditis/claude-skills-journalism</code></pre>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(1) > pre"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element should have focusable content\n Element should be focusable"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/content-access/",
|
|
"path": "content-access/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/content-access\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/content-access\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-semib...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/crisis-communications/",
|
|
"path": "crisis-communications/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<h3 class=\"font-semibold text-sm text-clay/60 mb-2\">Source check (1 min)</h3>",
|
|
"target": [
|
|
"div:nth-child(1) > .text-clay\\/60.mb-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<h3 class=\"font-semibold text-sm text-clay/60 mb-2\">Corroboration (2 min)</h3>",
|
|
"target": [
|
|
"div:nth-child(2) > .text-clay\\/60.mb-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<h3 class=\"font-semibold text-sm text-clay/60 mb-2\">Red flags (1 min)</h3>",
|
|
"target": [
|
|
"div:nth-child(3) > .text-clay\\/60.mb-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<h3 class=\"font-semibold text-sm text-clay/60 mb-2\">Decision (1 min)</h3>",
|
|
"target": [
|
|
"div:nth-child(4) > .text-clay\\/60.mb-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/crisis-communications\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repositor...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #ea580c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/crisis-communications\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full fon...",
|
|
"target": [
|
|
".px-5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #ea580c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".hover\\:text-ink.text-clay\\/60[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".hover\\:text-ink.text-clay\\/60[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/data-journalism/",
|
|
"path": "data-journalism/index.html",
|
|
"violationCount": 1,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 1,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"#workflow\" class=\"inline-flex items-center gap-2 bg-white text-accent font-semibold px-6 py-3 rounded-lg hover:bg-white/90 transition-colors\">",
|
|
"target": [
|
|
".bg-white"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">Based on Philip Meyer's precision journalism framework, adapted for modern newsrooms.</p>",
|
|
"target": [
|
|
".text-lg.max-w-2xl.mx-auto"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Data.gov</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(1) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Census</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(1) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">BLS</span>",
|
|
"target": [
|
|
".text-\\[10px\\].px-2.rounded:nth-child(3)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">pandas</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(2) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">rapidfuzz</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(2) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">cpi</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(3) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">wbdata</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(3) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Plotly</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(4) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Datawrapper</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(4) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">geopandas</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(5) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">lonboard</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(5) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Ethics</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(6) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Accuracy</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(6) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-lg text-mist\">The skill includes Python patterns you can use immediately.</p>",
|
|
"target": [
|
|
".mb-12 > .text-lg.text-mist"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm mb-4\">",
|
|
"target": [
|
|
".max-w-6xl.text-center.mx-auto > .text-sm.text-mist.mb-4"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis\" class=\"text-accent hover:underline\">Joe Amditis</a>",
|
|
"target": [
|
|
"a[href$=\"jamditis\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" class=\"text-accent hover:underline\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".hover\\:underline:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist/60 text-xs\">Part of <a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a> • MIT License</p>",
|
|
"target": [
|
|
".text-mist\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a>",
|
|
"target": [
|
|
".hover\\:underline[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/digital-archive/",
|
|
"path": "digital-archive/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<h3 class=\"font-semibold text-sm text-clay/60 mb-2\">Content relationships</h3>",
|
|
"target": [
|
|
".md\\:grid-cols-3 > div:nth-child(1) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<h3 class=\"font-semibold text-sm text-clay/60 mb-2\">Historical relationships</h3>",
|
|
"target": [
|
|
".md\\:grid-cols-3 > div:nth-child(2) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<h3 class=\"font-semibold text-sm text-clay/60 mb-2\">Structural relationships</h3>",
|
|
"target": [
|
|
"div:nth-child(3) > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/digital-archive\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/digital-archive\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-semi...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".hover\\:text-ink.text-clay\\/60[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".hover\\:text-ink.text-clay\\/60[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/editorial-workflow/",
|
|
"path": "editorial-workflow/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/editorial-workflow\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/editorial-workflow\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-s...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/electron-dev/",
|
|
"path": "electron-dev/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/fact-check-workflow/",
|
|
"path": "fact-check-workflow/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<span class=\"bg-accent/10 text-accent font-medium px-3 py-1.5 rounded-full\">1. Identify claim</span>",
|
|
"target": [
|
|
".bg-accent\\/10.py-1\\.5.font-medium:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #0d9488, background color: #e7f4f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"bg-accent/10 text-accent font-medium px-3 py-1.5 rounded-full\">2. Research</span>",
|
|
"target": [
|
|
".bg-accent\\/10.py-1\\.5.font-medium:nth-child(3)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #0d9488, background color: #e7f4f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"bg-accent/10 text-accent font-medium px-3 py-1.5 rounded-full\">3. Gather evidence</span>",
|
|
"target": [
|
|
".bg-accent\\/10.py-1\\.5.font-medium:nth-child(5)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #0d9488, background color: #e7f4f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"bg-accent/10 text-accent font-medium px-3 py-1.5 rounded-full\">4. Contact sources</span>",
|
|
"target": [
|
|
".bg-accent\\/10.py-1\\.5.font-medium:nth-child(7)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #0d9488, background color: #e7f4f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"bg-accent/10 text-accent font-medium px-3 py-1.5 rounded-full\">5. Rate</span>",
|
|
"target": [
|
|
".bg-accent\\/10.py-1\\.5.font-medium:nth-child(9)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #0d9488, background color: #e7f4f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"bg-accent/10 text-accent font-medium px-3 py-1.5 rounded-full\">6. Document</span>",
|
|
"target": [
|
|
".bg-accent\\/10.py-1\\.5.font-medium:nth-child(11)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #0d9488, background color: #e7f4f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"bg-accent/10 text-accent font-medium px-3 py-1.5 rounded-full\">7. Publish/correct</span>",
|
|
"target": [
|
|
".bg-accent\\/10.py-1\\.5.font-medium:nth-child(13)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #0d9488, background color: #e7f4f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/fact-check-workflow\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository<...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/fact-check-workflow\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/foia-requests/",
|
|
"path": "foia-requests/index.html",
|
|
"violationCount": 1,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 1,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">\n From drafting requests to filing appeals. Everything you need to obtain government records.\n </p>",
|
|
"target": [
|
|
".py-24:nth-child(1) > .max-w-6xl.mx-auto > .mb-16.text-center > .max-w-2xl.mx-auto.text-lg"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">\n Every state has public records laws with different deadlines, exemptions, and appeal processes. The skill includes the complete ...",
|
|
"target": [
|
|
".py-24:nth-child(4) > .max-w-6xl.mx-auto > .mb-16.text-center > .max-w-2xl.mx-auto.text-lg"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-5xl font-display font-black text-accent mb-2\">90</p>",
|
|
"target": [
|
|
".text-center.bg-white\\/5.p-6:nth-child(1) > .text-5xl.font-black.text-accent"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.92 (foreground color: #7c3aed, background color: #1e1e1e, font size: 36.0pt (48px), font weight: bold). Expected contrast ratio of 3:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-5xl font-display font-black text-accent mb-2\">45</p>",
|
|
"target": [
|
|
".text-center.bg-white\\/5.p-6:nth-child(2) > .text-5xl.font-black.text-accent"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.92 (foreground color: #7c3aed, background color: #1e1e1e, font size: 36.0pt (48px), font weight: bold). Expected contrast ratio of 3:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-5xl font-display font-black text-accent mb-2\">30</p>",
|
|
"target": [
|
|
".text-center.bg-white\\/5.p-6:nth-child(3) > .text-5xl.font-black.text-accent"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.92 (foreground color: #7c3aed, background color: #1e1e1e, font size: 36.0pt (48px), font weight: bold). Expected contrast ratio of 3:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm mb-4\">",
|
|
"target": [
|
|
".text-mist.mb-4.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist/60 text-xs\">\n Part of <a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a> • MIT License\n </p>",
|
|
"target": [
|
|
".text-mist\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a>",
|
|
"target": [
|
|
".hover\\:underline[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/free-apis-catalog/",
|
|
"path": "free-apis-catalog/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"#categories\" class=\"inline-flex items-center gap-2 bg-white text-accent font-semibold px-6 py-3 rounded-lg hover:bg-white/90 transition-colors\">",
|
|
"target": [
|
|
".bg-white"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">APIs grouped by domain. Each category includes auth requirements, rate limits, and example endpoints.</p>",
|
|
"target": [
|
|
"#categories > .max-w-6xl.mx-auto > .mb-16.text-center > .text-lg.max-w-2xl.mx-auto"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">CoinGecko</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(1) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Alpha Vantage</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(1) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">ExchangeRate</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(1) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(3)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">NewsAPI</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(2) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">GNews</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(2) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Guardian</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(2) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(3)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Open-Meteo</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(3) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">OpenWeather</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(3) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">WeatherAPI</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(3) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(3)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">ESPN</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(4) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Football-Data</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(4) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">balldontlie</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(4) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(3)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Hugging Face</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(5) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">LibreTranslate</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(5) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">TMDB</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(6) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">RAWG</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(6) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] bg-accent/10 text-accent px-2 py-1 rounded font-semibold\">Open Library</span>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(6) > .flex-wrap.gap-2.flex > .text-\\[10px\\].px-2.rounded:nth-child(3)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #059669, background color: #e6f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">Combine two or three APIs from the catalog to build something useful in a single session.</p>",
|
|
"target": [
|
|
".py-24:nth-child(3) > .max-w-6xl.mx-auto > .mb-16.text-center > .text-lg.max-w-2xl.mx-auto"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm mb-2\">\n Based on <a href=\"https://x.com/qwerty_ytrevvq\" class=\"text-accent hover:underline\">@qwerty</a>'s free APIs catalog (Mar 2026)\n </...",
|
|
"target": [
|
|
".max-w-6xl.text-center.mx-auto > .mb-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://x.com/qwerty_ytrevvq\" class=\"text-accent hover:underline\">@qwerty</a>",
|
|
"target": [
|
|
"a[href$=\"qwerty_ytrevvq\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm mb-4\">",
|
|
"target": [
|
|
".max-w-6xl.text-center.mx-auto > p:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis\" class=\"text-accent hover:underline\">Joe Amditis</a>",
|
|
"target": [
|
|
"a[href$=\"jamditis\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" class=\"text-accent hover:underline\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".hover\\:underline:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist/60 text-xs\">Part of <a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a> • MIT License</p>",
|
|
"target": [
|
|
".text-mist\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a>",
|
|
"target": [
|
|
".hover\\:underline[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-in-text-block",
|
|
"impact": "serious",
|
|
"help": "Links must be distinguishable without relying on color",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-in-text-block?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://x.com/qwerty_ytrevvq\" class=\"text-accent hover:underline\">@qwerty</a>",
|
|
"target": [
|
|
"a[href$=\"qwerty_ytrevvq\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.41:1 with the surrounding text. (Minimum contrast is 3:1, link text: #059669, surrounding text: #6b6b6b)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/",
|
|
"path": "index.html",
|
|
"violationCount": 1,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 1,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<h6 class=\"text-[10px] font-bold tracking-[0.5em] text-canvas/20 uppercase\">Resources</h6>",
|
|
"target": [
|
|
".space-y-6:nth-child(1) > h6"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #3e3c39, background color: #121212, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<h6 class=\"text-[10px] font-bold tracking-[0.5em] text-canvas/20 uppercase\">Related</h6>",
|
|
"target": [
|
|
".space-y-6:nth-child(2) > h6"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.7 (foreground color: #3e3c39, background color: #121212, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<div class=\"text-[10px] font-bold tracking-[0.3em] text-canvas/30 uppercase\">\n <a href=\"https://github.com/jamditis\" class=\"hover:text-canvas transition-colors\">Joe Amditis</a>\n ...",
|
|
"target": [
|
|
".text-canvas\\/30"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.39 (foreground color: #54524c, background color: #121212, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis\" class=\"hover:text-canvas transition-colors\">Joe Amditis</a>",
|
|
"target": [
|
|
".hover\\:text-canvas"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.39 (foreground color: #54524c, background color: #121212, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://venmo.com/jamditis\" class=\"s-venmo\" target=\"_blank\" rel=\"noopener\">",
|
|
"target": [
|
|
".s-venmo"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #ffffff, background color: #008cff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/interview-prep/",
|
|
"path": "interview-prep/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/interview-prep\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/interview-prep\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-semib...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/interview-transcription/",
|
|
"path": "interview-transcription/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/interview-transcription\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub reposit...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/interview-transcription\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full f...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/mobile-debugging/",
|
|
"path": "mobile-debugging/index.html",
|
|
"violationCount": 3,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 3,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "scrollable-region-focusable",
|
|
"impact": "serious",
|
|
"help": "Scrollable region must have keyboard access",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/scrollable-region-focusable?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<div class=\"bg-ink rounded-xl p-5 font-mono text-sm overflow-x-auto\">",
|
|
"target": [
|
|
".mb-12:nth-child(3) > .bg-ink.font-mono.overflow-x-auto"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element should have focusable content\n Element should be focusable"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/newsletter-publishing/",
|
|
"path": "newsletter-publishing/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/newsletter-publishing\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repositor...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.55 (foreground color: #d97706, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/newsletter-publishing\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full fon...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.18 (foreground color: #d97706, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.55 (foreground color: #d97706, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/newsroom-style/",
|
|
"path": "newsroom-style/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/newsroom-style\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/newsroom-style\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-semib...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/one-way-door/",
|
|
"path": "one-way-door/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60 mt-3\">",
|
|
"target": [
|
|
".mt-3"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/one-way-door\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">skill directory</a>",
|
|
"target": [
|
|
".mt-3 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #b45309, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/one-way-door\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #b45309, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #b45309, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink.transition-colors:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/page-monitoring/",
|
|
"path": "page-monitoring/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/page-monitoring\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/page-monitoring\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-semi...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/pdf-design/",
|
|
"path": "pdf-design/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/pdf-design\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.77 (foreground color: #e11d48, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.77 (foreground color: #e11d48, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/pdf-playground/",
|
|
"path": "pdf-playground/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">\n From multi-page funding proposals to event flyers. Each template is designed for professional output.\n </p>",
|
|
"target": [
|
|
".py-24:nth-child(1) > .max-w-6xl.mx-auto > .mb-16.text-center > .max-w-2xl.text-lg.mx-auto"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-white/40 text-xs mt-2\">Demo mode, press \"Start demo\" to see the full workflow</p>",
|
|
"target": [
|
|
".text-white\\/40"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.83 (foreground color: #767676, background color: #1a1a1a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-center text-mist text-lg mb-16 max-w-2xl mx-auto\">",
|
|
"target": [
|
|
".max-w-2xl.text-lg.mb-16"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://docs.anthropic.com/en/docs/claude-code/overview\" class=\"text-accent hover:underline\">Claude Code</a>",
|
|
"target": [
|
|
"strong > .hover\\:underline"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.06 (foreground color: #ca3553, background color: #ede6d4, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code>claude --version</code>",
|
|
"target": [
|
|
".max-w-2xl.text-lg.mb-16 > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.78 (foreground color: #6b6b6b, background color: #e0d9c8, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://docs.anthropic.com/en/docs/claude-code/overview\" class=\"text-accent hover:underline\">install Claude Code first</a>",
|
|
"target": [
|
|
".max-w-2xl.text-lg.mb-16 > .hover\\:underline"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.06 (foreground color: #ca3553, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-mist text-sm\">March 2026</span>",
|
|
"target": [
|
|
".opacity-80 > .gap-3.mb-4.items-center > .text-mist.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #888887, background color: #fbfaf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist mb-6\">",
|
|
"target": [
|
|
".opacity-80 > .mb-6.text-mist"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #888887, background color: #fbfaf6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code>grid-template-rows: auto 1fr auto</code>",
|
|
"target": [
|
|
".mb-6.text-mist > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.19 (foreground color: #868585, background color: #f0efeb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"bg-ink/20 text-ink text-xs font-bold px-3 py-1 rounded-full\">v1.1.1</span>",
|
|
"target": [
|
|
".opacity-60.p-8.feature-card > .gap-3.mb-4.items-center > .bg-ink\\/20.text-ink.px-3"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63625f, background color: #dcd9d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-mist text-sm\">February 2026</span>",
|
|
"target": [
|
|
".opacity-60.p-8.feature-card > .gap-3.mb-4.items-center > .text-mist.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a29f, background color: #f8f5ee, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm\">\n Live preview with tweakable controls for colors, fonts, and spacing. Brand configuration via <code>.claude/pdf-playground.local.md</code>. Six doc...",
|
|
"target": [
|
|
".opacity-60.p-8.feature-card > .text-mist"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #a3a29f, background color: #f8f5ee, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code>.claude/pdf-playground.local.md</code>",
|
|
"target": [
|
|
".opacity-60.p-8.feature-card > .text-mist > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #a09f9c, background color: #efede5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm mb-4\">",
|
|
"target": [
|
|
".max-w-6xl.text-center.mx-auto > .text-mist.mb-4"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis\" class=\"text-accent hover:underline\">Joe Amditis</a>",
|
|
"target": [
|
|
"a[href$=\"jamditis\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.06 (foreground color: #ca3553, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" class=\"text-accent hover:underline\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".hover\\:underline:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.06 (foreground color: #ca3553, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist/60 text-xs\">\n Part of <a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a> • MIT License\n </p>",
|
|
"target": [
|
|
".text-mist\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a>",
|
|
"target": [
|
|
".hover\\:underline[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-in-text-block",
|
|
"impact": "serious",
|
|
"help": "Links must be distinguishable without relying on color",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-in-text-block?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://docs.anthropic.com/en/docs/claude-code/overview\" class=\"text-accent hover:underline\">install Claude Code first</a>",
|
|
"target": [
|
|
".max-w-2xl.text-lg.mb-16 > .hover\\:underline"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.05:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ca3553, surrounding text: #6b6b6b)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/persistent-sessions/",
|
|
"path": "persistent-sessions/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<span class=\"text-white/40 text-xs ml-2\">dashboard.yourdomain.com, terminal</span>",
|
|
"target": [
|
|
".mb-6.terminal-bar > .terminal-titlebar > .text-white\\/40.ml-2.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #818181, background color: #2d2d2d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-white/40 text-xs ml-2\">dashboard.yourdomain.com, main (tmux)</span>",
|
|
"target": [
|
|
".mb-12:nth-child(2) > .terminal-bar > .terminal-titlebar > .text-white\\/40.ml-2.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #818181, background color: #2d2d2d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-white/40 text-xs ml-2\">~/.tmux.conf</span>",
|
|
"target": [
|
|
".mb-8.gap-4.flex:nth-child(2) > .flex-1 > .terminal-bar > .terminal-titlebar > .text-white\\/40.ml-2.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #818181, background color: #2d2d2d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm mt-2\">Full config available in the <a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/persistent-sessions\" class=\"text-accent hover:text-accentDar...",
|
|
"target": [
|
|
".flex-1 > .mt-2.text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/persistent-sessions\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository<...",
|
|
"target": [
|
|
".mt-2.text-clay\\/60.text-sm > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-white/40 text-xs ml-2\">~/.bashrc</span>",
|
|
"target": [
|
|
".mb-8.gap-4.flex:nth-child(3) > .flex-1 > .terminal-bar > .terminal-titlebar > .text-white\\/40.ml-2.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #818181, background color: #2d2d2d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-white/40 text-xs ml-2\">/etc/cockpit/cockpit.conf</span>",
|
|
"target": [
|
|
".mb-8.gap-4.flex:nth-child(4) > .flex-1 > .terminal-bar > .terminal-titlebar > .text-white\\/40.ml-2.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #818181, background color: #2d2d2d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-white/40 text-xs ml-2\">claude-scheduler.py</span>",
|
|
"target": [
|
|
".mb-12:nth-child(6) > .terminal-bar > .terminal-titlebar > .text-white\\/40.ml-2.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #818181, background color: #2d2d2d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm mt-2\">The <code>pane_current_command</code> tmux format string returns the name of the running process, no need to parse <code>ps aux</code>.</p>",
|
|
"target": [
|
|
".mb-12:nth-child(6) > .mt-2.text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code>pane_current_command</code>",
|
|
"target": [
|
|
".mt-2.text-clay\\/60.text-sm > code:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code>ps aux</code>",
|
|
"target": [
|
|
".mt-2.text-clay\\/60.text-sm > code:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-white/40 text-xs ml-2\">~/.tmux.conf</span>",
|
|
"target": [
|
|
".mb-12:nth-child(7) > .terminal-bar > .terminal-titlebar > .text-white\\/40.ml-2.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #818181, background color: #2d2d2d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm mt-3 mb-4\">The <code>monitor-silence 20</code> value is seconds. Bump it up if it fires too often during normal processing pauses.</p>",
|
|
"target": [
|
|
".mt-3.text-clay\\/60.mb-4"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code>monitor-silence 20</code>",
|
|
"target": [
|
|
".mt-3.text-clay\\/60.mb-4 > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/persistent-sessions\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60.text-sm > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".hover\\:text-ink.text-clay\\/60[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".hover\\:text-ink.text-clay\\/60[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/project-memory/",
|
|
"path": "project-memory/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/project-retrospective/",
|
|
"path": "project-retrospective/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Research projects</p>",
|
|
"target": [
|
|
".p-4.text-center:nth-child(1) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Conferences, workshops</p>",
|
|
"target": [
|
|
".p-4.text-center:nth-child(2) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Newsletters, podcasts</p>",
|
|
"target": [
|
|
".p-4.text-center:nth-child(3) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Newsroom software</p>",
|
|
"target": [
|
|
".p-4.text-center:nth-child(4) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Name, dates, status, author</p>",
|
|
"target": [
|
|
".p-8:nth-child(1) > .space-y-5 > .gap-4.items-start.flex:nth-child(1) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">What it did, impact, why it matters</p>",
|
|
"target": [
|
|
".p-8:nth-child(1) > .space-y-5 > .gap-4.items-start.flex:nth-child(2) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Technical wins, process wins</p>",
|
|
"target": [
|
|
".p-8:nth-child(1) > .space-y-5 > .gap-4.items-start.flex:nth-child(3) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Critical failures, technical debt, external factors</p>",
|
|
"target": [
|
|
".p-8:nth-child(1) > .space-y-5 > .gap-4.items-start.flex:nth-child(4) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">What you thought vs. what was needed</p>",
|
|
"target": [
|
|
".p-8:nth-child(2) > .space-y-5 > .gap-4.items-start.flex:nth-child(1) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">If continuing, if starting fresh, tech stack verdict</p>",
|
|
"target": [
|
|
".p-8:nth-child(2) > .space-y-5 > .gap-4.items-start.flex:nth-child(2) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Components others can use</p>",
|
|
"target": [
|
|
".p-8:nth-child(2) > .space-y-5 > .gap-4.items-start.flex:nth-child(3) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Unanswered questions worth investigating</p>",
|
|
"target": [
|
|
".p-8:nth-child(2) > .space-y-5 > .gap-4.items-start.flex:nth-child(4) > div > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-sm font-medium text-clay/60\">The gap between assumption and reality</span>",
|
|
"target": [
|
|
".font-medium.text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.82 (foreground color: #7c7a77, background color: #f3f2f0, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<strong class=\"text-accent\">The dashboard has 2 monthly active users; the Slack bot prototype we built in a day has 47.</strong>",
|
|
"target": [
|
|
".leading-relaxed.text-clay\\/80.text-lg > strong"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.18 (foreground color: #d97706, background color: #ffffff, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Investigations, data journalism</p>",
|
|
"target": [
|
|
".p-6.feature-card.rounded-2xl:nth-child(1) > .mb-4.gap-4.items-center > div:nth-child(2) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Conferences, workshops</p>",
|
|
"target": [
|
|
".p-6.feature-card.rounded-2xl:nth-child(2) > .mb-4.gap-4.items-center > div:nth-child(2) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Newsletters, podcasts</p>",
|
|
"target": [
|
|
".p-6.feature-card.rounded-2xl:nth-child(3) > .mb-4.gap-4.items-center > div:nth-child(2) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">Newsroom software, AI tools</p>",
|
|
"target": [
|
|
".p-6.feature-card.rounded-2xl:nth-child(4) > .mb-4.gap-4.items-center > div:nth-child(2) > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/project-retrospective\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repositor...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.55 (foreground color: #d97706, background color: #ede6d4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/project-retrospective\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-6 py-3 rounded-full font-...",
|
|
"target": [
|
|
".hover\\:bg-white\\/95"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.18 (foreground color: #d97706, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60.text-sm > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.55 (foreground color: #d97706, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".gap-6.items-center.flex > .hover\\:text-ink.transition-colors[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".gap-6.items-center.flex > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/python-pipeline/",
|
|
"path": "python-pipeline/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/secure-auth/",
|
|
"path": "secure-auth/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/secure-auth\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.87 (foreground color: #dc2626, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.87 (foreground color: #dc2626, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink.transition-colors:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/security-checklist/",
|
|
"path": "security-checklist/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/security-checklist\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.87 (foreground color: #dc2626, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.87 (foreground color: #dc2626, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink.transition-colors:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/social-media-intelligence/",
|
|
"path": "social-media-intelligence/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/social-media-intelligence\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repos...",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/social-media-intelligence\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/source-verification/",
|
|
"path": "source-verification/index.html",
|
|
"violationCount": 1,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 1,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">\n A simple, effective framework for evaluating information before sharing or using it.\n </p>",
|
|
"target": [
|
|
"#sift > .max-w-6xl.mx-auto > .mb-16.text-center > .text-lg.max-w-2xl.mx-auto"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">\n The skill includes references to these trusted verification resources.\n </p>",
|
|
"target": [
|
|
".py-24:nth-child(3) > .max-w-6xl.mx-auto > .mb-16.text-center > .text-lg.max-w-2xl.mx-auto"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm mb-4\">",
|
|
"target": [
|
|
"p:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist/60 text-xs\">\n Part of <a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a> • MIT License\n </p>",
|
|
"target": [
|
|
".text-mist\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a>",
|
|
"target": [
|
|
".hover\\:underline[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/story-pitch/",
|
|
"path": "story-pitch/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/story-pitch\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/story-pitch\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-semibold...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/superjawn/",
|
|
"path": "superjawn/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<div class=\"text-sm text-mist\">Built by <a href=\"https://github.com/jamditis\" class=\"text-accent hover:underline\">Joe Amditis</a></div>",
|
|
"target": [
|
|
".flex-col > .text-sm.text-mist:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/superjawn\" class=\"hover:text-ink transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".gap-6.text-sm.items-center > .hover\\:text-ink.transition-colors:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:text-ink transition-colors\">All skills</a>",
|
|
"target": [
|
|
".gap-6.text-sm.items-center > .hover\\:text-ink.transition-colors[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "scrollable-region-focusable",
|
|
"impact": "serious",
|
|
"help": "Scrollable region must have keyboard access",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/scrollable-region-focusable?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<pre><code>claude plugin marketplace add https://github.com/jamditis/claude-skills-journalism</code></pre>",
|
|
"target": [
|
|
".p-8.feature-card.rounded-xl:nth-child(1) > pre"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element should have focusable content\n Element should be focusable"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/template-selector/",
|
|
"path": "template-selector/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink.transition-colors:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/test-first-bugs/",
|
|
"path": "test-first-bugs/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink.transition-colors:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/vibe-coding/",
|
|
"path": "vibe-coding/index.html",
|
|
"violationCount": 1,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 1,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">\n The methodology that makes AI-assisted development actually work.\n </p>",
|
|
"target": [
|
|
".py-24:nth-child(1) > .max-w-6xl.mx-auto > .mb-16.text-center > .max-w-2xl.text-lg.text-mist"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<code class=\"text-accent\">git reset --hard HEAD</code>",
|
|
"target": [
|
|
".text-white\\/70.mb-4.text-sm > code"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.68 (foreground color: #4f46e5, background color: #1d1d1d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-lg text-mist max-w-2xl mx-auto\">\n Get more out of your AI coding assistants with these techniques.\n </p>",
|
|
"target": [
|
|
".py-24:nth-child(4) > .max-w-6xl.mx-auto > .mb-16.text-center > .max-w-2xl.text-lg.text-mist"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist text-sm mb-4\">",
|
|
"target": [
|
|
".text-mist.mb-4.text-sm"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b6b6b, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-mist/60 text-xs\">\n Part of <a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a> • MIT License\n </p>",
|
|
"target": [
|
|
".text-mist\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"hover:underline\">Claude Skills for Journalism</a>",
|
|
"target": [
|
|
".hover\\:underline[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #9f9c95, background color: #ede6d4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/visual-explainer/",
|
|
"path": "visual-explainer/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/visual-explainer\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #3cc4b8, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/nicobailon/visual-explainer\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">nicobailon/visual-explainer</a>",
|
|
"target": [
|
|
".mb-12:nth-child(8) > p > .hover\\:text-accentDark.underline.underline-offset-2:nth-child(1)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #3cc4b8, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/anthropics/skills\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">Anthropic's frontend-design skill</a>",
|
|
"target": [
|
|
".hover\\:text-accentDark.underline.underline-offset-2:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #3cc4b8, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/visual-explainer\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-sem...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.14 (foreground color: #3cc4b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #3cc4b8, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/web-archiving/",
|
|
"path": "web-archiving/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/web-archiving\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repository</a>",
|
|
"target": [
|
|
".mt-4 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/web-archiving\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full font-semibo...",
|
|
"target": [
|
|
".py-2\\.5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.02 (foreground color: #059669, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/web-scraping/",
|
|
"path": "web-scraping/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/web-ui-best-practices/",
|
|
"path": "web-ui-best-practices/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Every action feels instant</p>",
|
|
"target": [
|
|
"a[href$=\"#speed\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">UI explains itself</p>",
|
|
"target": [
|
|
"a[href$=\"#no-tours\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Short slugs, no UUIDs</p>",
|
|
"target": [
|
|
"a[href$=\"#urls\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Resume where you left off</p>",
|
|
"target": [
|
|
"a[href$=\"#state\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Plus shades of gray</p>",
|
|
"target": [
|
|
"a[href$=\"#color\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Hidden until scrolling</p>",
|
|
"target": [
|
|
"a[href$=\"#scrollbars\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Anywhere in 3 clicks</p>",
|
|
"target": [
|
|
"a[href$=\"#navigation\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">SVG logo, colors, fonts</p>",
|
|
"target": [
|
|
"a[href$=\"#brand\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Layout shape, not spinners</p>",
|
|
"target": [
|
|
"a[href$=\"#skeleton\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Copy codes, keys, URLs</p>",
|
|
"target": [
|
|
"a[href$=\"#clipboard\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">44px minimum touch area</p>",
|
|
"target": [
|
|
"a[href$=\"#hit-targets\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">One click, no guilt trips</p>",
|
|
"target": [
|
|
"a[href$=\"#cancel\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Command palette for power users</p>",
|
|
"target": [
|
|
"a[href$=\"#cmdk\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Only on icon-only buttons</p>",
|
|
"target": [
|
|
"a[href$=\"#tooltips\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">7 words max per sentence</p>",
|
|
"target": [
|
|
"a[href$=\"#copy\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Visual weight, not pixels</p>",
|
|
"target": [
|
|
"a[href$=\"#optical\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">F-pattern scan optimized</p>",
|
|
"target": [
|
|
"a[href$=\"#ltr\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Auto-save, undo, version history</p>",
|
|
"target": [
|
|
"a[href$=\"#reassurance\"] > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">\"Create your first project\"</p>",
|
|
"target": [
|
|
".bg-canvas\\/50.rounded-lg.p-4:nth-child(1) > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.85 (foreground color: #7d7a74, background color: #f6f3ea, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Show features when relevant</p>",
|
|
"target": [
|
|
".bg-canvas\\/50.rounded-lg.p-4:nth-child(2) > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.85 (foreground color: #7d7a74, background color: #f6f3ea, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Disappear after first use</p>",
|
|
"target": [
|
|
".bg-canvas\\/50.rounded-lg.p-4:nth-child(3) > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.85 (foreground color: #7d7a74, background color: #f6f3ea, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-xs text-clay/60\">Work without configuration</p>",
|
|
"target": [
|
|
".bg-canvas\\/50.rounded-lg.p-4:nth-child(4) > .text-clay\\/60.text-xs"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.85 (foreground color: #7d7a74, background color: #f6f3ea, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] text-clay/50\">Primary</span>",
|
|
"target": [
|
|
".text-center:nth-child(1) > .text-\\[10px\\].text-clay\\/50"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] text-clay/50\">Accent</span>",
|
|
"target": [
|
|
".text-center:nth-child(2) > .text-\\[10px\\].text-clay\\/50"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] text-clay/50\">Danger</span>",
|
|
"target": [
|
|
".text-center:nth-child(3) > .text-\\[10px\\].text-clay\\/50"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] text-clay/50\">Gray 100</span>",
|
|
"target": [
|
|
".text-center:nth-child(4) > .text-\\[10px\\].text-clay\\/50"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] text-clay/50\">Gray 400</span>",
|
|
"target": [
|
|
".text-center:nth-child(5) > .text-\\[10px\\].text-clay\\/50"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<span class=\"text-[10px] text-clay/50\">Gray 900</span>",
|
|
"target": [
|
|
".text-center:nth-child(6) > .text-\\[10px\\].text-clay\\/50"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #969593, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60\">If you reach for a 4th color, you're compensating for weak layout.</p>",
|
|
"target": [
|
|
"#color > .p-6.bg-white.border-mist\\/30 > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-sm text-clay/60 mt-4\">Buttons are verbs: \"Save\", \"Delete\", \"Send\", not \"Submit\", \"OK\", \"Confirm\". Sentence case everywhere, never Title Case.</p>",
|
|
"target": [
|
|
".mt-4.text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #817f7d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/web-ui-best-practices\" class=\"text-accent hover:text-accentDark underline underline-offset-2\" target=\"_blank\">GitHub repositor...",
|
|
"target": [
|
|
".mt-4.text-clay\\/70 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism/tree/master/web-ui-best-practices\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-white text-accent px-5 py-2.5 rounded-full fon...",
|
|
"target": [
|
|
".px-5"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Center for Cooperative Media</a>",
|
|
"target": [
|
|
".text-clay\\/60 > .hover\\:text-accentDark.underline.underline-offset-2"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #0d9488, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".gap-6 > .hover\\:text-ink.transition-colors[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".gap-6 > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"url": "http://127.0.0.1:8765/zero-build-frontend/",
|
|
"path": "zero-build-frontend/index.html",
|
|
"violationCount": 2,
|
|
"byImpact": {
|
|
"critical": 0,
|
|
"serious": 2,
|
|
"moderate": 0,
|
|
"minor": 0
|
|
},
|
|
"violations": [
|
|
{
|
|
"id": "color-contrast",
|
|
"impact": "serious",
|
|
"help": "Elements must meet minimum color contrast ratio thresholds",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<p class=\"text-clay/60 text-sm\">\n Built by <a href=\"https://centerforcooperativemedia.org\" target=\"_blank\" class=\"text-accent hover:text-accentDark underline underline-offset-2\">Cen...",
|
|
"target": [
|
|
".flex-col > .text-clay\\/60"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"../\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">All skills</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink[href=\"../\"]"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
},
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/60 hover:text-ink text-sm transition-colors\">GitHub</a>",
|
|
"target": [
|
|
".text-clay\\/60.hover\\:text-ink.transition-colors:nth-child(2)"
|
|
],
|
|
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.67 (foreground color: #7a756c, background color: #ede6d4, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "link-name",
|
|
"impact": "serious",
|
|
"help": "Links must have discernible text",
|
|
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/link-name?application=playwright",
|
|
"nodes": [
|
|
{
|
|
"html": "<a href=\"https://github.com/jamditis/claude-skills-journalism\" target=\"_blank\" class=\"text-clay/70 hover:text-ink transition-colors\">",
|
|
"target": [
|
|
"span > .hover\\:text-ink.transition-colors[target=\"_blank\"]"
|
|
],
|
|
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|