How to avoid announce inner content when using aria-description

Viewed 31

I am wondering how can I make the narrator only announce the aria-description but not the inner content. For example:

<span aria-description="abc">"def"</span>

I want it to announce "abc" only. Can I get some help?

If not possible to announce "abc" only, is it possible to announce the inner content before the aria-description?

Thanks!

1 Answers

There is a difference between label and description. aria-label is meant to provide an accessible name that overwrites other means of labelling the element, including its text contents.

An accessible description is supplementary information and will always be read in addition to the element’s accessible name, usually after the label, as you would like to achieve as an alternative.

Always include the visible text in the accessible label

Beware that a lot of users of screen readers like narrator are sighted, and that voice control software needs both a visible and an accessible name to identify interactive elements. Therefore, it’s an accessibility requirement that the calculated accessible name (f.e. based on ARIA properties) include the visible name:

Understanding Label in Name

So you must not provide completely different texts visually and to assistive technology.

Accessible names for non-interactive elements

Currently, attributes that provide an accessible name or description, are only effective on interactive elements that can be focussed.

In your example you are using a <span>, assistive technology only would expose the description or name if the span takes part in the calculation of the accessible name of another element.

Related