Accessible Name Calculation

Technical Deep Dive & Specifications

The Accessible Name vs. Accessible Description

Every accessible object in the Accessibility Tree has two primary text properties computed by the browser:

• Name: The core label of the object. This is what the screen reader speaks first when focusing the element (e.g., "Submit, Button" or "First Name, Edit text").
• Description: Additional auxiliary information spoken after a brief pause or upon requesting additional details (e.g., "Password must contain at least 8 characters").

+-------------------------------------------------------------------------------+
|                       ACCESSIBILITY NODE ARCHITECTURE                         |
+-------------------------------------------------------------------------------+
|  Role:         button                                                         |
|  Name:         "Close Dialog"      <-- Computed via AccName 1.2 Algorithm     |
|  Description:  "Unsaved changes will be lost" <-- Computed via aria-describedby|
|  State:        focusable, focused                                             |
+-------------------------------------------------------------------------------+

The W3C AccName 1.2 Computation Priority Algorithm

The W3C AccName 1.2 specification defines how browsers calculate the name of a DOM node. The priority hierarchy operates in the following descending order:

+-------------------------------------------------------------------------------+
|                     ACCNAME 1.2 DETERMINISTIC RESOLUTION                      |
+-------------------------------------------------------------------------------+
|                                                                               |
|  1. Is aria-labelledby present and valid?                                     |
|     |---> YES: Concatenate text of all target IDs separated by spaces.        |
|     |---> NO : Proceed to Step 2                                              |
|                                                                               |
|  2. Is aria-label present and non-empty?                                      |
|     |---> YES: Use the string value directly.                                 |
|     |---> NO : Proceed to Step 3                                              |
|                                                                               |
|  3. Does the element have native host language labeling semantics?            |
|     (e.g., <label for="...">, <img alt="...">, <fieldset><legend>, <svg><title>)|
|     |---> YES: Compute name from native labeling mechanism.                   |
|     |---> NO : Proceed to Step 4                                              |
|                                                                               |
|  4. Does the element's ARIA Role allow "Name from Contents"?                  |
|     (e.g., button, link, heading, tab, menuitem, checkbox)                    |
|     |---> YES: Recursively traverse child text nodes & pseudoelements.        |
|     |---> NO : Proceed to Step 5                                              |
|                                                                               |
|  5. Fallback Attributes: title or placeholder                                 |
|     |---> Use title or placeholder attribute value if present.                |
|                                                                               |
+-------------------------------------------------------------------------------+

Attribute Comparison Matrix

The "Name from Subtree" Rule

Certain interactive elements (like <button>, <a>, <th>, <summary>) calculate their accessible name from their child text nodes by default. However, when aria-label or aria-labelledby is declared, the entire child DOM subtree is completely discarded for accessible name calculation:

<!-- The visible word "Cancel" is completely obliterated from the A11y Tree! -->
<button aria-label="Permanently Delete Account">
  Cancel
</button>
<!-- Screen Reader announces: "Permanently Delete Account, Button" -->

Multi-ID Resolution with aria-labelledby

aria-labelledby accepts multiple ID references separated by spaces. The browser concatenates the text content of those nodes in the exact order specified:

<span id="qty-lbl">Quantity</span>
<span id="item-lbl">Organic Colombian Coffee</span>
<input type="number" value="2" aria-labelledby="qty-lbl item-lbl">
<!-- Accessible Name: "Quantity Organic Colombian Coffee" -->

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 26 (<h2 id="billing-hdr">): Serves as the primary context node for the composite label.
• Line 27 (<p id="sub-hdr">): Serves as the sub-context node.
• Line 29 (<label id="street-lbl" for="street-input">): Standard HTML label element, also assigned an id so it can participate in composite naming.
• Line 33 (aria-labelledby="billing-hdr sub-hdr street-lbl"): Instructs the browser to concatenate the text from all 3 IDs: "Billing Address Primary Residence Street Address". This completely overrides the standard <label for> association.
• Line 34 (aria-describedby="street-hint"): Connects the helper paragraph as the accessible description. Screen readers announce this after the input type.
• Line 41 (<button class="icon-btn" aria-label="Close notification banner" ...>): Provides an explicit text name for an otherwise empty icon button.
• Line 42 (<svg ... aria-hidden="true">): Hides the raw SVG graphic nodes from the accessibility tree so they don't produce garbage character readings.

Expected Browser & Screen Reader Render Output

[Visual Display]
-----------------------------------------
Billing Address
Primary Residence
Street Address
[  Input Box                        ]
Include apartment, suite, or unit number if applicable.

[ X ] (Icon button)  Will dismiss for 24 hours.
-----------------------------------------

[Screen Reader Focused Announcement]
Input:
"Billing Address Primary Residence Street Address, Edit text. Include apartment, suite, or unit number if applicable."

Icon Button:
"Close notification banner, Button. Will dismiss for 24 hours."