Documentation

Qu'est ce que AriaML?

Aria Markup Language est un langage dérivé du HTML, conçu pour combler les lacunes structurelles du web moderne en redonnant au document son autonomie face au JavaScript. Il résout notamment les problématiques suivantes :

• Hyper-dépendance au JavaScript : L'interactivité et les optimisations de rendu reposent aujourd'hui presque exclusivement sur des scripts tiers.
• Couverture incomplète des patterns ARIA : Il devrait y avoir, autant que possible, un composant HTML natif pour chaque pattern Aria APG. voir les Patterns Aria APG
• Forte adhérence entre le CSS et le DOM : Les feuilles de style sont trop liées à la structure, empêchant le CSS d'être véritablement interchangeable entre plusieurs sites.
• Redondance massive des données : Duplication des informations entre les balises Meta, le JSON-LD et le DOM, sans aucune liaison native entre ces trois couches.
• Changements de contexte URI coûteux : Des rechargements complets et brutaux de pages en l'absence d'optimisations logicielles (Single Page Application) complexes en JavaScript.
• Absence d'adaptabilité sémantique : Impossibilité pour un composant de changer de rôle de façon fluide selon le contexte d'affichage sans l'intervention de scripts (par exemple, un titre qui mute en bouton dropdown pour optimiser l'espace sur smartphone).

Le DOM, Esclave du JavaScript

Par nature, le HTML se situe à la frontière entre le document et l'application. Initialement, il est pleinement accessible et nativement interactif (c'est ce qu'on appelle le Plain Old Semantic HTML).

Cependant, si le duo HTML/JavaScript offre une puissance indiscutable, l'enrichissement intrinsèque du langage HTML a été délaissé au profit du développement de nouvelles API JavaScript. Le DOM a fini par devenir la marionnette des scripts. Faute d'alternatives natives, les développeurs altèrent souvent le comportement d'éléments sémantiques stricts (par exemple, détourner un titre <h1> en bouton), brisant involontairement l'expérience utilisateur et l'accessibilité.

La spécification ARIA (Accessible Rich Internet Applications) permet théoriquement d'exposer correctement les éléments du DOM altérés par JavaScript aux technologies assistives. AriaML propose un changement de paradigme : déplacer la description des comportements et de l'accessibilité directement au niveau du langage.

Présentation rapide

Cette émancipation du JavaScript est rendue possible grâce à une architecture reposant sur trois piliers majeurs :

1. Les Feuilles de Comportement (Behavior Sheets .bhv)

Ces feuilles définissent de façon responsive les mutations sémantiques et comportementales que doivent adopter les composants selon le contexte d'affichage (Media Queries) et leurs interrelations (par exemple, un élément qui contrôle nativement l'état expanded / collapsed d'un autre).

Leur syntaxe est proche du CSS. Cependant, contrairement aux feuilles de style, les Behavior Sheets agissent sur la dynamique du DOM sans jamais interférer avec le contenu pur (HTML) ou l'apparence visuelle (CSS).

2. L'Incorporation Déclarative des Patterns Communs

Les mécaniques couramment déléguées au JavaScript sont directement intégrées au cycle de vie du document AriaML.

• Navigation & Formulaires : Lors d'un changement de contexte URI (clic sur un lien, soumission de formulaire), AriaML peut opèrer une mutation ciblée et chirurgicale de certaines zones de manière purement déclarative.
• Accessibilité Native et Automatique : Le cycle de vie de cette navigation respecte rigoureusement les critères de la WAI-ARIA. Durant la transition, le document applique automatiquement un état aria-busy="true" et configure le focus et l'inertie de façon transparente.

Résultat : Une réduction drastique du poids des requêtes et une économie substantielle des ressources CPU, le tout sans écrire la moindre ligne de code JavaScript.

3. Le découplage entre les données et le DOM

Bien souvent, il y'a redondance d'informations entre les balises Meta, le JSON-LD et le DOM. AriaML donne vie aux élément et et lève de vieilles contraintes historiques du HTML. En AriaML, il n'y a plus ni doctype, ni <body>, ni <head>, ni <meta> ni <link>. Les metadonnées sont définis dans JSON-LD. Voici par exemple un documents AriaML valide et complet:

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

Notons que, dans un document AriaML, l'encodage est toujours UTF-8 et la valeur de <meta name="viewport"> est définie par une propriété CSS, et a "width=device-width, initial-scale=1" comme valeur par défaut. Voici son "équivalent" HTML :

<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>

Voici un deuxième exemple plus riche :

<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>

La propriété name sera interprétée par le navigateur comme étant le titre du document. De plus, l'attribut ref permet de synchroniser les éléments avec les données. L'idée n'est pas nouvelle. Elle vient du module XForm de XHTML. L'attribut ref permet de synchroniser précisément le contenu d'un élément (ou sa valeur, si c'est un champs de formulaire) avec une valeur contenue dans la couche modèle (constituée par l'ensemble des json et json-ld disponible sur la page). La valeur de cet attribut est exprimée en XPath, une technologie disponible dans tous les navigateur depuis les années 2000. La page devient "vivante" sans intervention d'un language de programation, et son écriture est plus simple et plus concise. Son équivalent HTML, inerte (car il n'y a pas de synchronisation sans javascript) et redondant :

<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>

Un "Fork" Nécessaire du HTML

Prisonnier de son immense succès, le HTML est aujourd'hui freiné dans sa capacité à évoluer. Chaque modification de sa spécification est hautement critique : il faut préserver l'existant, assurer une rétrocompatibilité totale et éviter les divergences d'interprétation entre les différents moteurs de rendu.

Pour contourner cette inertie et proposer un standard pensé dès le départ dans le respect de la vie privée (rendre JavaScript optionnel revient à limiter les vecteurs de fingerprinting) et de l'accessibilité universelle, vous pouvez considérer AriaML comme un fork moderne du HTML pour un Web résilient.

AriaML offre l'expérience utilisateur du web moderne tout en éliminant les failles zero-day régulières induites par la necessaire complexité des moteurs JavaScript.