Thanks so much for your question! Screen readers parse CSS/HTML, so it should work as expected. 🙂 I've tested it in VoiceOver, and both link text and HREF are read correctly, with the correct email, including 'mailto:' and 'subject.'
Great solution! Love the use of innerText. Hiding the email address in this way should block 99% of the crawlers on the internet. I'm not sure if there are crawlers that render a page within a browser-like environment to steal email addresses after the page is fully rendered. To be safe, you may want to replace the mail address using an onclick event, so it stays hidden until the last moment. Might be overthinking it 😉
Yes, that may work, also, make sure to reset the href after a couple of milliseconds (10 ms was enough for me to allow the mail app to grab the email address)
Thanks so much for your insight! 🙏 If they render the page, do they render it completely, including CSS? If so, this technique is useless entirely, as they'll be able to get the email directly from HTML/text. 🙂 If not, the onclick is a good extra layer of protection, but I think then you'd also have to remove the email the page in the first place. 🤔
@@CSSWeekly it's all theory, but I would say they would render the page including the CSS. Then make a snapshot of all the rendered content and search for email addresses. So yes that would make the protection against spam useless. However in case they use the rendered HTML instead of the page content the extra protection layer with onclick might help. For myself I stopped hiding my email address on the internet. The spam filter is good enough to block most of the spam so it no real issue. In the end we web-developers have to think about the users and make the web as user-friendly as possible.
Yes, this all makes sense. I was never diligent about using or showing my email address, and it was never a problem. I'd rather deal with an occasional spam message than make it more difficult for someone to contact me. 🙂 Thanks so much for all your insight! 🙏
Even better than the previous solution, great! I will add this to my website. I also didnt know that specific difference between innerText and textContent.
It's a nice solution, but you just gave the bot developers a way around your first tip. Just make the script get innerText :)
Oh no, you're right! 🙂
How does this look like to screen readers reading the email address?
Thanks so much for your question! Screen readers parse CSS/HTML, so it should work as expected. 🙂
I've tested it in VoiceOver, and both link text and HREF are read correctly, with the correct email, including 'mailto:' and 'subject.'
Great solution! Love the use of innerText. Hiding the email address in this way should block 99% of the crawlers on the internet. I'm not sure if there are crawlers that render a page within a browser-like environment to steal email addresses after the page is fully rendered. To be safe, you may want to replace the mail address using an onclick event, so it stays hidden until the last moment. Might be overthinking it 😉
Yes, that may work,
also, make sure to reset the href after a couple of milliseconds (10 ms was enough for me to allow the mail app to grab the email address)
Thanks so much for your insight! 🙏
If they render the page, do they render it completely, including CSS? If so, this technique is useless entirely, as they'll be able to get the email directly from HTML/text. 🙂
If not, the onclick is a good extra layer of protection, but I think then you'd also have to remove the email the page in the first place. 🤔
@@CSSWeekly it's all theory, but I would say they would render the page including the CSS. Then make a snapshot of all the rendered content and search for email addresses. So yes that would make the protection against spam useless. However in case they use the rendered HTML instead of the page content the extra protection layer with onclick might help.
For myself I stopped hiding my email address on the internet. The spam filter is good enough to block most of the spam so it no real issue. In the end we web-developers have to think about the users and make the web as user-friendly as possible.
Yes, this all makes sense. I was never diligent about using or showing my email address, and it was never a problem. I'd rather deal with an occasional spam message than make it more difficult for someone to contact me. 🙂
Thanks so much for all your insight! 🙏
Even better than the previous solution, great! I will add this to my website. I also didnt know that specific difference between innerText and textContent.
I'm thrilled to hear you learned something! 🙂