在HTML源代码中查找所有空链接（包含href =“ x”的空标签）的最通用方法是什么？

Question

I scanned the homepage of my website through a accessibility problem scanner ; A tool I use to find problems in my markup and information-presentation, in the context of web accessibility .

Using the WAVE report tool , I found two problems: Both of which are "empty links".

Maybe I missed that but I don't get from the tool what these links are and how to find them so I would delete them via my WordPress page builder ( Elementor ), the tool with which I created the markup for this site.

An accessibility specialist told me that doing CTRL+F then searching in source for say <a href=""></a> isn't efficient as there can many biases and AFAIK an empty link doesn't even have to be a a tag.

My question is how to find empty links, do you know a general, reliable technique I could use to gather reasonable data about these links and remove them.

Answer 1

When using the WAVE tool there is a tiny (which is why you won't have seen it) green tab sticking up from the bottom called <code> .

Click on an item you failed on and then click on this tab and it will show the affected code in the bottom pane that appears. It will also attempt to highlight the affected item for you but this isn't always clear (which is ironic given that this is an accessibility tool!!)

A reliable way to find the links is difficult because it includes SVGs, icons etc. etc. as empty, but as a general rule a script that searches for all <a> tags and then gathers their textContent (or .text() in jQuery I think) will work (if textContent is empty then it is likely a problem, you might get a few false positives but it should make life easy).