The future of the web is weirdly human  🔗 **Source:** [The future of the web is weirdly human](https://www.jonoalderson.com/conjecture/weirdly-human/) > [!note]+ Document Notes > tags: [web-technology, html-canvas, ai-interfaces, web-accessibility, semantic-web] > author: Jono Alderson > source: jonoalderson.com > reference: https://www.jonoalderson.com/conjecture/weirdly-human/ > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🏷️ Title: The future of the web is weirdly human > <!-- 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](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ## 📝 Summary - Chrome's HTML-in-canvas API allows HTML content to be rendered in 3D environments while preserving accessibility and SEO compatibility. - For 30 years, web design has been constrained by document-based formats that balance human experience with machine readability. - AI advancement may enable separation of information from presentation, allowing richer human experiences while maintaining structured data for machines. - The future web could move beyond page-based documents toward more expressive, spatial interfaces that better represent the actual content. - This represents a fundamental shift from shaping human experiences around machine constraints to leveraging sophisticated AI to understand meaning directly. ## 📖 Main Content The article argues that HTML-in-canvas represents more than a technical feature—it's a glimpse of how the web might evolve beyond its document-centric constraints. ### The Document Web's Dominance For decades, websites have shared similar structures (pages, navigation hierarchies, vertical scrolling) not because this format best represents all information, but because it satisfied multiple stakeholders: search engines, browsers, accessibility tools, CMS platforms, and analytics systems. The document format became the web's lingua franca through practicality rather than expressiveness. This compromise became so embedded that we stopped recognizing it as a choice. The web didn't just use documents—it began thinking in documents. ### HTML-in-Canvas as Liberation Chrome's experimental HTML-in-canvas API allows ordinary HTML to be rendered in rich 3D environments while preserving: - DOM accessibility - Search engine crawlability - Browser functionality - Semantic meaning The demonstrations show HTML content functioning normally within game engines, 3D spaces, and interactive environments—suggesting we might escape the traditional trade-off between expressiveness and compatibility. ### AI Enables the Split The key insight is that AI advancement allows separation of human-facing experiences from machine-readable representations. While search engines and AI systems can consume structured data, APIs, and semantic markup, human interfaces no longer need to be constrained by those same formats. Different audiences can consume different representations of identical underlying information—freeing human experiences from machine requirements that have shaped web design for three decades. ## 🗒️ Notes - HTML-in-canvas preserves all semantic web benefits while enabling 3D rendering - Examples include HTML content within Doom game environments and head-tracking parallax interfaces - The document format won through compatibility, not optimal expression of ideas - Traditional rich web experiences (Flash) failed due to poor integration with web ecosystem - Current trend toward machine-readable structured data creates opportunity for divergent human interfaces - Museums, communities, products could be experienced as spatial environments rather than page hierarchies - The machine-readable layer becomes infrastructure rather than user-facing constraint ## 📚 References - [HTML-in-Canvas API documentation](https://github.com/WICG/html-in-canvas) - [Chrome experimental features](https://developer.chrome.com/docs/web-platform/canvas-context-lost/) - [Web Components and semantic web standards](https://www.w3.org/standards/semanticweb/) ## 🗣️ Paraphrase Jono Alderson presents HTML-in-canvas as a harbinger of fundamental change in web design philosophy. He argues that the web's document-centric structure emerged from technical compromises rather than optimal information representation. With AI systems increasingly capable of understanding structured data independently of presentation, human interfaces can finally escape constraints that prioritized machine readability. This technological shift could enable websites to represent information more naturally—conferences as landscapes of ideas, products as explorable environments—while maintaining the semantic web infrastructure that powers search and accessibility. ## 📰 Newsletter The web is getting a major upgrade! Chrome's new HTML-in-canvas feature lets developers create stunning 3D interfaces while keeping all the SEO and accessibility benefits we love. Imagine WordPress sites that feel like interactive experiences rather than just pages—think museum exhibits you can walk through or product catalogs you can explore spatially. This isn't just eye candy; it's rethinking how we present information online. For WordPress developers, this could revolutionize themes and user experiences while maintaining the structured data that keeps search engines happy. The future of web design might be less about optimizing page layouts and more about crafting immersive, accessible digital spaces. ## ✅ Action Items #### WordPress - **Core**: Investigate HTML-in-canvas compatibility with WordPress rendering pipeline and block editor - **Core AI**: Explore how AI-generated structured data could support richer presentation layers - **Themes**: Research theme architecture patterns that separate content structure from spatial presentation - **Accessibility**: Develop guidelines for maintaining WCAG compliance in 3D web interfaces - **Design**: Create prototype spatial navigation patterns for common WordPress site types - **Documentation**: Update developer resources on semantic HTML practices for canvas environments #### DevRel - **Developer experience**: Create tutorials on implementing HTML-in-canvas with WordPress themes - **Developer marketing**: Showcase WordPress's semantic foundation as ideal for next-generation web interfaces - **Community management**: Facilitate discussions on accessibility standards for immersive web experiences ## 🧪 Hypotheses - HTML-in-canvas adoption will accelerate as browser support expands beyond Chrome experimental flags - WordPress's strong semantic HTML foundation positions it well for spatial web experiences - Accessibility compliance in 3D interfaces will become a key differentiator for web frameworks - E-commerce sites will be early adopters of spatial product browsing experiences - SEO strategies will evolve to optimize structured data separately from visual presentation - Developer tools will emerge to bridge traditional web development with 3D interface design ### 📊 Methodology - Analyze HTML-in-canvas browser adoption rates across major browsers - Survey web accessibility experts on 3D interface compliance strategies - A/B test user engagement with spatial vs. traditional navigation patterns - Track WordPress theme marketplace for early HTML-in-canvas implementations - Monitor search engine algorithm updates for spatial web indexing changes - Benchmark performance impacts of canvas rendering on WordPress sites ### ❓ Questions - How will screen readers adapt to navigate 3D web interfaces effectively? - What new web performance metrics will emerge for canvas-based experiences? - Can WordPress's block editor be extended to support spatial content layout? - How will existing WordPress plugins maintain compatibility with canvas rendering? - What accessibility guidelines need development for immersive web standards? ### 🔮 Future Research - Impact of spatial web design on cognitive load and information retention - Evolution of web accessibility standards for 3D interface compliance - WordPress core architecture modifications needed for canvas integration - Performance optimization strategies for HTML-in-canvas on mobile devices - Search engine ranking factors for sites with separated content/presentation layers ### 💡 Implications - **Practice**: Web designers need 3D design skills alongside traditional HTML/CSS expertise - **Policy**: Accessibility regulations must evolve to address immersive web experiences - **Security**: New attack vectors may emerge through canvas rendering vulnerabilities - **Education**: Web development curricula should incorporate spatial interface design - **Funding**: Investment in web accessibility tools for 3D interfaces becomes critical ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade 12.8 (college level, appropriate for technical audience) #### 👀 Visual learners - Present: Twitter embeds showing HTML-in-canvas demonstrations, 3D rendering examples - Improve: Add architectural diagrams showing content/presentation separation, before/after visual comparisons #### 🔊 Aural learners - Present: Embedded video demonstrations with sound - Improve: Podcast discussion of spatial web implications, audio narration of technical concepts #### 🗣️ Verbal learners - Present: Clear analogies (document as "compromise format"), technical terminology definitions - Improve: Glossary of HTML-in-canvas terms, comparison table of Flash vs. modern approaches #### 🧩 Kinesthetic learners - Present: Interactive demo links, hands-on code examples - Improve: Step-by-step tutorials, sandbox environments for testing canvas features #### 🧠 Logical learners - Present: Historical progression of web constraints, cause-effect relationships - Improve: Decision trees for choosing spatial vs. traditional interfaces, technical specification timelines #### 🧑‍🤝‍🧑 Social learners - Present: Developer community discussions via Twitter embeds - Improve: Forums for accessibility feedback, collaborative design sessions #### 🧘‍♀️ Solitary learners - Present: In-depth technical analysis, philosophical implications - Improve: Self-assessment questions about site architecture needs, personal experimentation guides #### 🌿 Naturalistic learners - Present: Evolution metaphors for web development - Improve: Ecosystem thinking about web standards, environmental impact of rendering approaches ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Strong emphasis on DOM preservation, semantic HTML benefits - Improve: Specific ARIA patterns for 3D navigation, landmark strategies for spatial content #### Keyboard navigation - Present: Focus on maintaining browser functionality - Improve: Tab order specifications for canvas elements, keyboard shortcuts for spatial navigation #### Contrast and readability - Present: Technical discussion accessible to experts - Improve: Color contrast considerations for 3D environments, readability in canvas contexts #### Text resizing and reflow - Present: Responsive design implications mentioned - Improve: Text scaling behavior in 3D spaces, zoom compatibility testing #### Media and captions - Present: Video embeds with visual demonstrations - Improve: Captions for technical videos, audio descriptions of 3D interactions #### Forms and interactions - Present: Interactive elements in canvas environments - Improve: Form accessibility patterns for spatial interfaces, error handling in 3D contexts #### Standards reference Maps to WCAG 2.2 guidelines for innovative interface technologies, requiring new implementation strategies. ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global web development perspective, universal accessibility focus - Improve: Examples from diverse cultural contexts, international accessibility standards #### Inclusive language - Present: Technical terminology well-defined, gender-neutral examples - Improve: Plain-language summary of technical concepts, avoid web development jargon #### Neurodiversity support - Present: Clear structure with headings, logical progression - Improve: Content warnings for motion-heavy demos, alternative static representations #### Representation - Present: Focus on technical merit over individual attribution - Improve: Highlight diverse voices in web accessibility community #### Psychological safety - Present: Respectful tone toward different technical approaches - Improve: Acknowledge learning curves for new technologies, validate current approaches ### ✅ Logical Validity #### Strong reasoning - **Historical analysis**: Effectively traces document web evolution through practical constraints rather than optimal design - **Causal reasoning**: Links AI advancement to reduced machine readability constraints, enabling human interface innovation - **Analogical strength**: Document-as-compromise metaphor clearly illustrates web design limitations #### Fallacies - **Possible technological determinism**: Assumes HTML-in-canvas will naturally lead to widespread adoption without considering economic/organizational barriers - **Appeal to novelty**: May overweight new technology benefits while underestimating transition costs and compatibility challenges #### Tone of voice Analytical and forward-looking with measured enthusiasm. Uses technical expertise to ground speculation in concrete examples while maintaining optimism about technological possibility. ### 🛡️ DARVO Analysis No DARVO patterns detected. Article focuses on technological analysis rather than defensive rhetoric or blame attribution. ## 🎯 Conclusion HTML-in-canvas represents a potentially transformative shift in web development philosophy. By enabling rich, expressive human interfaces while preserving the semantic web infrastructure that powers accessibility and search, it suggests an escape from the document-centric constraints that have shaped web design for three decades. For WordPress and the broader web community, this technology could enable sites that better represent their actual content—spatial experiences rather than page hierarchies—while maintaining the structured data foundation that ensures inclusivity and discoverability. The practical implications for developers, designers, and content creators will require new skills, tools, and accessibility considerations, but the potential payoff is a more human-centered web that doesn't sacrifice machine compatibility. ## 🔄 Refactor Appendix — The future of the web is weirdly human ### 📚 Literature Atoms #### HTML-in-canvas preserves semantic web benefits while enabling 3D rendering > [!quote] ID:main_content > The browser takes ordinary HTML content and allows it to be rendered inside rich canvas environments whilst retaining all of the things that make HTML useful in the first place. The content remains part of the DOM. The browser still understands it. Accessibility tools still understand it. Search engines still understand it. **Context & use**: - Core technical capability that solves historical trade-offs between expressiveness and compatibility - Foundational to argument about escaping document-web constraints **Tags**: #web-technology #accessibility #semantic-web **Highlight**: [view highlight](main_content) <!-- atomicity: 1 idea ✓ --> #### Document format won through compatibility not optimal information representation > [!quote] ID:document_compromise > The document wasn't necessarily the best representation of every idea, every place, every product or every experience. It was simply the format that everybody could agree on. And over time, that compromise became invisible. **Context & use**: - Explains why web design has remained page-centric despite limitations - Reveals hidden assumption underlying current web architecture **Tags**: #web-history #information-architecture #design-constraints <!-- atomicity: 1 idea ✓ --> #### AI enables separation of human experience from machine-readable data > [!quote] ID:ai_separation > One of the more interesting things happening right now is the gradual separation of information from presentation. Search engines increasingly consume structured representations of content. Applications consume APIs. AI systems are starting to consume entities, relationships, feeds, product data and all manner of machine-oriented representations that were never intended for human eyes. **Context & use**: - Key insight enabling escape from document constraints - Allows optimization for human and machine needs independently **Tags**: #ai-interfaces #structured-data #content-strategy <!-- atomicity: 1 idea ✓ --> ### 🧠 Permanent Candidates #### Web design constraints shaped by machine compatibility requirements are becoming obsolete **Claim**: Artificial intelligence advancement enables web interfaces to optimize for human experience independently of machine readability requirements. **Evidence pointer**: [[#AI enables separation of human experience from machine-readable data]] **Scope & conditions**: Applies when AI systems can reliably extract meaning from structured data separate from presentation; requires maintaining semantic markup for machine consumption **Links**: - [[Accessibility standards]] — because extends to cover 3D interfaces - [[WordPress semantic foundation]] — because applies-in content management systems - [[Progressive enhancement]] — because contrasts with constraint-driven design <!-- atomicity: 1 idea ✓ --> ### ✏️ Fleeting Queue - Investigate WordPress compatibility with HTML-in-canvas API — experimental Chrome feature - Research accessibility patterns for 3D web navigation — WCAG extension needed - Explore spatial content management in block editor — architectural implications ### → Things 3 - [ ] Test HTML-in-canvas demos in Chrome Canary — evaluate WordPress theme integration potential #things - [ ] Schedule accessibility expert consultation — spatial interface compliance strategies #things <!-- deep-read:sections end --> ## Highlights - The browser takes ordinary HTML content and allows it to be rendered inside rich canvas environments whilst retaining all of the things that make HTML useful in the first place. The content remains part of the DOM. The browser still understands it. Accessibility tools still understand it. Search engines still understand it. - Note: 📚 HTML-in-canvas preserves semantic web benefits while enabling 3D rendering · - Core technical capability that solves historical trade-offs between expressiveness and compatibility - Foundational to argument about escaping document-web constraints · #atom/literature/h1 - The document wasn't necessarily the best representation of every idea, every place, every product or every experience. It was simply the format that everybody could agree on. And over time, that compromise became invisible. - Note: 📚 Document format won through compatibility not optimal information representation · - Explains why web design has remained page-centric despite limitations - Reveals hidden assumption underlying current web architecture · #atom/literature/h2 - One of the more interesting things happening right now is the gradual separation of information from presentation. Search engines increasingly consume structured representations of content. Applications consume APIs. AI systems are starting to consume entities, relationships, feeds, product data and all manner of machine-oriented representations that were never intended for human eyes. - Note: 📚 AI enables separation of human experience from machine-readable data · - Key insight enabling escape from document constraints - Allows optimization for human and machine needs independently · #atom/literature/h3 - Web design constraints shaped by machine compatibility requirements are becoming obsolete - Note: [[Accessibility standards]] — because extends to cover 3D interfaces · - [[Accessibility standards]] — because extends to cover 3D interfaces · #atom/zettel/z1