Dash and Accessibility (ARIA attributes)

Dash Python
1

Hi

Apologies for the n00b question, I don’t have much experience on dash.

At my company we have strong accessibility compliance requirements (AA) and I’m checking my Dash webapp using Siteimprove (Siteimprove Accessibility Checker - Chrome Web Store)

I get several errors due to missing aria attributes in dropdown elements

Is there any way to indicate these attributes? According to the doc I have a limited number of attributes I can add:

https://dash.plotly.com/dash-core-components/dropdown

dcc.Dropdown(
id=‘demo-dropdown’,
options=[
{‘label’: ‘New York City’, ‘value’: ‘NYC’},
{‘label’: ‘Montreal’, ‘value’: ‘MTL’},
{‘label’: ‘San Francisco’, ‘value’: ‘SF’}
],
value=‘NYC’
),

What I’m trying to achive is something that includes these aria labels:

<li id="bold1"  
    class="toggleButton"
    role="button"
    tabindex="0"
    **aria-pressed="false"**
**    aria-labelledby="bold_label"**
**    aria-controls="text1">**
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
</li>

Is there any way to achieve this?

2

You can add these properties to html components, see an example here: Can data-* attributes be created in Dash?. I’m not sure off the top of my head if that is supported for dcc.Dropdown too but the syntax would be the same. Could you give it a try and let us know?

3

Apparently not:

TypeError: The dash_core_components.Dropdown component (version 1.10.2) with the ID “concept-selector” received an unexpected keyword argument: aria-expanded
Allowed arguments: className, clearable, disabled, id, loading_state, multi, optionHeight, options, persisted_props, persistence, persistence_type, placeholder, search_value, searchable, style, value

4

Here is my example for an accessible dropdown in Dash using Dash Bootstrap Components.

html.Label('Trip Type',
	   htmlFor='trip-type'),
	   
dbc.Select(
	id='trip-type',
	value='pu',
	options=[{'label': 'Pickup', 'value': 'pu'},
			 {'label': 'Drop-off at Appointment Time', 'value': 'do'}]
)