ARIA Architecture: The First Rule of ARIA, Roles, States, and Properties

01The First Rule of ARIA

Accessible Rich Internet Applications (W3C ARIA) is a specification designed to provide semantics to assistive technologies when native HTML lacks appropriate elements. ARIA introduces role, state, and property attributes (like role="tablist", aria-expanded="false").

However, the official W3C specification opens with a famous and critical dictum known as The First Rule of ARIA:

"If you can use a native HTML element or attribute with the semantics and behavior you require already built-in, instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible, then DO SO."

Why? Because native HTML elements (<button>, <select>, <dialog>) include free, bulletproof keyboard support, focus management, and accessibility tree integration built into browser C++ engines. Writing <div role="button" tabindex="0"> requires manually implementing click, space, enter, focus styling, and state synchronization—which developers almost always break.

<!-- BAD ANTI-PATTERN (Violates 1st Rule of ARIA!): --><!-- <div role="button" tabindex="0" onclick="toggle()">Menu</div> --><!-- EXCELLENT (Native HTML button with dynamic ARIA state): --><button type="button"         id="menu-btn"         aria-expanded="false"         aria-controls="mobile-nav"         aria-haspopup="true">    Navigation Menu</button><nav id="mobile-nav" aria-label="Mobile Navigation" hidden>    <ul>        <li><a href="/" aria-current="page">Home</a></li>        <li><a href="/docs">Documentation</a></li>    </ul></nav><script>    const btn = document.getElementById('menu-btn');    const nav = document.getElementById('mobile-nav');        btn.addEventListener('click', () => {        const isExpanded = btn.getAttribute('aria-expanded') === 'true';        btn.setAttribute('aria-expanded', !isExpanded);        nav.hidden = isExpanded; // Native hidden attribute manages display & a11y!    });</script>

02ARIA States vs Properties

ARIA attributes fall into two categories:

1. Properties: Characteristics that rarely change during component lifecycle (e.g., aria-labelledby="id", aria-describedby="id", aria-controls="id").

2. States: Dynamic characteristics that change frequently as the user interacts with the UI (e.g., aria-expanded="true|false" on collapsible menus, aria-checked="true|false" on custom toggles, aria-hidden="true|false" for hiding decorative icons).

Whenever JavaScript alters the visual presentation of an interactive widget, it MUST synchronously update the corresponding ARIA state attribute so screen readers reflect the change immediately.

03aria-hidden="true" for Decorative Icons

Modern web designs frequently place vector SVG icons or font glyphs next to text labels (e.g. a shopping cart icon next to the word 'Checkout').

If an icon is purely decorative and its meaning is already conveyed by adjacent text, declare aria-hidden="true" on the icon element. This prevents screen readers from reading meaningless character codes or redundant descriptions.

04Common ARIA Attributes Reference

A summary of essential ARIA attributes and their usage:

Synchronize ARIA states in JavaScript whenever user actions mutate DOM visibility.

+-----------------------+---------------------+-----------------------------------------+| ARIA Attribute        | Type                | Intended Purpose                        |+-----------------------+---------------------+-----------------------------------------+| aria-expanded         | State (true/false)  | Indicates if collapsible drawer is open || aria-current="page"   | State (token)       | Identifies current active navigation link|| aria-hidden="true"    | State (true/false)  | Hides decorative elements from a11y tree|| aria-describedby      | Property (ID list)  | Links input to auxiliary helper hint    || aria-labelledby       | Property (ID list)  | Assigns element accessible name from ID |+-----------------------+---------------------+-----------------------------------------+

05Production Standards & Real-World Engineering Trade-Offs

Web accessibility is not merely an optional polish phase; it is an ethical, legal, and operational prerequisite for modern web software. Compliance with WCAG 2.2 Level AA guidelines ensures that applications remain fully functional for users navigating via keyboards, screen readers, switch access devices, and voice control software. Adhering to the First Rule of ARIA—never use ARIA when a native HTML element already exists—prevents catastrophic accessibility regressions.

Concurrently, semantic HTML forms the backbone of technical Search Engine Optimization (SEO) and social discoverability. Search engine web crawlers and social graph scrapers rely on structured document outlines, canonical links, and Open Graph metadata to index pages, generate rich snippets, and drive organic discovery across global web ecosystems.