Black Lives Matter. Please consider donating to Black Girls Code today.
Dash Enterprise delivers an incredible 21x cost savings 💸Download the e-book!

Dash and Accessibility (ARIA attributes)

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 (https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc)

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:

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?

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?

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

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'}]
)