Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements below:

Element: ariaDescribedByElements property - Web APIs

Baseline 2025

Newly available

The ariaDescribedByElements property of the Element interface is an array containing the element (or elements) that provide an accessible description for the element it is applied to. The accessible description is similar to the accessible label (see ariaLabelledByElements), but provides more verbose information.

The aria-describedby topic contains additional information about how the attribute and property should be used.

An array of subclasses of HTMLElement. The inner text of these elements can be joined with spaces to get the accessible description.

When read, the returned array is a static and read-only. When written, the assigned array is copied: subsequent changes to the array do not affect the value of the property.

The property is a flexible alternative to using the aria-describedby attribute to set the accessible description. Unlike aria-describedby, the elements assigned to this property do not have to have an id attribute.

The property reflects the element's aria-describedby attribute when it is defined, but only for listed reference id values that match valid in-scope elements. If the property is set, then the corresponding attribute is cleared. For more information about reflected element references and scope see Reflected element references in the Reflected attributes guide.

This example shows how ariaDescribedByElements can be used to get the accessible description defined using aria-describedby.

The HTML defines two <span> elements and references their ids in the aria-describedby attribute of a <button>.

<button aria-describedby="trash-desc1 trash-desc2">Move to trash</button>
…
<span id="trash-desc1">Trash will be permanently removed after 30 days.</span>
<span id="trash-desc2">Or Else!</span>

Here we'll just hide the <span> elements that contain our accessible text.

#log {
  height: 70px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

The code below first logs the value of the aria-describedby attribute from Element.getAttribute() (a string listing the id values of the referenced elements). It then checks whether the ariaDescribedByElements is supported, and if so, logs its value. Finally it returns the accessible string, calculated by iterating through the returned elements and concatenating their inner text.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const buttonElement = document.querySelector("button");
log(`aria-describedby: ${buttonElement.getAttribute("aria-describedby")}`);
// Feature test for ariaDescribedByElements
if ("ariaDescribedByElements" in Element.prototype) {
  // Get ariaDescribedByElements
  const buttonElements = buttonElement.ariaDescribedByElements;
  log(`ariaDescribedByElements: ${buttonElements}`);

  // Accessible description from the elements
  const text = buttonElements.map((e) => e.textContent.trim()).join(" ");
  log(`Accessible description: ${text.trim()}`);
} else {
  log("element.ariaDescribedByElements: not supported by browser");
}

The log below shows the original element references, the associated/returned elements, and the accessible description.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3