我见过许多网站(尤其是NIC-印度开发/设计的网站(，它们以以下形式写电子邮件-
邮件[at]示例[dot]com
但我个人喜欢这样写(最好是在mailto:锚标签中(-
mail@example.com
牢记NIC、的声誉
- 第一种写作形式有什么优势吗？或者这只是一些古老的传统
- 考虑到网站的可访问性(即屏幕阅读器等(，哪一个更好
[不是主观偏好，为了网站的可访问性，我想比较它们的优点]
简短回答
mail[at]example.dot]com是一种过时且无法访问的显示电子邮件地址的方式，试图阻止网络爬虫。
它让每个人都更难使用，而且现在不太可能提供任何保护，所以如果必须的话，请使用一个普通的电子邮件地址(如果垃圾邮件困扰你，最好使用一个联系表格，尽管我可以写一整本书来说明如何很难阻止垃圾邮件。(
长答案
第一种写作形式有什么优点吗？或者这只是一些古老的传统
第一个版本最初纯粹是为了阻止网络爬虫收集电子邮件地址。
然而，现在大多数网络抓取器都非常聪明，并且会知道寻找这种格式，所以我认为好处微乎其微。
使用它，你可能会减少10%的垃圾邮件，但这纯粹是猜测。
考虑到网站的可访问性(即屏幕阅读器等(，哪一个更好
让我们看看它们是如何读出的：
邮件〔at〕example〔dot〕com
这将被理解为"；邮件左括号在右括号示例左括号点右括号com"；。
你可以想象，这并不理想！
还要记住，一个美国语音合成器可能会说"；周期"；而不是"；点"；所以你在那里让它变得不那么容易访问，因为这不是一种熟悉的说法(次要但重要(
同样，如果你试图将网站国际化，那就要困难得多，因为你必须将[at]和[dot]更改为这些项目的特定语言名称。
最后，患有认知障碍的人可能不会将example[dot]com的邮件与电子邮件地址联系起来，并对如何联系公司感到困惑。
mail@example.com
这将被读取为类似于普通电子邮件地址"；在示例dot.com上发送邮件"；。我上面提到的所有问题都消失了。
最佳选择
显然，最好的选择是没有电子邮件地址，并使用联系人表格，但这是从垃圾邮件保护的角度来看的。
如果你不介意额外的垃圾邮件列表，那么使用第二个选项。您还应该将其作为打开用户邮件客户端的链接，例如<a href="mailto:mail@example.com">mail@example.com</a>
当使用mailto链接时，你无法保护自己免受垃圾邮件的侵害，因为网络爬虫只是在寻找电子邮件模式，几乎肯定会寻找mailto:作为电子邮件地址的指标，因此我们不妨显示正确的电子邮件地址。
将其作为链接还有一个额外的好处，即当屏幕阅读器用户通过链接导航页面时，他们会找到电子邮件地址(屏幕阅读器用户在页面中定位自己的方式之一是遍历所有链接(。
显示为实际的电子邮件地址也意味着，如果出于某种原因你没有将其作为链接，或者该链接没有打开他们的电子邮件客户端(例如，他们可能没有(，每个人都可以将电子邮件地址复制并粘贴到他们的电子邮件客户机。
我可以想象，让手机上的人尝试复制包含[at]的链接并正确格式化会导致错误、沮丧等，从而降低转换率。
但我真的很想在example[dot]com上展示邮件，我不在乎给人们带来麻烦
然后你可以让电子邮件地址看起来像这样，但在屏幕阅读器中可以正确阅读。
我们可以使用视觉隐藏的文本或使用aria-label来实现这一点。我在下面以两者为例。
.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>从可访问性的角度来看，两者相似。试着自己使用Voice Over或其他屏幕阅读器，两者的阅读效果相同。
我想这个想法是把写电子邮件地址作为第一种形式，让垃圾邮件发送者更难从网页上获取电子邮件地址。