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?

4 posts - 3 participants

Read full topic