Every website we craft at work has some email substitution logic so that addresses you see on the site don't actually exist in the HTML source like that (you wouldn't find them in a format like "foo@example.com").

Instead the @ and the period right before the TLD get replaced with something else (to prevent (dumb) spam bots from using that address and blast it with junk).

Some people replaced them with images in the past (ew), replaced the @ with "(at)" or other stuff.

I made it a habit to render the @ and . by replacing them with span tags which then get a ::before in CSS that contains "content: '@';", so that the @ is visible but is not actually inside the HTML source code.

The classes for these spans then have a random name (persistent for that website though). The first one was called "move-along-nothing-to-see-here", but then I started naming them after Star Wars quotes.

One website's @ class is called "that-s-no-moon" (Obi Wan), others are called "i-have-a-bad-feeling-about-this" (Han Solo), "powerful-you-have-become-the-dark-side-I-sense-in-you." (Yoda) and "these-are-not-the-droids-you-are-looking-for" (Obi Wan).

  • 4
    People who are forced to use screenreaders will hate you for that kind of creativity. If used for important websites like supermarkets and so on, they may also sue you for not caring about WCAG 2.0 (did actually happen).

    The rest of the people will just curse you that they can't click a mailto-link and that they can't even copy/paste the mail address because the before/after stuff doesn't go into copy/paste. No, they have to manually type in the address.

    In case of commercial websites, that is an extra barrier for your customers' customers to contact your customers. There are countries (e.g. Germany) where that kind of extra obstacles is likely to fall under unfair competition law, which invites expensive cease and desist letters from the competitors of your customers.

    In a nutshell: don't do that shit.
  • 0
    I would create some kind of svg of the email then put a link onto it that request to the server the email adress...
  • 1
    @Fast-Nop can you relate this some more, please? I did just exactly the same for a client in Germany and I am not aware of the law nor the exact spelling/definition of it. Thanks!
  • 0
    I put the pre and post @ part into a dataset reversed, strap a "this stuff requires js" onto it and then reassemble it into a working link with the right text on page load.

    Never had a spam problem and no ine ever complained.
  • 0
    @Fast-Nop they don't pay for barrier free websites tho and I'm not involved in sales and marketing.

    If they ever care about barrier free additions, which I would also appreciate, then there'sd be a better solution (aria labels and stuff) but that's what I end up with if speed is more important than quality (which has been the case for a while at work now and I hate it).

    As far as I know none of our clients have barrier free websites, mainly because none of them ever ask or care about it.

    Anyways I just wanted to point out the naming, don't blame me for bad marketing
  • 0
    @Meta soory, that's bullshit. You are investing time and go out of your way to make the website unusable for impaired users. Just using a mailto-link is both quicker and more usable.
  • 1
    @moagggi It's "Telemediengesetz" (TMG) plus "Gesetz gegen den unlauteren Wettbewerb" (UWG). Obviously, you won't find specific CSS tricks in the law, this is not how legislation works. The law is the guideline, but the interpretation in specific incidents is up to the courts. If you want to know what a law in practice means, it's not sufficient to read the law, but you have to follow up court rulings.

    And they have been pretty clear for the last few years. Any attempt at obscuring the imprint or putting extra obstacles to keep customers from contacting the owner can give rise to issues.

    Usually, what you can get is an "Abmahnung" (kind of cease and desist) because keeping customers from contacting you as per TMG means less support cost, which is an unfair advantage as per UWG. Or the Verbraucherschutzverein (consumer lobby) could also kick in for an Abmahnung.
  • 1
    @moagggi if you contradict the Abmahnung, but in order to do that right, you will already need a lawyer. Here comes the next kicker - fending off unwarranted legal action is regarded as normal living risk in Germany, so you can't make the other side pay your lawyer.

    Next, the other side can proceed to court, and if you have read Golem, Heise etc. for a few years, wou will notice that fudging around with the imprint is not likely to win.
  • 0
    @moagggi here a link (German only) where the OLD Munich decided that it isn't sufficient to just list a mandatory link - is has to be clickable.


    With such decisions in mind, implementing the email address so that it is neither clickable nor fit for copy/past is pretty much a no-go, at least if the address in question is a mandatory one like the contact in the imprint.
  • 0
    @Meta and a general note, accessibility is not primarily about "additions". It's 90% about semantic HTML, which means to use the correct HTML elements for a given purpose instead of styling the wrong stuff into other unrelated stuff just because the visual appearance is similar.

    In other words, it's just what can be expected from any professional webdesigner, understanding HTML elements.
  • 0
    @Fast-Nop I don't mean to sound offensive, but if you just keep looking at people like that, taking your "knowledge" about them from little rants that aren't even about that, then you should stop judging people.

    In my case at my workplace it's simple as that: the client gets what they order, if they don't order *explicit accessibility features* like ARIA labels, then they don't get that. That doesn't mean that no one of us cares about semantic HTML or crafting a proper product, we do in fact care about the quality. Just, things that aren't mandatory for the site to work as the client wants it to, doesn't just get added because that'd cost them again and they didn't order that.
  • 0
    @Meta I did write "accessibility is not primarily about additions", right? Of course the customers don't get the last 10% with the ARIA stuff if they don't pay for it. But the hack with before/after makes it deliberately unusable, has nothing to do with semantic HTML and is a hassle even for normal people (I did write this, right?), especially on mobile. That's just fact.

    If you want something judgemental, just wait for the day where I encounter that in the wild while trying to send an email. It will be a good rant, I promise. :-)
Add Comment