I accepted the answer from @browly as the "correct" one for the reason I mentioned in the comment. But in this answer I will give some more information on what I actually implemented on my website, just for completeness and in the (maybe vain) hope that it helps someone else.
Preliminary remarks/context :
- I am not a web dev pro and never had any formal training in web dev; all knowledge is basically Google searched;
- I built my first website in 2003 (which I am still maintaining/updating in the original version), and have built about 5 other websites since then; all quite low-key. This is just to explain that my experience is really limited, and why my approach might seem a bit old-fashioned compared to all the flashy stuff I seen on the web nowadays;
- For the topic at hand (how to provide a person's email address on a website), I read many articles, and there does not seem to be a consensus opinion : it goes from "do everything you can to hide/obfuscate" to "it doesn't matter, the spammers can counter every method, and anyways, the email spam filters are so good that it doesn't matter if your email address can be harvested";
- I am aware of the importance to cater for the visually impaired (or other non-standard visitors), and there are obvious conflicts between some obfuscation methods and keeping information accessible for e.g. screenreaders, so I did try to meet these constraints in my own way, but I do not claim that this is 100% compliant with latest regulations.
Regarding the one but last point, I still would like to "play it safe", and not just put the email addresses in a simple
My implementation :
Next to each person's name, there is the mail symbol and the LinkedIn symbol. Previously, clicking on the mail symbol activated Google Mailhide, and the email address was shown (in a clickable link) in a (ugly!) pop-up window. Duplicating this with one of the ReCaptcha's will be my next challenge (any tips welcome !) and I will document here at a later stage.
What I did already, is showing the email address in picture format when the visitor hovers over the mail symbol (the address is kept visible for 30 seconds after the mouse has moved away from the mail symbol, so plenty of time to see the email address). I went quite far with the obfuscation (belts and suspenders) : I cut the email addresses in three png's (name, @url without tld, i.e. like a twitter handle, and finally ".com"), shown with two different css methods (background and content), in different css selectors, and with the image filenames meaningless. Overkill probably, but I had some fun inventing this. Even with a spambot going through the css, and doing some OCR on image files, I do not think that a robot could patch this together.
Downside is of course that the email address is not a clickable
mailto: link (on my to-do list as explained above), and that the email address cannot be copy/pasted as it is no text. I should add here that our email address format is very simple (see next point).
For screen readers, the email icon html is
<img alt="Our email is Lastname |at| our website address" src="mail-icon-white.png">. This is probably not perfect, but I think it is "good enough" and, maybe not entirely politically correct, if a visitor cannot interpret this, I am not sure I want to receive an email from that person ;)
The functionality implemented is that when the visitor "clicks" on the mail symbol, his mail client is opened with the correct email address (basic
mailto: functionality). And this must only work if reCaptcha v3 verification was successful and with a high score.
Some helpful posts :
And here a few helpful links about using reCaptcha v3:
and the demo : https://recaptcha-demo.appspot.com/
https://github.com/hanshuo/mailhide2 (I did not run this yet, but I understand that it just displays the mailto: link, and I want that it directly opens the mail client, i.e. one click less for the user.
My implementation is quite basic :
- I do the verification with Google/recapcha in the php script (it's all basic until here, and this happens automatically just after page load), and I decide whether the results are OK (i.e. successful call and high score) or not, and assign an alphanumeric code to a result string (I do not see the need to send the full JSON results back to the front end);
- The php script then decides based on the "Y"/"N" whether to send back the full email address (assigned based on the employee identifier), or an empty string, to the front end;