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

**URL:** <https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [December 2, 2022, 3:53pm UTC](https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477 "2022-12-02T15:53:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max3](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Max3](https://community.plotly.com/u/Max3)\
**Post date:** [December 2, 2022, 3:53pm UTC](https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477/1 "2022-12-02T15:53:49Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/5/e50ef3ac8751498c5220c3c06cc5a37d2dc95aca.png)

I posted my issue on [stackoverfow](https://stackoverflow.com/questions/74657472/why-are-headings-and-paragraphs-considered-as-clickable-elements-html) 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?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [December 3, 2022, 4:22pm UTC](https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477/2 "2022-12-03T16:22:36Z")

</div>

Hi @Max3 and welcome to the Dash community 🙂

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](https://www.dash-mantine-components.com/) 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.

---

<div class="post-metadata">

**Author:** ![Max3](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Max3](https://community.plotly.com/u/Max3)\
**Post date:** [December 5, 2022, 12:29pm UTC](https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477/3 "2022-12-05T12:29:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [January 11, 2023, 3:28pm UTC](https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477/4 "2023-01-11T15:28:00Z")

</div>

Hi @Max3

Good news! 🎉

The [pull request](https://github.com/plotly/dash/pull/2370) 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")`
