Disabling styles breaks accessibility

  • Resolved Guillaume G.

    (@g4ll4is)


    1 month, 1 week ago

    When styles are disabled, the tooltip text merges with the content around, making the sentence impossible to understand.

    Example, where “wookie” is glossary term :

    Han Solo met a wookiee and they became friends.

    Disabling styles will make the sentence look like :

    Han Solo met a wookieeA tall hairy humanoid fictional race from Star Wars, originating from the forested planet Kashyyyk and they became friends.

    A solution would be to have some kind of fallback, so disabling styles keeps content easy to understand :

    Han Solo met a wookiee (A tall hairy humanoid fictional race from Star Wars, originating from the forested planet Kashyyyk) and they became friends.

    Note that this is an accessibility issue, as it make WCAG 1.3.2 criterion fail.

    Some user agents (screen reader, crawlers, etc.) will use content as it is with styles disabled.

    • This topic was modified 1 month, 1 week ago by Guillaume G..
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Daniele Scasciafratte

    (@mte90)

    1 month, 1 week ago

    HI,
    This can happens with page builder and other solution that alter the WordPress hook system.
    We are injecting automatically when the_content filter is used but those stuff alter the flow and create issues that are not easy to fix.
    There are also other plugins creating this issues but in the free version we offer support as it is, on the pro version we debug and see if we can do something and maybe finding the plugin generating conflicts.

    In this cases we suggest to disable the autoinjection and use the shortcode available in the PRO version that l’ets you define in your theme just the content area https://docs.codeat.co/glossary/shortcodes/#parse-content-premium

    Thread Starter Guillaume G.

    (@g4ll4is)

    1 month, 1 week ago

    Hi @mte90,

    I’ve reproduced the issue on a fresh, up-to-date, blank WordPress installation, with only Glossary PRO and Twenty Twenty Five installed and active.

    I’ve made no specific config, beside activating tooltips on Posts.

    Is the behavior still expected ?

    Thanks

    Plugin Author Daniele Scasciafratte

    (@mte90)

    1 month, 1 week ago

    No it shouldn’t happen but without a link to me is difficult to do debugging, maybe it isn’t loaded the css or the plugin is executed multiple times.
    I am not able to replicate the issue.

    Thread Starter Guillaume G.

    (@g4ll4is)

    1 day, 9 hours ago

    Hi @mte90

    Here’s an example website, where the issue occurs :

    https://www.inserm.fr/glossary-codeat-issue (redirection URL)

    The linked website is an empty WordPress installation, with only Glossary PRO installed.

    The only config applied was :

    • Settings for Post Types > Enable in > Posts
    • Settings for Tooltip > Enable tooltips on terms > Link and Tooltip
    • This reply was modified 1 day, 9 hours ago by Guillaume G..
    Plugin Author Daniele Scasciafratte

    (@mte90)

    1 day, 9 hours ago

    The tooltip content is injected in the HTML, the CSS let’s to hide/show based on the user interaction.
    Now with the examples I understood better but our plugin is not tested for accessibility and we never thought about it, I can try to put it on our roadmap to see if we can find a way to hide at all with screen readers or something like that.

    Plugin Author Daniele Scasciafratte

    (@mte90)

    1 day, 8 hours ago

    My first investigation is not positive, because we should change completely the way the tooltip is inserted in the page using ARIA or data-* attributes but this means rewrite everything because CSS is not executed and if it will works in SEO.
    The simple solution could be with JS detects when the CSS is not loaded and remove the HTML code on the fly but I am not sure if screen readers supports it.

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.