Description
As we discussed in the past, assistive technologies like screen readers may not be able to notify the changes that are happening elsewhere on the page while user is going through the web content at his/her own pace unless live region is set. As part of live regions, we covered the aria-live and aria-atomic in the past. Let us understand about aria-relevant as part of this blog post. Live regions may contain multiple changes and all of them may or may not be required for the user to notify. To control these multiple changes, authors can use aria-relevant attribute. Let me give an example. Imagine there is chat log. As soon as there is new message in the chat log, user should be notified about this change because it is relevant in this contexts. Similarly, previous chat messages sometimes may be removed from the chat log to accommodate new chat messages in the log. However, this particular change need not to be notified to the user as it does not have any meaning.
To put it simpler, Aria-relevant is an optional property for aria-live and it basically talks about what type of changes to be notified to the users within the live region. Aria-relevant accepts list of token values such as additions, removals, text, additionstext, all.
Author notes
- Aria-relevant can be used on any base markup and it is the global attribute
- The default value of aria-relevant is additionstext for all elements. This means that authors can leave aria-relevant to it’s default value if assistive technologies to notify about the new node as well as modified node text/modified image alt text within the accessibility tree
- Authors can set aria-relevant to additions if assistive technologies to notify about the new node
- Authors can set aria-relevant to removals if assistive technologies to notify about the removal node
- Authors can set aria-relevant to text if assistive technologies to notify about the modified node text/modified image alt text
- Authors can set aria-relevant to all if assistive technologies to notify about all the changes such as new node, removed node, modified node text/modified image alt text
Sample code snippet
<ul aria-live=”polite”
aria-relevant=”additions”>
<li>Item 1</li>
<li>Item 2</li>
<li>item 3</li>
</ul>
Complimentary info on aria-relevant
The removals value of aria-relevant attribute should be used sparingly. In other words, Authors should
not use removals value in all the contexts rather authors should use removals value whenever it makes sense for the user to notify about the removed content. To give you an example, it is important/relevant for the user to notify about who left the meeting in the virtual meeting/conference.
Another important point to make a note of removal value is that most of the screen readers except voice over do not have great support on removal value as of now.
References