AriaML : An HTML fork

Flavien Guillon — Fri, 05 Jun 2026 16:42:29 +0000

What is AriaML?

Aria Markup Language is a language derived from HTML, designed to bridge the structural gaps of the modern web by restoring the document's autonomy over JavaScript. It specifically addresses the following issues:

Hyper-dependency on JavaScript: Interactivity and rendering optimizations now rely almost exclusively on third-party scripts.
Incomplete coverage of ARIA patterns: There should be, as much as possible, a native HTML component for every Aria APG pattern. see Aria APG Patterns
Tight coupling between CSS and the DOM: Style sheets are too closely bound to the structure, preventing CSS from being truly interchangeable across different websites.
Massive data redundancy: Duplication of information across Meta tags, JSON-LD, and the DOM, without any native link between these three layers.
Costly URI context switches: Complete and abrupt page reloads in the absence of complex Single Page Application (SPA) software optimizations written in JavaScript.
Lack of semantic adaptability: Inability for a component to fluidly change its role based on the display context without script intervention (e.g., a heading morphing into a dropdown button to optimize space on a smartphone).

The DOM, Enslaved by JavaScript

By nature, HTML sits on the boundary between a document and an application. Initially, it is fully accessible and natively interactive (often referred to as Plain Old Semantic HTML).

However, while the HTML/JavaScript duo offers undeniable power, the intrinsic enrichment of the HTML language itself has been sidelined in favor of developing new JavaScript APIs. The DOM has ultimately become a puppet for scripts. Lacking native alternatives, developers frequently alter the behavior of strict semantic elements (for instance, hijacking an <h1> heading into a button), unintentionally breaking both the user experience and accessibility.

The ARIA (Accessible Rich Internet Applications) specification theoretically allows DOM elements altered by JavaScript to be properly exposed to assistive technologies. AriaML proposes a paradigm shift: moving the description of behaviors and accessibility directly to the language level.

Quick presentation

This emancipation from JavaScript is made possible by an architecture built upon three major pillars:

1. Behavior Sheets (`.bhv`)

These sheets responsively define the semantic and behavioral mutations that components must adopt based on the display context (Media Queries) and their interrelationships (e.g., an element natively controlling the expanded / collapsed state of another).

Their syntax is close to CSS. However, unlike style sheets, Behavior Sheets act on the dynamics of the DOM without ever interfering with pure content (HTML) or visual appearance (CSS).

2. Declarative Integration of Common Patterns

Mechanics typically delegated to JavaScript are directly integrated into the lifecycle of the AriaML document.

Navigation & Forms: During a URI context switch (clicking a link, submitting a form), AriaML can perform a targeted and surgical mutation of specific zones in a purely declarative manner.
Native and Automatic Accessibility: The lifecycle of this navigation strictly adheres to WAI-ARIA criteria. During the transition, the document automatically applies an aria-busy="true" state and handles focus and inertia transparently.

Result: A drastic reduction in request payloads and a substantial saving of CPU resources, all without writing a single line of JavaScript code.

3. Decoupling data from the DOM

Very often, there is a redundancy of information between Meta tags, JSON-LD, and the DOM. AriaML brings elements to life and lifts old historical constraints of HTML.
In AriaML, there is no longer a doctype, <body>, <head>, <meta>, or <link>. Metadata is defined in JSON-LD.
Here is, for example, a valid and complete AriaML document:

<aria-ml>
    <h1>Title</h1>
    <p>Hello World</p>
</aria-ml>

Note that in an AriaML document, the encoding is always UTF-8 and the value of <meta name="viewport"> is defined by a CSS property, defaulting to "width=device-width, initial-scale=1".
Here is its HTML "equivalent":

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>Title</h1>
        <p>Hello World</p>
    </body>
</html>

Here is a second, richer example:

<aria-ml>
    <script type="application/ld+json">{
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "Title",
        "inLanguage": "fr-FR",
        "direction": "ltr",
        "description": "Hello World"
    }</script>
    <h1 ref="name"></h1>
    <p ref="description"></p>
</aria-ml>

The name property will be interpreted by the browser as the document title. Furthermore, the ref attribute allows for synchronizing elements with the data.
The idea is not new. It comes from the XForm module of XHTML. The ref attribute allows for precisely synchronizing the content of an element (or its value, if it is a form field) with a value contained in the model layer (made up of all the json and json-ld available on the page). The value of this attribute is expressed in XPath, a technology available in all browsers since the 2000s. The page becomes "alive" without the intervention of a programming language, and writing it is simpler and more concise.
Its HTML equivalent, inert (as there is no synchronization without javascript) and redundant:

<html lang="fr-FR" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <meta name="description" content="Hello World">
    </head>
        <body>
        <script type="application/ld+json">{
            "@context": "https://schema.org",
            "@type": "WebPage",
            "name": "Title",
            "inLanguage": "fr-FR",
            "direction": "ltr",
            "description": "Hello World"
        }</script>
        <h1>Title</h1>
        <p>Hello World</p>
    </body>
</html>

A Necessary Fork of HTML

A prisoner of its own immense success, HTML is currently hindered in its ability to evolve. Every modification to its specification is highly critical: existing systems must be preserved, total backward compatibility must be ensured, and interpretation discrepancies between different rendering engines must be avoided.

To bypass this inertia and offer a standard designed from the ground up to respect privacy (making JavaScript non-obtrusive inherently limits fingerprinting vectors) and universal accessibility, you can consider AriaML as a modern fork of HTML for a resilient Web.

AriaML delivers the modern web user experience while eliminating the regular zero-day vulnerabilities caused by the inherent complexity of JavaScript engines.

Conclusion

AriaML is a fork, a language derived from HTML, designed to bridge the structural gaps of the modern web by restoring the document's autonomy over JavaScript.
Furthermore, an AriaML document can be embedded within an HTML document, making it backward-compatible with HTML.
AriaML can be served server-side and, through content negotiation, it can be determined whether it should be sent as-is or in its version embedded within an HTML document.
(Does the "Accept" header contain "text/aria-ml"?)

There are currently two implementations:

A JavaScript polyfill allows embedding AriaML within an HTML document while still leveraging the lifecycle and features offered by AriaML. This polyfill is available as a standalone version (a script distributed by the HTML page acting as the AriaML container), but also as a Web Extension. The latter allows the end-user to disable JavaScript while still benefiting from the AriaML features defined in the documentation.
A PHP SSR implementation that identifies the capabilities of the User Agent (browser or search engine) to interpret AriaML, in order to determine which version of the page will be sent (Native AriaML, or embedded within an HTML document).

More informations here

DEV Community: Flavien Guillon