AriaML Components

AriaML Native Rich Components

AriaML Components

AriaML is an evolution of HTML. An AriaML document is entirely contained within an <aria-ml> tag. It does not use <html>, <head>, <link>, <meta>, or <body> tags, and it does not include a doctype. However, it can be embedded within an HTML document to ensure backward compatibility with browsers and search engines. A JS polyfill (webextension / standalone) handles the synchronization of metadata and style resources to make the AriaML document compatible with its HTML container (see AriaML Document Structure and AriaML Document Appearance).

AriaML inherits from HTML. The <aria-ml> tag can contain the same elements as the HTML <body> tag. Additionally, AriaML provides supplemental elements with default behaviors and appearances.

The visually-hidden attribute

The visually-hidden attribute is a native AriaML mechanism for managing the selective visibility of content. It is designed to provide essential information to assistive technologies without cluttering the visual interface.

  • Default Behavior: An element with this attribute is removed from the visual flow (its size is reduced to a minimum and its content is hidden) while remaining present and readable in the accessibility tree.
  • Contextual Reactivation: To ensure compliance with accessibility standards (specifically for skip links or interactive controls), the element automatically becomes visible and occupies its natural space as soon as it receives focus (via keyboard or programmatically) or when one of its descendants is activated.

The semantically neutral <g> container

The <g> (group) element is the basic generic container in AriaML.

  • Role: It serves exclusively to group elements for structural or layout needs.
  • Neutrality: Unlike other tags, <g> induces no cognitive overhead for screen readers unless an explicit role attribute is added to it.
  • Visual Inheritance: It acts as a transparent box facilitating the application of grouped behaviors or styles. It also allows for the configuration of style resources by linking them to a theme and/or assigning them a media query (see AriaML Document Appearance).

Elements with role="tab"

In AriaML, elements identified by role="tab" benefit from native relational intelligence. They are no longer simple buttons, but components aware of their environment within a tab system.

  • Automatic Relation Detection: Upon creation, the element automatically establishes a connection with its tablist container and identifies its "siblings" (other tabs in the same list).
  • Semantic Content Binding: The tab dynamically resolves the link to its associated content panel via the aria-controls attribute. This allows it to drive the display (hide/show) without additional configuration.
  • Standardized Behavior: It inherits the tab pattern by default, which includes selection cycle management and keyboard navigation between different panels.
    <div role="tablist" aria-label="Tabs Example">

        <button role="tab"
                aria-selected="true"
                aria-controls="panel-1"
                id="tab-1">
            Description
        </button>

        <button role="tab"
                aria-selected="false"
                aria-controls="panel-2"
                id="tab-2">
            Specifications
        </button>

        <button role="tab"
                aria-selected="false"
                aria-controls="panel-3"
                id="tab-3">
            Comments
        </button>

    </div>

    <section role="tabpanel" id="panel-1" aria-labelledby="tab-1">
        <h3>Description Content</h3>
        <p>Here is the product presentation text.</p>
    </section>

    <section role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
        <h3>Technical Sheet</h3>
        <ul>
            <li>Weight: 500g</li>
            <li>Material: Polymer</li>
        </ul>
    </section>

    <section role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
        <h3>Customer Reviews</h3>
        <p>No comments at this time.</p>
    </section>

Other elements

This section is currently under development. The objective is to natively cover at least the main use cases described by the ARIA Authoring Practices Guide (APG) patterns.

Technical Specification

AriaML components are not hard-coded in JavaScript. Instead, they are designed in a purely declarative way using a default .bhv behavior sheet.

This approach is analogous to the User Agent Stylesheet in browsers: just as HTML elements (like <h1> or <ul>) have standardized default CSS styles, AriaML elements have standardized default behaviors. You can view the default behavior sheet here.

Next: AriaML Document Structure