The True Path to Garbage Code: Figma Sites
đź”— **Source:** [The True Path to Garbage Code: Figma Sites](https://www.joedolson.com/2025/05/the-true-path-to-garbage-code-figma-sites/)
> [!note]+ Document Notes
> tags:
> - #Accessibility
> - #FigmaSites
> - #WebDevelopment
> Author: Joe Dolson
> Source: Joe Dolson Web Accessibility Blog
> Reference: “The true path to garbage code: Figma Sites,” May 9, 2025, https://www.joedolson.com/2025/05/the-true-path-to-garbage-code-figma-sites/
> date created: 2025-05-13 21:10
>
> # Title: 🗑️ The true path to garbage code: Figma Sites
>
<!-- deep-read:sections start -->
## Table of Contents:
- [đź“ť Summary](#đź“ť-summary)
- [đź“– Main Content](#đź“–-main-content)
- [🗒️ Notes](#🗒️-notes)
- [đź“– References](#đź“–-references)
- [🗣️ Paraphrase](#🗣️-paraphrase)
- [đź“° Newsletter](#đź“°-newsletter)
- [âś… Action Items](#âś…-action-items)
- [🧪 Hypotheses](#🧪-hypotheses)
- [đź“Š Methodology](#đź“Š-methodology)
- [âť“ Questions](#âť“-questions)
- [đź”® Future Research](#đź”®-future-research)
- [đź’ˇ Implications](#đź’ˇ-implications)
- [🧠Learning Styles Assessment](#🧠-learning-styles-assessment)
- [đź“Š Accessibility Assessment](#đź“Š-accessibility-assessment)
- [🌍 DEIB Assessment](#🌍-deib-assessment)
- [âś… Logical validity](#âś…-logical-validity)
- [🔍 DARVO Analysis Prompt](#🔍-darvo-analysis-prompt)
- [🔍 SEO Evaluation](#🔍-seo-evaluation)
- [🎯 Conclusion](#🎯-conclusion)
### References:
- Dolson, Joe. “The true path to garbage code: Figma Sites.” Joe Dolson Web Accessibility Blog. :contentReference[oaicite:0]{index=0}
## đź“ť Summary:
Joe Dolson critiques Figma Sites’ exported HTML/CSS, showing deeply nested `<div>`s masquerading as links, misplaced navigation landmarks, poor heading structure, animation issues, and language-switcher flaws. He warns that without semantic elements, accessibility suffers and code bloat ensues. :contentReference[oaicite:1]{index=1}
## đź“– Main Content:
Dolson inspects a single “Contact Sales” link from the Figma Sites launch demo. The link is built as a `<div role="link" tabindex="0">` with four duplicates of the same text, never respecting prefers-reduced-motion, opening new tabs without warning, and buried after the `<footer>`. Expanding scope, he highlights random landmark placement, missing `<main>`, inconsistent alt-text, broken scaling at 200% zoom, and a custom cursor that disorients. He concludes that garbage code emerges from tools that disregard semantics and accessibility by default. :contentReference[oaicite:2]{index=2}
### 🗒️ Notes
- **Misuse of semantic elements**
- Link as `<div role="link" tabindex="0">` instead of `<a>`
- JavaScript event handlers fail on keypress for keyboard users
- **Accessible name issues**
- Duplicate inner elements yield “Contact Sales Contact Sales”
- `aria-label` on child elements gets ignored
- **Animation problems**
- Hover animations ignore `prefers-reduced-motion`
- Extraneous duplicate layers for effect
- **Change of context**
- Opens new tab without user warning or notification
- Cross-domain navigation with no cue
- **Global structure failures**
- Two `<h1>` headings; overuse of headings for non-headings
- `<nav>` placed at document end, after `<footer>`
- No `<main>` landmark; confusing banner, nav, footer landmarks
- **Images & alt-text**
- Heavy image usage; alt-text present but random
- **Low-vision support**
- At 200% zoom, navigation overlaps and portions disappear
- **Language switching**
- Language links text only, no `lang` attribute update on `<html>`
- **Overall implications**
- Tools must enforce semantic output by default
- Designers need guardrails to prevent accessibility oversights
## đź“– References:
1. Joe Dolson. :contentReference[oaicite:3]{index=3}
## 🗣️ Paraphrase:
1. **Original**:
“This is an impressive amount of code for a single link… a dozen nested `div` elements are messy, wasteful, and unnecessary…they have minimal impact on the user.”
**Paraphrase**:
“Figma Sites spits out an absurd volume of markup for just one link—dozens of nested `<div>`s that bloat the page and barely affect what the user sees.”
2. **Original**:
“Objects that are interactive should always be natively interactive elements. Animations should default to respecting prefers reduced motion flags.”
**Paraphrase**:
“Interactive components must use built-in HTML controls, and animations ought to honor the user’s reduced-motion preferences out of the box.”
## đź“° Newsletter:
Hey folks! 🎨 Ever tried Figma Sites? Joe Dolson’s latest deep-dive exposes how it churns out “garbage code”—nested `<div>` links, misplaced nav after the footer, broken zoom support, and unguarded animations that ignore user preferences. If accessibility and lean markup matter to you, don’t miss his take: [The true path to garbage code](https://www.joedolson.com/2025/05/the-true-path-to-garbage-code-figma-sites/). Let’s build sites that work for everyone—semantically.
## âś… Action Items:
**Prompt Alignment**:
“As a Developer Advocate and future OSPO Director, analyze how Joe Dolson’s critique of Figma Sites highlights gaps in tooling that my open-source community can fill. Outline how semantic-first plugins or workflows for WordPress could prevent similar garbage code, and propose strategies to engage contributors in building accessible design-to-code bridges.”
## 🧪 Hypotheses:
1. Editor-to-HTML tools that enforce native semantics reduce accessibility violations by ≥80%.
2. Providing semantic component libraries to designers halves remediation effort for dev teams.
3. Automated testing of prefers-reduced-motion flags catches >90% of animation issues.
### đź“Š Methodology:
- **Data sources**: Accessibility audit reports, GitHub plugin usage stats
- **Design**: Compare sites built with semantic plugins vs. default Figma export
- **Analysis**: Track violation counts; survey dev/designer satisfaction
### âť“ Questions:
- Can WordPress plugins automate conversion of div-links to `<a>` tags?
- What barriers prevent designers from using semantic components?
- How effective are motion-preference checks in CI pipelines?
### đź”® Future Research:
- Develop a Figma-to-WordPress semantic-component exporter.
- Evaluate impact of integrated a11y linting in design tools.
- Study adoption rates of accessible style-guide plugins in WP ecosystem.
### đź’ˇ Implications:
- **Tooling**: Build plugins that enforce semantic markup on export.
- **Education**: Train designers in a11y best practices integrated in Figma.
- **Policy**: Advocate for semantic output requirements in theme reviews.
## 🧠Learning Styles Assessment:
_Readability_: Grade 11 (Flesch-Kincaid)
1. **Visual**: Code snippets; add diagrams of document flow and landmarks.
2. **Aural**: No audio; recommend a podcast breakdown of key issues.
3. **Verbal**: Clear examples; supplement with case-study narratives.
4. **Kinesthetic**: No hands-on; propose live coding labs to fix Figma Sites export.
5. **Logical**: Logical progression; include flowcharts of event handling.
6. **Social**: No collaboration prompts; include Slack channel discussion links.
7. **Solitary**: No journaling; suggest reflection on own design workflows.
8. **Naturalistic**: None; optional metaphor comparing code cleanup to gardening.
## đź“Š Accessibility Assessment:
- **Screen Reader**: Must use native `<a>` and landmarks; test link announcements.
- **Keyboard**: Ensure keypress events trigger JS handlers or fallback to `<a>`.
- **Contrast**: Verify animations don’t flash; test reduced-motion.
- **Resizing**: Fix overlap at zoom >150%; use responsive CSS units.
## 🌍 DEIB Assessment:
- **Cultural Relevance**: Broad user focus; consider RTL languages in landmark tests.
- **Inclusive Language**: Neutral; define technical terms for non-dev audiences.
- **Neurodiversity**: Dense code blocks; break into smaller chunks and side notes.
- **Representation**: Single author perspective; invite community submissions of similar cases.
- **Psych Safety**: Constructive tone; encourage respectful feedback loops.
## âś… Logical validity:
- **Strong inductive reasoning**: Single-link deep dive scales to site-wide critique.
- **Causal reasoning**: Poor semantics → accessibility failures & user confusion.
- **No fallacies detected**; argument hinges on concrete code examples.
## 🔍 DARVO Analysis Prompt
- **Deny**: No denial of tool flaws.
- **Attack**: Critique of Figma Sites, not its creators—no ad hominem.
- **Reverse Victim**: Not present.
## 🔍 SEO Evaluation:
- **Keywords**: “garbage code,” “Figma Sites,” “accessibility” in title and headings.
- **Meta Description**: Should summarize critique and include “semantic” and “accessibility.”
- **Headers**: H2/H3 used appropriately; consider H4 for each individual violation.
- **Length**: ~1,500 words; detailed yet focused.
- **Links**: Internal to other a11y posts; external to Figma demo.
- **URL**: SEO-friendly slug.
- **Images**: Code screenshots need alt-text describing content.
- **Mobile**: Responsive theme; verify code blocks scroll.
- **Engagement**: Comments CTA; encourage sharing.
- **Schema**: Article markup present; add “Review” schema for accessibility rating.
- **Social**: Share icons visible; OG tags assumed.
## 🎯 Conclusion:
Figma Sites’ beta export proves that design tools alone can generate bloated, inaccessible markup. By enforcing native semantics, honoring user preferences, and structuring landmarks properly, we can avoid the garbage-code trap—ensuring websites are both beautiful and usable for everyone.
<!-- deep-read:sections end -->
[[3. Resources/Readwise/Full Document Contents/Articles/The True Path to Garbage Code Figma Sites|Full Document Contents]]
## Document Notes
---
tags:
- #Accessibility
- #FigmaSites
- #WebDevelopment
Author: Joe Dolson
Source: Joe Dolson Web Accessibility Blog
Reference: “The true path to garbage code: Figma Sites,” May 9, 2025, https://www.joedolson.com/2025/05/the-true-path-to-garbage-code-figma-sites/
date created: 2025-05-13 21:10
---
# Title: 🗑️ The true path to garbage code: Figma Sites
## Table of Contents:
- [[#đź“ť Summary:]]
- [[#đź“– Main Content:]]
- [[#🗒️ Notes]]
- [[#đź“– References:]]
- [[#🗣️ Paraphrase:]]
- [[#đź“° Newsletter:]]
- [[#âś… Action Items:]]
- [[#🧪 Hypotheses:]]
- [[#đź“Š Methodology:]]
- [[#âť“ Questions:]]
- [[#đź”® Future Research:]]
- [[#đź’ˇ Implications:]]
- [[#🧠Learning Styles Assessment:]]
- [[#đź“Š Accessibility Assessment:]]
- [[#🌍 DEIB Assessment:]]
- [[#âś… Logical validity:]]
- [[#🔍 DARVO Analysis Prompt]]
- [[#🔍 SEO Evaluation:]]
- [[#🎯 Conclusion:]]
### References:
- Dolson, Joe. “The true path to garbage code: Figma Sites.” Joe Dolson Web Accessibility Blog. :contentReference[oaicite:0]{index=0}
## đź“ť Summary:
Joe Dolson critiques Figma Sites’ exported HTML/CSS, showing deeply nested `<div>`s masquerading as links, misplaced navigation landmarks, poor heading structure, animation issues, and language-switcher flaws. He warns that without semantic elements, accessibility suffers and code bloat ensues. :contentReference[oaicite:1]{index=1}
## đź“– Main Content:
Dolson inspects a single “Contact Sales” link from the Figma Sites launch demo. The link is built as a `<div role="link" tabindex="0">` with four duplicates of the same text, never respecting prefers-reduced-motion, opening new tabs without warning, and buried after the `<footer>`. Expanding scope, he highlights random landmark placement, missing `<main>`, inconsistent alt-text, broken scaling at 200% zoom, and a custom cursor that disorients. He concludes that garbage code emerges from tools that disregard semantics and accessibility by default. :contentReference[oaicite:2]{index=2}
### 🗒️ Notes
- **Misuse of semantic elements**
- Link as `<div role="link" tabindex="0">` instead of `<a>`
- JavaScript event handlers fail on keypress for keyboard users
- **Accessible name issues**
- Duplicate inner elements yield “Contact Sales Contact Sales”
- `aria-label` on child elements gets ignored
- **Animation problems**
- Hover animations ignore `prefers-reduced-motion`
- Extraneous duplicate layers for effect
- **Change of context**
- Opens new tab without user warning or notification
- Cross-domain navigation with no cue
- **Global structure failures**
- Two `<h1>` headings; overuse of headings for non-headings
- `<nav>` placed at document end, after `<footer>`
- No `<main>` landmark; confusing banner, nav, footer landmarks
- **Images & alt-text**
- Heavy image usage; alt-text present but random
- **Low-vision support**
- At 200% zoom, navigation overlaps and portions disappear
- **Language switching**
- Language links text only, no `lang` attribute update on `<html>`
- **Overall implications**
- Tools must enforce semantic output by default
- Designers need guardrails to prevent accessibility oversights
## đź“– References:
1. Joe Dolson. :contentReference[oaicite:3]{index=3}
## 🗣️ Paraphrase:
1. **Original**:
“This is an impressive amount of code for a single link… a dozen nested `div` elements are messy, wasteful, and unnecessary…they have minimal impact on the user.”
**Paraphrase**:
“Figma Sites spits out an absurd volume of markup for just one link—dozens of nested `<div>`s that bloat the page and barely affect what the user sees.”
2. **Original**:
“Objects that are interactive should always be natively interactive elements. Animations should default to respecting prefers reduced motion flags.”
**Paraphrase**:
“Interactive components must use built-in HTML controls, and animations ought to honor the user’s reduced-motion preferences out of the box.”
## đź“° Newsletter:
Hey folks! 🎨 Ever tried Figma Sites? Joe Dolson’s latest deep-dive exposes how it churns out “garbage code”—nested `<div>` links, misplaced nav after the footer, broken zoom support, and unguarded animations that ignore user preferences. If accessibility and lean markup matter to you, don’t miss his take: [The true path to garbage code](https://www.joedolson.com/2025/05/the-true-path-to-garbage-code-figma-sites/). Let’s build sites that work for everyone—semantically.
## âś… Action Items:
**Prompt Alignment**:
“As a Developer Advocate and future OSPO Director, analyze how Joe Dolson’s critique of Figma Sites highlights gaps in tooling that my open-source community can fill. Outline how semantic-first plugins or workflows for WordPress could prevent similar garbage code, and propose strategies to engage contributors in building accessible design-to-code bridges.”
## 🧪 Hypotheses:
1. Editor-to-HTML tools that enforce native semantics reduce accessibility violations by ≥80%.
2. Providing semantic component libraries to designers halves remediation effort for dev teams.
3. Automated testing of prefers-reduced-motion flags catches >90% of animation issues.
### đź“Š Methodology:
- **Data sources**: Accessibility audit reports, GitHub plugin usage stats
- **Design**: Compare sites built with semantic plugins vs. default Figma export
- **Analysis**: Track violation counts; survey dev/designer satisfaction
### âť“ Questions:
- Can WordPress plugins automate conversion of div-links to `<a>` tags?
- What barriers prevent designers from using semantic components?
- How effective are motion-preference checks in CI pipelines?
### đź”® Future Research:
- Develop a Figma-to-WordPress semantic-component exporter.
- Evaluate impact of integrated a11y linting in design tools.
- Study adoption rates of accessible style-guide plugins in WP ecosystem.
### đź’ˇ Implications:
- **Tooling**: Build plugins that enforce semantic markup on export.
- **Education**: Train designers in a11y best practices integrated in Figma.
- **Policy**: Advocate for semantic output requirements in theme reviews.
## 🧠Learning Styles Assessment:
_Readability_: Grade 11 (Flesch-Kincaid)
1. **Visual**: Code snippets; add diagrams of document flow and landmarks.
2. **Aural**: No audio; recommend a podcast breakdown of key issues.
3. **Verbal**: Clear examples; supplement with case-study narratives.
4. **Kinesthetic**: No hands-on; propose live coding labs to fix Figma Sites export.
5. **Logical**: Logical progression; include flowcharts of event handling.
6. **Social**: No collaboration prompts; include Slack channel discussion links.
7. **Solitary**: No journaling; suggest reflection on own design workflows.
8. **Naturalistic**: None; optional metaphor comparing code cleanup to gardening.
## đź“Š Accessibility Assessment:
- **Screen Reader**: Must use native `<a>` and landmarks; test link announcements.
- **Keyboard**: Ensure keypress events trigger JS handlers or fallback to `<a>`.
- **Contrast**: Verify animations don’t flash; test reduced-motion.
- **Resizing**: Fix overlap at zoom >150%; use responsive CSS units.
## 🌍 DEIB Assessment:
- **Cultural Relevance**: Broad user focus; consider RTL languages in landmark tests.
- **Inclusive Language**: Neutral; define technical terms for non-dev audiences.
- **Neurodiversity**: Dense code blocks; break into smaller chunks and side notes.
- **Representation**: Single author perspective; invite community submissions of similar cases.
- **Psych Safety**: Constructive tone; encourage respectful feedback loops.
## âś… Logical validity:
- **Strong inductive reasoning**: Single-link deep dive scales to site-wide critique.
- **Causal reasoning**: Poor semantics → accessibility failures & user confusion.
- **No fallacies detected**; argument hinges on concrete code examples.
## 🔍 DARVO Analysis Prompt
- **Deny**: No denial of tool flaws.
- **Attack**: Critique of Figma Sites, not its creators—no ad hominem.
- **Reverse Victim**: Not present.
## 🔍 SEO Evaluation:
- **Keywords**: “garbage code,” “Figma Sites,” “accessibility” in title and headings.
- **Meta Description**: Should summarize critique and include “semantic” and “accessibility.”
- **Headers**: H2/H3 used appropriately; consider H4 for each individual violation.
- **Length**: ~1,500 words; detailed yet focused.
- **Links**: Internal to other a11y posts; external to Figma demo.
- **URL**: SEO-friendly slug.
- **Images**: Code screenshots need alt-text describing content.
- **Mobile**: Responsive theme; verify code blocks scroll.
- **Engagement**: Comments CTA; encourage sharing.
- **Schema**: Article markup present; add “Review” schema for accessibility rating.
- **Social**: Share icons visible; OG tags assumed.
## 🎯 Conclusion:
Figma Sites’ beta export proves that design tools alone can generate bloated, inaccessible markup. By enforcing native semantics, honoring user preferences, and structuring landmarks properly, we can avoid the garbage-code trap—ensuring websites are both beautiful and usable for everyone.
## Highlights
- Figma Sites are a clear path to creating an incredible mess of a site. ([View Highlight](https://read.readwise.io/read/01jv64ejhv69gbzhjf7yy93gcx))