CODEWITHSUNDEEP
htmlaccessibilityplotly-dash
Maxhlnug2021
Maxhlnug2021

Reputation: 45

Why are headings and paragraphs considered as clickable elements (HTML)

I am trying to make my webapp (created with Python Dash) more accessible, e.g. for users relying on screen readers. In order to test my webapp 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).

First I created my elements like this:

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

In these cases the Accessibility Inspector yields the following warning:

Clickable elements must be focusable and should have interactive semantics

In order to resolve this, I added 'tabIndex' to my elements:

    html.H1(
     children="this is my header",
     tabIndex='0'
    )
    
    html.P(
     children="this is text",
     tabIndex='0'
    )

This eliminated one part of the warning. Now I got this warning: Focusable elements should have interactive semantics

From what I gathered on accessibility so far it is bad practice to give non interactive elements like headings a 'tabIndex'. So my second approach is probably already going in the wrong direction.

Can you please tell me how to deal with the first warning instead? And why are headings and paragraphs considered as clickable elements? They do not contain a link or anything else.

Update: If I take a look at the HTML in Firefox, the header looks like this: screenshot HTML

Solution: I asked my question in the Plotly Community Forum (https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477) as well. They pointed me towards the dash mantine components library (https://www.dash-mantine-components.com/), which includes dmc.Title and dmc.Text which can be used instead of html.H1-H6 and html.P. This resolves my issue.

Upvotes: 0

Views: 1211

Answers (2)

Paul Martz
Paul Martz

Reputation: 166

I'm totally blind and use the VoiceOver screen reader on MacOS. Sometimes I use Safari, other times Google Chrome. I've noticed a significant difference between the two browsers. While navigating a web page, VoiceOver reads each element. However, Google Chrome often says, "clickable," after reading the element. This is quite common for headings and static text. Just reading this Stack Overflow post , it was a challenge to determine whether the word "clickable" was being announced because it was part of the text, or because Chrome was telling VoiceOver to announce it after literally every HTML text element. Personally, I think this is a bug in Chrome. If I can't click on static text marked as an HTML paragraph, Chrome should not announce that text as clickable. Safari doesn't have this behavior, but it has its own share of issues.

I hope my comment is valuable, as it seems a lot of accessible development happens without considering the experience of those who will be using those accessible UIs. I'm sharing this experience in the hopes that someone with some

Upvotes: 0

slugolicious
slugolicious

Reputation: 17553

I looked at some sample Dash applications, https://dash.gallery/dash-clinical-analytics/, and indeed the headings on that demo are "clickable".

enter image description here

"Clinical Analytics" is an <h5> and "Welcome to the Clinical Analytics Dashboard" is an <h3>. Both have an event handler for the click event.

enter image description here

That will cause some screen readers to say those elements are "clickable". Here's what NVDA says when I use the H key to navigate to the headings:

  • "Clinical Analytics, heading, clickable, level 5"
  • "Welcome to the Clinical Analytics Dashboard, heading, clickable, level 3"

The screen reader is trying to help the user let them know that an event handler is on that element and that it can be clicked on. However, headings are not normally considered interactive elements so it'll be confusing.

This seems like a bug in Dash.

The error you're getting, "Clickable elements must be focusable and should have interactive semantics" is accurate. It has two parts:

  1. "elements must be focusable" - anything that you can interact with using a mouse should be interactable (word?) with the keyboard. In order to interact with the element, you first have to be able to get your keyboard focus to it, thus the error message.

  2. "elements should have interactive semantics" - when a screen reader user navigates to an interactive element, they should hear the role of that element and that role should convey that the element is an interactive element. The headings do have semantics, NVDA says they're "headings", as noted above, but the error message says it should be "interactive semantics", not just "semantics".

All this info doesn't explain how to fix your problem but I wanted to post the "why" of the error message, and I couldn't fit all this into a simple comment :-)

Upvotes: 0

Related Questions