We have been doing lot of things for an element like adding or changing the name of the element by using aria-label, adding instructions by using aria-describedby, changing the states like pressed/not pressed, checked/not checked by using other aria techniques. Is it possible to customize the name of role or role of the element? I did not mean from the button to link and vice-versa. I meant different. Let us understand with the scenario what I meant.
For ex: button is the name of the role. is it possible to change from button role to attachment button as name of the role? It is not possible in aria 1.0
Aria 1.1 introduced aria-roledescription property to customize the name of the role. The method is that Put the string or custom text in the aria-roledescription attribute and it would become as a role of the element. Assistive technologies would announce the string as name of the role that is presented in the aria-roledescription but not actual role of the element. Let us understand this better with the same scenario
Button role is the actual role of the element. If I want to change from button role to attachment role then I simply add the string “attachment button” in the aria-roledescription. That is all, assistive technologies would announce it as “attachment button”.
We need to be careful while using this attribute as it suppress the native role of the element and announces the string that is presented in the aria-roledescription attribute as the name of the role.
Author notes
- Authors should use this property in conjunction with wai aria role or implicit aria semantics.
- Authors should limit the use of this attribute to clarifying non interactive elements such as group or region or to provide the description for a widget.
- Authors should ensure that The value of aria-roledescription is not empty or does not contain only whitespace characters.
Notes for assistive technology vendors
- Assistive technologies SHOULD use the value of aria-roledescription when presenting the role of an element, but SHOULD NOT change other functionality based on the role of an element that has a value for aria-roledescription. For example, an assistive technology that provides functions for navigating to the next region or button SHOULD allow those functions to navigate to regions and buttons that have an aria-roledescription.