Best way to write email addresses on webpages - email

Question

I've seen many websites (especially websites developed/designed by NIC - India) which write emails in following form -
mail[at]example[dot]com
But I personally like writing it this way (preferably in mailto: anchor tag) -
mail#example.com
Keeping in mind the reputation of NIC,
Does first form of writing has any advantages? Or it's just some old age tradition?
Which one is better considering accessibility of websites (ie screen readers etc)?
[Instead of subjective preferences, I would like to compare them on merits for sake of accessibility of websites]

Answer 1

Short Answer
mail[at]example[dot]com is an antiquated and inaccessible way of displaying email addresses in an attempt to stop web scrapers.
It makes things harder to use for everybody and nowadays is very unlikely to offer any protection so use a normal email address if you must (or better yet a contact form if spam bothers you, although I could write a whole book on how it is difficult to stop spam.)
Long Answer
Does first form of writing has any advantages? Or it's just some old age tradition?
The first version was designed originally purely to stop web scrapers from gathering email addresses.
However nowadays most web scrapers are pretty smart and will know to look for that format so I think the benefits are minimal.
You might get 10% less spam with it but that is a pure guess / conjecture.
Which one is better considering accessibility of websites (ie screen readers etc)?
Lets look at how they are read out:
mail[at]example[dot]com
This will be read as "mail left bracket at right bracket example left bracket dot right bracket com".
As you can imagine this is not ideal!
Also bear in mind that an American speech synthesizer may say "period" instead of "dot" so you make it less accessible there as it is not a familiar way to say it (minor point but important)
Along the same lines if you ever try to internationalise the site it will be a lot harder as you would have to change [at] and [dot] for a language specific name for those items.
Finally people with cognitive disorders may not associate mail[at]example[dot]com with an email address and get confused as to how to contact the company.
mail#example.com
This will be read like a normal email address "mail at example dot com". All the problems I cited above disappear.
The best option
Obviously the best option is to not have email addresses and use a contact form, but that is from a spam protection perspective.
If you don't mind the extra spam lists you will end up on then use the second option. You should also make this a link that opens the users mail client e.g. mail#example.com
When using a mailto link there isn't much you can do to protect yourself from spam as web scrapers are just looking for an email pattern and will almost certainly be looking for mailto: as an indicator of an email address, hence why we might as well show the proper email address.
Making it a link also has the added benefit that when a screen reader user navigates a page by links they will find the email address (one of the ways screen reader users orientate themselves in a page is to iterate through all links).
Displaying as an actual email address also means that everybody can copy and paste the email address to their email client if for some reason you don't make it a link or the link doesn't open their email client (they may not have one for example).
I would imagine asking someone on a mobile phone to try and copy the link with [at] in it and format it correctly would result in mistakes, frustration etc. resulting in lower conversion rates.
But I really really want to show mail[at]example[dot]com and I don't care about making it hard for people
Then you could make the email address appear like this but get read correctly in a screen reader.
We can do this using visually hidden text or using aria-label. I have included both as an example below.
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<h2>Using Visually Hidden Text (more robust)</h2>
<p>Will be read like a normal email address "mail#example.com" is what a screen reader sees</p>
<p>mail<span aria-hidden="true">[at]</span><span class="visually-hidden">#</span>example<span aria-hidden="true">[dot]</span><span class="visually-hidden">.</span>com</p>
<h2>Using aria-label (a lot easier)</h2>
<p>We use aria-label to override the contents of the paragraph for screen readers, yet again "mail#example.com" is what a screen reader sees</p>
<p aria-label="mail#example.com">mail[at]example[dot]com</p>

Answer 2

From accessibility point of view both are similar. Try by yourself using Voice Over or some other screen reader and both will be read the same.
I guess the idea was to write email addresses as the first form to make spammers more difficult to harvest email addresses from web pages.