Accessible description

An accessible description is the description of a user interface element that provides additional information to help users of assistive technology understand the UI element and its context. It's associated with an HTML or SVG element and gives users additional context about its purpose beyond what is provided by the element's accessible name. This is particularly important for users who rely on assistive technologies like screen readers. An element's accessible description is part of the accessibility tree.

For example, the accessible name of a <table> is provided by its first <caption>. In the case of complex data tables, a sentence or two describing the table can provide a description. This can be a paragraph right before or after the table, both visually and in source code order. If elsewhere in source order, or to make the associate explicit, the aria-describedby attribute can be used to associate the table with its description.

Similarly, when a user is asked to create a password, the <label> for the <input> of type password provides its accessible name. A good accessible description includes the requirements for the password is a way that is visible to all users. It can be explicitly associated with the input via it's aria-describedby attribute, which adds it to the accessibility tree as the 'description' for that node.

Descriptions are reduced to text strings. In our password example, if the inputs's aria-describedby attribute value is the id of an HTML <ul> with a list of requirements, the description is concatenated text and text equivalents of all the list items.

You can inspect the accessible description for any element on your page: look at your browser's developer tools' accessibility tab, which provides the accessibility information for the currently selected element.

Accessible description computation

For HTML elements, if an element doesn't have an accessible description, the description needs to be programmatically associated with the related element. The accessibility object model (AOM) computes the accessible description by checking this features, in order, until it is defined:

  1. aria-describedby attribute.

  2. aria-description attribute.

  3. Language-specific features that participate in the description computation if the feature is not already being used to define the accessible name. For example:

    • A <summary> is described by the content of <details> it is nested in.
    • <input> buttons (with type attribute button, submit or reset) are described by their value attribute's value.
    • In SVG, the content of the <desc> element, if present, otherwise, the text contained in descendant text container elements (i.e. <text>), if they are not already used for the accessible name

  4. If none of the above provide a description, the title attribute is used, if the title is not the accessible name for that element.

  5. If none of the above defines an accessible description, the accessible description is empty.

The steps for defining accessible description in HTML are defined in the HTML-AAM Accessible Description). Accessible description for SVG elements follow the same steps with small differences that are enumerated at SVG-AAM Accessible Description).

See also