aria-disabled vs aria-readonly

Technical Deep Dive & Specifications

Detailed Comparison Matrix

+---------------------------------------------------------------------------------------------------+
|                            DISABLED vs READONLY BEHAVIORAL MATRIX                                 |
+---------------------+-------------------+---------------------+-----------------+-----------------+
| Attribute / Feature | Keyboard Tab Stop | A11y Tree State     | Form Submission | Value Editable? |
+---------------------+-------------------+---------------------+-----------------+-----------------+
| <button disabled>   | ❌ No (Skipped)   | disabled: true      | ❌ Excluded     | N/A             |
+---------------------+-------------------+---------------------+-----------------+-----------------+
| <button             |                   |                     |                 |                 |
|   aria-disabled="t">| ✅ Yes (Focusable)| disabled: true      | ✅ Included*    | N/A             |
+---------------------+-------------------+---------------------+-----------------+-----------------+
| <input readonly>    | ✅ Yes (Focusable)| readonly: true      | ✅ Included     | ❌ No           |
+---------------------+-------------------+---------------------+-----------------+-----------------+
| <div role="textbox" |                   |                     |                 |                 |
|   aria-readonly="t">| ✅ Yes (with tb=0)| readonly: true      | ❌ (Manual JS)  | ❌ No           |
+---------------------+-------------------+---------------------+-----------------+-----------------+

*Note: aria-disabled does not block native form submission automatically; frontend JavaScript must enforce validation preventions.

The Focusable Disabled Component Architecture

Top design systems (including GitHub Primer, Adobe Spectrum, and Microsoft Fluent) implement the Focusable Disabled Pattern for primary action triggers:

[User Tabs to Button] ──> Focus Lands on Button (tabindex="0")
                                  │
                                  ├── Screen Reader: "Proceed to Checkout, Disabled, Button"
                                  ├── Screen Reader Description: "Cart total must be at least $25"
                                  └── Mouse Click / Enter Key: Event Handler calls event.preventDefault()

Implementing aria-disabled Event Interception

Because aria-disabled="true" does not natively disable browser event dispatching, JavaScript must explicitly intercept pointer and keyboard actions:

button.addEventListener('click', (event) => {
  if (button.getAttribute('aria-disabled') === 'true') {
    event.preventDefault();
    event.stopImmediatePropagation();
    // Proactively alert the user why action failed
    showValidationTooltip();
    return;
  }
  // Execute valid transaction logic...
});

aria-readonly Specification Rules

• Allowed Roles: checkbox, combobox, gridcell, listbox, radiogroup, slider, spinbutton, textbox.
• Prohibited Roles: button, link, menuitem. (A button cannot be "read-only"—it is either operable or disabled).
• Semantics: Indicates that the user can read and navigate through the widget's contents, but cannot alter the underlying value.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 56 (readonly): Sets the standard HTML5 read-only state. The user can Tab into this field and copy text with Ctrl+C, but cannot modify the string.
• Line 68 (<button ... aria-disabled="true">): Keeps the checkout button in the natural keyboard Tab order while announcing its disabled state to screen readers.
• Line 69 (aria-describedby="checkout-help"): Binds the explanatory validation note directly to the button. When a keyboard user lands on the disabled button, they immediately hear why it is disabled.
• Line 77–83 (handleCheckout(event)): The JavaScript barrier checking aria-disabled === 'true' and invoking event.preventDefault() to prevent unauthorized submissions.

Expected Browser & Screen Reader Render Output

[Screen Reader Output on Referral Input]
"Generated Referral Code (Immutable):, REF-9876-ALPHA, Read-only Edit text. You can select and copy this code to share with colleagues."

[Screen Reader Output on Focusable Button]
"Complete Order, Disabled, Button. You must accept the Terms of Service to enable checkout."