Warum werden Überschriften und Absätze als klickbare Elemente (HTML) angesehen.HTML

HTML-Programmierer
Anonymous
 Warum werden Überschriften und Absätze als klickbare Elemente (HTML) angesehen.

Post by Anonymous »

Ich versuche, mein Webapp (erstellt mit Python Dash) zugänglicher zu machen, z. Für Benutzer, die sich auf Bildschirmleser verlassen. Um mein WebApp zu testen, verwende ich den in Firefox integrierten Barrierefreiheitsinspektor. Hier stoße ich auf Probleme in Bezug auf die Fokussierbarkeit und Interaktivität von Elementen, die Text anzeigen sollen (z. B. Überschriften und Absätze). >

Code: Select all

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

html.P(
children="this is text"
)`
In diesen Fällen gibt der Barrierefreiheitsinspektor die folgende Warnung:
Klickbare Elemente müssen fokierbar sein und sollte eine interaktive Semantik haben < /p>
Um dies aufzulösen, habe ich meinen Elementen 'Tabindex' hinzugefügt: < /p>
html.H1(
children="this is my header",
tabIndex='0'
)

html.P(
children="this is text",
tabIndex='0'
)
< /code>
Dies hat einen Teil der Warnung beseitigt. Jetzt habe ich diese Warnung erhalten:
fokussierbare Elemente sollten interaktive Semantik haben < /strong> < /p>
von dem, was ich bisher auf Zugänglichkeit gesammelt habe, ist eine schlechte Praxis, nicht interaktiv zu geben Elemente wie Überschriften a 'Tabindex'. Mein zweiter Ansatz ist also wahrscheinlich bereits in die falsche Richtung. < /P>
Können Sie mir bitte sagen, wie ich mit der ersten Warnung umgehen soll? Und warum werden Überschriften und Absätze als klickbare Elemente angesehen? Sie enthalten keinen Link oder etwas anderes. :
Screenshot HTML < /p>
Lösung < /strong>: Ich habe meine Frage im Plotly Community -Forum gestellt (https://community.plotly.com/t/how-to-- ... ders/70477). Sie zeigten mich auf die Bibliothek der Dash-Mantinenkomponenten (https://www.dash-mantine-components.com/), die dmc.title und dmc.text enthält, die anstelle von html.h1-h6 und html.p verwendet werden können . Dies löst mein Problem.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post