Max Design

Published:

The Accessible Name and Description Computation describes how browsers calculate accessible names and descriptions for elements.

Throughout the specification, you’ll see the term “accumulated text”.

But what does “accumulated text” actually mean?

When the browser tries to compute an accessible name — for example, by following aria-labelledby references or collecting text from child nodes — the algorithm needs a temporary place to store the text it gathers.

Because the browser may need to pull text from several different locations (such as multiple referenced nodes or multiple child elements), it builds this up piece by piece in a temporary storage area called the “accumulated text”.

Think of this as an “accumulated text bucket” — a container the browser fills with bits of text from different sources before deciding what the final name should be.

“Accumulated text bucket” isn’t an official term from the specification, but it’s a useful way to visualise how the algorithm collects, updates, and sometimes replaces text as it computes an accessible name.

An “accumulated text” example

In the example below, the button’s aria-labelledby attribute references two IDs. Its accessible name is created from both sources:

<button aria-labelledby="aaa bbb"></button>
<p id="aaa">Buy Lawn Mower</p>
<p id="bbb">On special</p>

The algorithm collects text from each referenced element, placing each piece into the “accumulated text” bucket. Once both sources are processed, the bucket contains:

“Buy Lawn Mower On special”

These text strings are concatenated to form the button’s final accessible name.

Emptying the bucket

Sometimes new naming rules take priority over earlier ones. When that happens, the browser must “empty the bucket” and start again.

The Accessible Name and Description Computation includes the following rule:

2.2 If the current node has an aria-labelledby attribute with at least one valid IDREF, and the node is not already part of an ongoing aria-labelledby or aria-describedby traversal, then:

2.2.1 Set the accumulated text to the empty string. (Empty the bucket.)

In plain language:

If an element has a valid aria-labelledby, the browser clears anything it has collected so far because the accessible name must come only from the referenced elements.

A simple example:

<button aria-labelledby="aaa">
  Hello world
</button>
<p id="aaa" style="display: none;">Goodbye world</p>

The button contains visible text (“Hello world”), but the aria-labelledby rule overrides it.

The browser must:

  1. Empty the accumulated text bucket
  2. Ignore the button’s own content
  3. Use only the text from the referenced element
  4. Produce the final name: “Goodbye world”

What is “total accumulated text”?

The specification also refers to “total accumulated text,” which is the combined text collected from all relevant parts of the element and its referenced nodes.

This “total accumulated text” is then concatenated into a single string to produce the element’s final accessible name.

Conclusion

It can help to think of “accumulated text” and “total accumulated text” as buckets. Text is added as the browser works through the naming process, then combined to create the accessible name.