We have definition role in the aria 1.0 and term role supplements the definition role. Term is nothing but a word or phrase with the corresponding definition and it is related to HTML <dt> tag. Let us take simple example to understand about this roles. Web Accessibility is the term. Provides equal access on the web for all the users including people with disabilities is the definition.
When the term and definition roles are not defined then screen reader does not understand what is term and what is definition over there. Screen reader announces that as paragraph without any semantics and this is a problem.
When term role and definition roles are defined then screen readers are expected to announce like as: “term web accessibility. Web accessibility definition provides equal access on the web for all the users including people with the disabilities”
Author notes
- Term role should not be used on the interactive elements like links
Code snippet
<div role=”term” id=’test’ aria-describedby=”dfn”>
w3c
</div>
<div role=”definition” id=”dfn”>
World Wide Web Consortium
</div>
References
What is the current level of support for these roles?
Hello Kurt,
Great question. i have the matrix for the same but i did not post it in my blog post intentionally as this might vary in the latest versions. here is the matrix till date for your reference:
Jaws and ie-Does not support
jaws and FF-Does not support
Jaws and chrome-Does not support
nvda and ie-Does not support
nvda and ff-Does not support
nvda and chrome-Does not support
Talk back and ff-Partially supports
talkback and chrome-Partially supports
Voice over and safari in iphone-Does not support
Note:
1. talkback in the chrome announces term and definition roles properly but it does not announce the information that is inside of the definition role container
2. talkback in the firefox announces the actual term along with the actual definition but there is no relation like which one is term and which one is defination
Please let me know if you need any other help.
thank you.