How to remove events from dash html components to avoid misinterpretation by screen readers

Dash Python
1

I am trying to make my dash app more accessible, e.g. for users relying on screen readers. In order to test my app I use the Accessibility Inspector built into Firefox. Here I run into issues concerning focusability and interactivity of elements which are supposed to show text (e.g. headings and paragraphs).

I create my elements like this:

html.H1(
 children="this is my header"
)

html.P(
 children="this is text"
)

The Accessibility Inspector yields the following warning:
Clickable elements must be focusable and should have interactive semantics

I took a glance at the HTML of my app in Firefox and found that there are “events” shown for h1, Screenshot:

html-header
html-header750Ă—311 20.1 KB

I posted my issue on stackoverfow where another user took a closer look on dash apps and how the widely used screen reader NVDA interprets dash apps. He found that headers in dash apps are per default interpreted as clickable.

This creates confusion for users of screen reader or other assisting devices. Is it possible to remove these “events” from dash html components?

2

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

I’m not sure if there is a way to remove the event listener from dash html components. However, you could try using the Dash Mantine Components library. The underlying mantine componets are accessible. You can find components like dmc.Text and dmc.Title that do not have the n_clicks prop.

3 Likes
3

Thank you very much @AnnMarieW. Using dmc.Title and and dmc.Text resolves the warnings of the Accessibility Inspector.

2 Likes
4

Hi @Max3

Good news! :tada:

The pull request to make Dash more screen-reader friendly has been approved and will be in the next release (2.7.2)

There is a new disable_n_clicks prop in all html components, giving the ability to remove the event listener that interferes with screen readers.

By default, n_clicks will be enabled on any html component that has an id. If n_clicks is not used in a callback for that component, the event listener can be removed by setting disable_n_clicks=True`

For example:

  • No event listener:
    html.Div()
    html.Div(id="my-id", disable_n_clicks=True)

  • onClick event listener:
    html.Div(id="my-id")

3 Likes