AOM Phase 1 - ARIA reflection

This specification describes the additions to the ARIA 1.2 specification which will make it possible for web authors to programmatically express Element semantics via an IDL interface.

IDL Interfaces

This section is part of the ARIA 1.2 Specification, and is included here for informative purposes only.

Conforming user agents MUST implement the following IDL interfaces.

Interface Mixin AccessibilityRole

interface mixin AccessibilityRole {
attribute DOMString? role;
};
Element implements AccessibilityRole;

ARIA Role Reflection

User agents MUST reflect the role content attribute as the role IDL attribute on Element instances.

Interface Mixin AriaAttributes

  interface mixin AriaAttributes {
    attribute DOMString? ariaActiveDescendant;
    attribute DOMString? ariaAtomic;
    attribute DOMString? ariaAutoComplete;
    attribute DOMString? ariaBusy;
    attribute DOMString? ariaChecked;
    attribute DOMString? ariaColCount;
    attribute DOMString? ariaColIndex;
    attribute DOMString? ariaColSpan;
    attribute DOMString? ariaControls;
    attribute DOMString? ariaCurrent;
    attribute DOMString? ariaDescribedBy;
    attribute DOMString? ariaDetails;
    attribute DOMString? ariaDisabled;
    attribute DOMString? ariaErrorMessage;
    attribute DOMString? ariaExpanded;
    attribute DOMString? ariaFlowTo;
    attribute DOMString? ariaHasPopup;
    attribute DOMString? ariaHidden;
    attribute DOMString? ariaInvalid;
    attribute DOMString? ariaKeyShortcuts;
    attribute DOMString? ariaLabel;
    attribute DOMString? ariaLabelledBy;
    attribute DOMString? ariaLevel;
    attribute DOMString? ariaLive;
    attribute DOMString? ariaModal;
    attribute DOMString? ariaMultiLine;
    attribute DOMString? ariaMultiSelectable;
    attribute DOMString? ariaOrientation;
    attribute DOMString? ariaOwns;
    attribute DOMString? ariaPlaceholder;
    attribute DOMString? ariaPosInSet;
    attribute DOMString? ariaPressed;
    attribute DOMString? ariaReadOnly;
    attribute DOMString? ariaRelevant;
    attribute DOMString? ariaRequired;
    attribute DOMString? ariaRoleDescription;
    attribute DOMString? ariaRowCount;
    attribute DOMString? ariaRowIndex;
    attribute DOMString? ariaRowSpan;
    attribute DOMString? ariaSelected;
    attribute DOMString? ariaSetSize;
    attribute DOMString? ariaSort;
    attribute DOMString? ariaValueMax;
    attribute DOMString? ariaValueMin;
    attribute DOMString? ariaValueNow;
    attribute DOMString? ariaValueText;
  };
  Element implements AriaAttributes;

ARIA Attribute Reflection

User agents MUST reflect the following content attributes to each of the corresponding IDL attributes on Element instances.

IDL Attribute	Reflected ARIA Content Attribute
ariaActiveDescendant	aria-activedescendant
ariaAtomic	aria-atomic
ariaAutoComplete	aria-autocomplete
ariaBusy	aria-busy
ariaChecked	aria-checked
ariaColCount	aria-colcount
ariaColIndex	aria-colindex
ariaColSpan	aria-colspan
ariaControls	aria-controls
ariaCurrent	aria-current
ariaDescribedBy	aria-describedby
ariaDetails	aria-details
ariaDisabled	aria-disabled
ariaErrorMessage	aria-errormessage
ariaExpanded	aria-expanded
ariaFlowTo	aria-flowto
ariaHasPopup	aria-haspopup
ariaHidden	aria-hidden
ariaInvalid	aria-invalid
ariaKeyShortcuts	aria-keyshortcuts
ariaLabel	aria-label
ariaLabelledBy	aria-labelledby
ariaLevel	aria-level
ariaLive	aria-live
ariaModal	aria-modal
ariaMultiLine	aria-multiline
ariaMultiSelectable	aria-multiselectable
ariaOrientation	aria-orientation
ariaOwns	aria-owns
ariaPlaceholder	aria-placeholder
ariaPosInSet	aria-posinset
ariaPressed	aria-pressed
ariaReadOnly	aria-readonly
ariaRelevant	aria-relevant
ariaRequired	aria-required
ariaRoleDescription	aria-roledescription
ariaRowCount	aria-rowcount
ariaRowIndex	aria-rowindex
ariaRowSpan	aria-rowspan
ariaSelected	aria-selected
ariaSetSize	aria-setsize
ariaSort	aria-sort
ariaValueMax	aria-valuemax
ariaValueMin	aria-valuemin
ariaValueNow	aria-valuenow
ariaValueText	aria-valuetext

