How Safari’s WebKit Inspector Exposes the ARIA Tree

This article explains how the WebKit Accessibility Inspector in the Safari web browser processes, translates, and exposes the ARIA accessibility tree of a webpage. By bridging the gap between the Document Object Model (DOM) and native macOS accessibility APIs, WebKit converts raw HTML and WAI-ARIA attributes into a structured hierarchy. Developers can then inspect and traverse this computed accessibility data directly within Safari's Web Inspector to verify how assistive technologies perceive the page.

Generating the Accessibility Tree

When Safari renders a webpage, the WebKit engine constructs the Document Object Model (DOM) tree and the render tree. Simultaneously, it generates an Accessibility Tree.

WebKit creates this tree by evaluating the semantic meaning of standard HTML elements and applying any ARIA (Accessible Rich Internet Applications) rules defined by the developer. Elements that are purely decorative or hidden via CSS (display: none or visibility: hidden) or ARIA (aria-hidden="true") are pruned or marked as ignored. The resulting tree contains only the objects and properties relevant to assistive technologies like VoiceOver.

Mapping ARIA to Platform APIs

The WebKit engine acts as a translator between web standards and the operating system. As it builds the accessibility tree, it maps ARIA roles, states, and properties to the native macOS accessibility framework (NSAccessibility).

Rather than just showing the raw HTML attributes you wrote, the WebKit Accessibility Inspector queries this underlying WebKit accessibility object model. This ensures that the data exposed in the inspector accurately reflects the final computed state that will be communicated to the operating system's screen reader.

Locating the Tree in Safari

Unlike browsers that offer a standalone, full-tree visual graph, Safari exposes the accessibility tree contextually alongside the DOM tree. To view it:

  1. Open the Web Inspector in Safari.
  2. Select the Elements tab to view the standard DOM tree.
  3. Click on any DOM element you want to inspect.
  4. In the details sidebar on the right, select the Node tab.
  5. Scroll down to the Accessibility section.

Because the accessibility tree is a subset of the DOM tree, its hierarchy often differs from the HTML structure. WebKit exposes this modified hierarchy within the Accessibility section of the Node tab using relational links:

  • Parent: Shows the immediate accessible parent of the selected node, skipping over any unsemantic wrapper elements (like plain <div> or <span> tags) that are ignored by the accessibility tree.
  • Children: Lists the immediate accessible child nodes.

By clicking on these Parent and Children links inside the Accessibility panel, you actually traverse the ARIA accessibility tree rather than the DOM tree. If an element uses aria-owns to change the contextual relationship of elements, the inspector will reflect that modified hierarchy here.

Exposing Computed ARIA Properties

When you inspect a node, WebKit exposes the final computed values of the ARIA attributes. This allows you to see how WebKit resolves conflicts between native HTML semantics and ARIA overrides. The inspector displays several key metrics:

  • Ignored: A boolean value ("Yes" or "No"). If an element is ignored by the accessibility tree (for example, due to role="presentation" or aria-hidden="true"), the inspector explicitly states that it is ignored and suppresses irrelevant properties.
  • Role: Displays the computed role of the element. For instance, a <div role="checkbox"> will be exposed with the role of checkbox, confirming that WebKit successfully applied the ARIA override.
  • Label: Exposes the final accessible name of the element. WebKit calculates this using the standardized accessible name computation algorithm, prioritizing aria-labelledby, then aria-label, and finally falling back to native HTML labels or text content.
  • Title and Description: Shows supplemental text derived from attributes like aria-describedby or native title attributes.
  • States and Properties: Displays dynamic ARIA states. Attributes like aria-expanded="true", aria-Disabled="true", aria-invalid="true", and aria-required="true" are parsed and displayed as clear key-value pairs (e.g., Expanded: Yes, Focused: No, Invalid: Yes).

By inspecting these specific outputs, developers can confirm whether WebKit has correctly interpreted their ARIA implementation without needing to launch a screen reader for initial verification.