Image Map maps triggering Underlined Text warnings?

[oldrup]

• [x] I've read and understood the contribution guidelines.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened.

Image Map Missing Alternative Text error appears also to trigger Underlined Text warning, as of the latest version. Screenshot at bottom:

Please describe what you expected to happen and why.

I upgraded to the latest version, and now my image maps apparently trigger Underlined Text warning too. Pretty sure it didn't do that before the update.

How can we reproduce this behavior?

1. Create a WordPress post
2. Copy image and source code as shown on https://test.oldrup.dev/accessibilitychecker/#image-map-missing-alternative-text
3. Run Accessibility Checker

Technical info

• WordPress version:
• Accessibility Checker version: 1.14.3
• If relevant, which editor is affected (or editors):
• [ ] Classic Editor
• [x] Gutenberg
• [ ] Classic Editor plugin
• [ ] Page Builder (please specify):

• Which browser is affected (or browsers):

• [ ] Internet Explorer

• [ ] Edge

• [ ] Chrome

• [x] Firefox

• [ ] Safari

• [ ] Brave

• Relevant plugins in case of a bug:

• Tested with theme: Blocksy, Twenty-Nineteen

On front end

In the back end

Something you can reproduce?

[pattonwebz]

Hey @oldrup

I took a look at this last week and again just a few minutes ago I am not able to see the same results that you are seeing on your test site. I also quickly ran it through an older offsite scan directly on your test url and also am not detecting the issue (worth noting this is build from not the latest plugin but the underlined text checks should be the same).

Is there any way you can duplicate the page and have it scanned again to see if it detects it on another page?

I tested with twentytwentythree theme and the twentytwentyfour theme. It is possible that some theme style rule on your test site is applying and tripping up the scan but looking at the page computed styles on your test site I don't see that from what I can view on the frontend.

Let me know if you can replicate the same issue on a duplicate page.

And thanks for sharing the url that has a pattern export file on it, that was super helpful for me to be able to make sure I was replicating the exact same markup you had :)

[oldrup]

Hey @pattonwebz

Thank you for looking into this.

Yes, I was able to reproduce this issue, on an entirely different site; my own blog, still running WP 6.5.

But

During my troubleshooting, I learned that the first time I save the page with the image map, Accessibility Checker throws the error "image map missing alt text". But the second time I save it gets "converted" to an underlined text error.

There is a slightly painful screencast at https://app.screencastify.com/v3/watch/rdOXQNIVuAXp0fixJYxx

And a zip file, including only the image map pattern and the related image for you to test with. image-map-trouble-shooting.zip

Remember; the first time the page is saved: error as expected - the second time: underline warnings 🤷‍♂️

[pattonwebz]

I appreciate you being so thorough with the debugging here. Even following the same path as you and taking the same pattern from the first link and from here, I can't make it trigger this same error on my side.

It highlights a few things I need to look at and fix, but none answer why this image map is triggering the wrong error. The big one is that the scan has 2 stages and the 2nd stage of the scan is not running when you create a brand new post and save it. The underlined_text rule runs in that 2nd phase scan group, which explains why you can see it not firing on the first publish. When you reopen the page for editing, both stages are run, and it detects it then.

The underlined_text rule check should not even look at the area tags because they have a href value and are technically valid elements to have underlines.

I'll dig deeper into it tomorrow and see if I can find some answers. If I don't make any progress, is there any possibility that you could grant me access to a copy of the site that shows the issue so that I can see the problem in action and look at the exact inputs and outputs that the rules get on the site?

[oldrup]

Hi @pattonwebz

Thank you, too, for helping out. I know debugging someone else's issues is time-consuming. AC helps improve the technical quality of the code, actually, but false positives might make the editor not to pay attention.

Also; I'm just annoyed, I don't understand how this issue even exists 😉

I wanted to make sure, that my HTML markup of the image map was OK, so I copied an example from MDN, removed a couple of the alt text (to trigger the related error), and same thing:

Live test url: https://test.oldrup.dev/accessibilitychecker/mdn-image-map/

Simple json export of the MDN Image Map pattern:

mdn-image-map.json

Thanks for the explanation of the two stages, I wasn't aware of that. Does help a little.

And yes, I can totally grant you temporary access to the site. Using the email in your profile?