Note: Attributes aria-dropeffect and aria-grabbed were deprecated in ARIA 1.1 and do not have corresponding IDL attributes.

Disambiguation Pattern

Though specification authors may make exceptions to this pattern, the following rules were used to disambiguate names and case of the IDL attributes listed above.

Any attribute name referencing concepts that are combinations of two or more words (such as "described by") becomes a camel-cased IDL attribute capitalizing each word boundary. For example, aria-describedby becomes ariaDescribedBy with both the D and B capitalized.
Likewise, any attribute name referencing concepts that can be hyphenated (such as "multi-selectable") becomes a camel-cased IDL attribute capitalizing each hyphenation boundary. For example, the only valid spelling for "multi-selectable" is hyphenated, so aria-multiselectable becomes ariaMultiSelectable with both the M and S capitalized.
When trusted dictionary sources list both hyphenated or non-hyphenated spellings (e.g. "multi-line" and "multiline" are both valid spellings) use the hyphenated version and apply the hyphenation rule above. For example, aria-multiline becomes ariaMultiLine with both the M and L capitalized.
If all trusted dictionary sources list a single spelling of a compound word with no spaces or hyphens, only the first letter of the term is capitalized. For example, neither “place-holder” nor “place holder” are considered valid spellings of the term “placeholder,” so aria-placeholder becomes ariaPlaceholder with only the P capitalized.
There are currently no acronym-based ARIA attributes, but if future attributes include acronym usage, attempt to match existing DOM conventions (e.g. ID becomes Id).

IDL Attribute Name Notes or Exceptions

Any notes or exceptions for specific attribute names will be listed here.

ariaPosInSet: The aria-posinset attribute refers to an item's position in a set (two words: "in set") rather than the "inset" of an item from the beginning of the collection. Therefore the IDL attribute name is ariaPosInSet with the P, I, and second S capitalized, not ariaPosInset.

Editor's Note: Should we make an exception on the spelling of "placeholder" and capitalize the H anyway? Some developers will expect this to be ariaPlaceHolder despite the fact that it's not a hyphenated word.

Example IDL Attribute Usage

The primary purpose of ARIA IDL attribute reflection is to ease JavaScript-based manipulation of values. The following examples demonstrate its usage.

<div id="inaccessibleButton">
  <!-- Use semantic markup instead. This is just a retrofit example. -->
</div>

// Get a reference to the element.
let el = document.getElementById('inaccessibleButton'); 
el.tabIndex = 0; // Make it focusable.

// Set the role and label.
el.role = "button";
el.ariaLabel = "Edit";

// Get the role and label.
el.role; // Returns "button"
el.ariaLabel; // Returns "Edit"

// These are interchangeable with the more verbose setAttribute and getAttribute methods.
el.setAttribute("role", "button");
el.setAttribute("aria-label", "Edit");
el.getAttribute("role"); // Returns "button"
el.getAttribute("aria-label"); // Returns "Edit"

// Changes via either interface are reflected by the other.
el.setAttribute("aria-label", "Delete");
el.ariaLabel; // Returns "Delete"
el.ariaLabel = "Publish";
el.getAttribute("aria-label"); // Returns "Publish"