What does "Defines an explicit role for an element for use by assistive technologies" mean?

Dash Python
1

I’ve noticed I can use a role as part of an id instead of a unique id. I’m wondering what the point of this is? All I can find in the documentation is “Defines an explicit role for an element for use by assistive technologies.”. I haven’t seen an example of what this would do for me?

In short, how do these two ways of defining a Dash component differ?

dcc.Dropdown(id={'role': 'initial-dropdown'},
                             options=[
                                {'label': 'One', 'value': 1},
                                {'label': 'Two', 'value': 2}
                                ],
                             value=1)

dcc.Dropdown(id='initial-dropdown',
                             options=[
                                {'label': 'One', 'value': 1},
                                {'label': 'Two', 'value': 2}
                                ],
                             value=1),
2

Hi @thelonekiddo and welcome to the Dash community :slightly_smiling_face:

The role prop is on all the Dash html components.

role (string ; optional): Defines an explicit role for an element for use by assistive technologies.

For example, you could use it like this - but it is NOT recommended:

html.Div("Enter", role="button", className="btn", id="my-button")

A screen reader would announced this Div as an “Enter Button”. However, it would be better to use the html.Button component instead. When you use the correct component, the role is implied and it is not necessary to add the role prop.

html.Button("Enter", id="my-button")

You can find a lot more information about accessibility and how to use the role prop in the MDN Web Docs

ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object.

So bottom line is you should avoid using the role prop unless it’s absolutely necessary for making your site work well with tools like screen readers.

Note that in your dropdown example, you are setting the id prop. This will have no effect on the role, so there is no point. The dictionary id’s are typically used for Pattern Matching Callbacks

1 Like