WordPress.org

Support

Support » Miscellaneous » How to shroud an email address to prevent spam

How to shroud an email address to prevent spam

  • I would like to add a few email addresses around the site which are clickable (so I would like to avoid the Mary[at]yahoo[dot]com format] and am wondering about the easiest way to do this.

    I have read that there is a way to use JavaScript to shroud the address so that it is clickable AND protected from spam, but I don’t understand how to do this. Can anyone provide super simple instructions, or another easy way to do this? I am very new to this stuff, thanks!

    The blog I need help with is buffalopeacehouse.us.

Viewing 15 replies - 16 through 30 (of 34 total)
  • esmi

    @esmi

    Forum Moderator

    We were able to identify few screen reader visitors (few among millions) but no braille or of other type.

    ah – but does that mean that your site was not accessible to them? You cannot rely on stats for this.

    The core part of the site content is visual

    And? Are you suggesting that people with a visual impairment should not be allowed the same ease of access as everyone else? Were you aware that perhaps only 5% of registered blind people actually have no sight? And that they will all have family members and friends who do not have any sight issues? Surely it is up to the individual surfer as to what sites they want to visit – not you?

    esmi

    @esmi

    Forum Moderator

    checked some top local websites for proper use of alt attributes. No one is using them properly

    So what? That does not make them right. And do ensure that you are differentiating between alt texts for decorative images and alts for informational images.

    ah – but does that mean that your site was not accessible to them? You cannot rely on stats for this.

    For a large news site we did a deep research, surveys, analytics and polls. It appears in my country blind people almost don’t use internet directly, they ask for help of their friends or family if they need something. In US and other top countries it’s ok for disabled people to have a normal life. Unfortunately, in my country it’s not the same. We have not solved yet problems with elevators for disabled people at shopping malls and street crossings and you are talking about internet.

    And? Are you suggesting that people with a visual impairment should not be allowed the same ease of access as everyone else?

    Okay, I can make it accessible, but for what reason? A photographer’s portfolio is showcasing photographs. Blind people can read what is the photo about and what is pictured on it but they can’t see it anyway. I can do this extra work as a developer, but a client is not going to pay for that. He thinks blind person will not become a client. You can argue about the accessibility, the rights of disabled people etc but you can’t blame a client of thinking about HIS business. A website is a converting platform and he will pay for anything that will make him new clients. But he is not going to pay for the features for blind people. And in this case the client IS right. So, when I give him a detailed cost estimate, he will review it and remove any parts of the work which are not needed for him.

    So what? That does not make them right. And do ensure that you are differentiating between alt texts for decorative images and alts for informational images.

    Of course, just gave you an example of a current state. And yes, I do differentiate alts and titles, alts for important stuff and decorations.

    esmi

    @esmi

    Forum Moderator

    I can make it accessible, but for what reason?

    To avoid discrimination for a start. And also because you have no idea what level of sight a specific user has or what they want to see. Making assumptions is dangerous.

    He thinks blind person will not become a client.

    Then I’m sorry but your hypothetical client is a fool. In the UK, it’s been estimated that disabled people have disposable income of over 80 billion euros. Are there clients out there who do not want a slice of that market?

    Next, take the case of one of the world’s largest grocery and internet companies. Many years ago, they decided to set up an “accessible site” for their disabled users (an approach that is now largely not recommended). It paid for itself within a year. After two years, it was out-performing the company’s main online shopping site because non-disabled people found it easier to use. At the point the “accessible site” was scrapped in favour of accessifying all of their main sites when they realised that there was a really strong commercial case for accessibility. They now act as advisors to central government.

    Or then there’s the case of the big insurance company that decided to accessify its sites because it was worried about being sued under discrimination laws. after about 18 months,. they reported the following:

    • A 30% increase in natural search-engine traffic
    • A significant improvement in Google rankings for all target keywords
    • 75% reduction in time for pages to load
    • Cross browser-compatibility increased (not a single complaint since the redesign)
    • Site now accessible to mobile devices
    • Time to manage content reduced from average of five days to 0.5 days per job
    • 95% increase in visitors getting a life insurance quote
    • 90% increase in Life insurance sales online
    • Savings of £200K annually on site maintenance
    • 100% return on investment in less than 12 months.

    They too are now public advocates of accessible web design.

    he is not going to pay for the features for blind people

    Who said he had to? Accessible design is not a premium add-on. It should always be part of all design projects. It’s part of WordPress core.

    To avoid discrimination for a start

    Good point. I’m doing the most part of the job to make sites accessible as much as I can. But not always 100% usable and comfortable for ALL kinds of disabled people. Need to learn these in details.

    Then I’m sorry but your hypothetical client is a fool.

    1. They are not hypothetical, that’s real situation with real clients. I hear it from 9 clients out of 10. Even when I start talking about features for disabled people they look at me like I’m an idiot.
    2. They pay for the development, they can insist or choose another company to work with. I prefer to have them stay – it’s business.

    In the UK

    This is the main point. You live in UK and it’s NORMAL for you. But hey, there’s the rest of the world. I live in Ukraine. It’s a poor country. We have no sound warnings for the green lights on the road crossings, no braille on product price tags or packages etc. Disabled people in our country ARE POOR. The government does not care about them. Often even families don’t care much, unfortunately. This is sad. But this is reality in many countries, including all ex-USSR (and Russia to, believe me).

    Are there clients out there who do not want a slice of that market?

    These market in Ukraine is much, much, much smaller. I would rather say it’s a micro-market. By the way, despite Ukraine is a large country and plastic cards are VERY common and popular (everyone have them) all over the country people still don’t pay by card on the internet. Even on largest online stores the main (over 95% of orders) payment method is ‘Cash on delivery’. This is just an example. Always remember that there is a lot of other countries outside UK and US and in many of them everything is COMPLETELY different. I saw many foreign companies coming to ukrainian or russian market and failing just because they were trying to work the way they work in their country. Always consider mentality and specifics of the country/people you are going to work with.

    Who said he had to? Accessible design is not a premium add-on. It should always be part of all design projects. It’s part of WordPress core.

    You need to spend some extra time to double-check everything and even test (the perfect scenario). This takes time. Time means money. When the client says “let’s see if we can cut off some costs” you start optimizing every step of yours. No responsiveness, no optimization for slower connections over mobile etc.

    Isn’t dropping support for IE6-7 a discrimination? From my point of view, making a website 100% accessible is the same as making it work in IE6-8. If it’s broken and visitors can’t use it properly – it’s bad. If it’s working and users can use the most important features, even if they don’t get all the pretty stuff and extra functionality – it’s ok. Making everything 100% accessible and functional in all possible scenarios for every possible user is utopia.

    It’s part of WordPress core.

    Oh.. 🙂 WordPress core lacks some really important features. The most important part of these features is setting up and managing multilingual websites. Especially when you use one language with latin subset and another one with cyrillic. More that 36% of WordPress downloads are in other languages than english. Millions of websites are build on WordPress in 2 and more languages. And core support for this is really poor. WordPress team says it’s a plugin area. With more that 1/3 of downloads? Come on. All the plugins over there have lots of weak points and limitations, they have different architecture and switching between them is impossible or very hard. And relying on a single plugin is stupid – if it stops updating or updates are late you can’t use your site or forced to stay with an outdated version of WordPress. Developing and managing multilingual websites with WordPress is a nightmare. Believe me, it’s my day-to-day job and I know it.

    esmi

    @esmi

    Forum Moderator

    You need to spend some extra time to double-check everything and even test (the perfect scenario).

    Only initially and whilst you are learning. Didn’t you have to do the same kind of thing when you were learning web design generally? It can – and does – become second nature pretty quickly. And there are tons of support resources out there in the meantime.

    Isn’t dropping support for IE6-7 a discrimination?

    No because that doesn’t impact a specific group that can defined using other criteria. Web accessibility is specifically about making sites usable for disabled people. if a disabled person chooses to use IE7 and your site does not support IE7, then that’s a different thing entirely.

    These market in Ukraine is much, much, much smaller.

    I do appreciate that but it will grow. The growth in other areas of Europe and the US has been quite amazing over the past 10 years. This is your chance to get in on the ground floor. 🙂

    making a website 100% accessible is the same as making it work in IE6-8.

    You can never make a site 100% accessible as its level of accessibility is defined by whoever is using it. All you can do is make the site as accessible as possible by doing things the Right Way (ie according to the WCAG guidelines etc). If user X doesn’t know how to use their assistive technology (AT) correctly, that’s not your problem. Ditto if someone is using an very old or obscure user agent (such as IE6). These are not accessibility issues, But if you deliberately obfuscate your contact email address in such a way that it cannot be rendered by some AT, then that is an accessibility issue because you have created this barrier when there are barrier-free alternatives.

    Making everything 100% accessible and functional in all possible scenarios for every possible user is utopia.

    This is not about Utopia. It’s about trying to ensure that you do not create barriers. Many disabled users are perfectly capable of wrangling their own software. They are experts in their field and their range of skills etc can be mind-blowing. Nor are they asking for special treatment. All that they do ask is that you do not make their lives more difficult if this can be avoided.

    Accessible design really isn’t as scary as it might look initially. And the potential benefits for everyone are very significant.

    esmi

    @esmi

    Forum Moderator

    The most important part of these features is setting up and managing multilingual websites.

    Sorry but that’s not an accessibility issue as it does not impact disabled people specifically

    It’s about trying to ensure that you do not create barriers

    All that they do ask is that you do not make their lives more difficult if this can be avoided.

    Got it. Completely agree.

    A question. Ok, I have obfuscated email and some user agents can’t understand the email address characters. Looks like a problem. But the tag has alt attribute saying ‘Press this link to send me an email”. I suppose this user agent can perform this basic action (following a mailto: link and sending email using a webmail or any mail client). Using contact form is actually the same – a visitor can send an email but he can’t see the actual email address. So, every user, including disabled CAN use this feature. Looks like we don’t have any problem here. Am I missing something?

    Sorry but that’s not an accessibility issue as it does not impact disabled people specifically

    It impacts millions of people, including disabled. It’s off-topic and completely different discussion but had to mention it when talking about critical WordPress core features.

    esmi

    @esmi

    Forum Moderator

    it impacts millions of people, including disabled.

    But not disabled people specifically – hence not a web accessibility issue.

    Definition of web accessibility
    W3C’s definition

    esmi

    @esmi

    Forum Moderator

    Am I missing something?

    Not 100% sure. To be honest I’d need to see this in action and have the opportunity to ask a couple of other people with experience in this area to also have a look at it.

    If you’re interested, I could ask for feedback on such a solution via http://make.wordpress.org/accessibility/

    https://creativemarket.com/badelt/7896-Righter-A-Simple-WordPress-Theme/live-preview

    Here’s a demo of a Righter WordPress theme. I’m creating a Pro version of the theme with extra functionality and fixing some general issues for this version. Accessibility is on the list.

    Check the ‘Contact me’ button, bottom left. In the original theme it’s not obfuscated, has no alt and title attributes etc.

    Original code (from the link above):
    <a target="blank" href="mailto:someone@gmail.com?subject=Hello" class="email">Contact me</a>

    My edited version:
    <a href="mailto:someon%65@gmail%2E%63om?subject=Hello" target="_blank" alt="Click here to send me an email" class="email">Contact me</a>

    It has alt attribute, it’s a text link accessible by it’s nature, the design (it looks like a button) is pure CSS. It functions well – opens a mail client’s (or webmail’s) ‘Compose new message’ screen and puts there recipient’s email address and message subject. As I understand it’s 100% accessible and operable. The email address itself isn’t readable and it shouldn’t actually. It’s still accessible. Am I right?

    By the way, checked WCAG 2.0. Seems like I’m following these guidelines intuitively, I learned this in the process, not by reading the guidelines. Most of this is just a common sense and good practices.

    esmi

    @esmi

    Forum Moderator

    <a href="mailto:someon%65@gmail%2E%63om?subject=Hello" target="_blank" alt="Click here to send me an email" class="email">Contact me</a>

    Eek! target="_blank"? Please, please, don’t spawn new windows without warning users on the page in clear text. It leaves some users (e.g switch users) stranded on the spawned window because it breaks the functionality of the browser back button. And why bother for a mailto link? At the most, it will just launch their email client.

    It has alt attribute, it’s a text link accessible by it’s nature

    Actually we (as in the make WordPress accessible group) have just had an online meeting and I brought this scenario up with a request for comments. The overwhelming consensus was that (as I suspected) it’s not accessible. To be truly accessible, the alt must replicate the text rendered in the graphic – which totally nullifies the point of the exercise in the first place.

    Sorry. 🙁

    Most of this is just a common sense and good practices.

    Absolutely – which is why I don’t see it as a premium add-on service. Incidentally, have you tried putting your theme through the theme accessibility audit yourself?

    Eek! target=”_blank”?

    Yeah, this is something I’m trying to figure out for a long time. First of all, a button saying ‘Send me an email’ is logically a “new window action” as it will open a mail client. For external apps _blank will be ignored. For those who set Gmail (or other webmail) to handle mailto: links in the browser without _blank it will be loaded in same tab/window replacing the site, which is not a logical and expected behaviour. With Gmail it looks really bad. Clicking mailto: link opens in current window/tab a blank page with Gmail’s ‘compose’ overlay div and after sending the message this overlay is automatically closed leaving you in front of a blank page. Awkward. But wait, that’s not all! When you hit browser’s back button you see a ‘compose’ overlay again instead of going back to the site. What most users will do in this case? Close the tab/window. This is not a user-friendly behavior. I think that ‘Contact me’ link is not an internal/external LINK to be followed, it’s an external ACTION, which by default will be handled in separate window (external application or webmail in external window) or it can handle an overlay with contact form..

    the alt must replicate the text rendered in the graphic

    It makes no sense for me, really. Looks like just stupid following some strict rule, not thinking about the end user but about getting ‘WCAG Passed’ badge. First of all, the button is not a graphic, it’s a PLAIN TEXT link ‘Contact me’, it is a text and it is accessible. The alt attribute, as I understand, gives alternative readers some extra information – explanation, instruction etc. Replicating ‘Contact me’ text in alt attribute makes no sense because it doesn’t help and it’s actually redundant, because the link text is accessible itself. Alt text here is kinda optional instruction for alternative reader. What am I missing?

    have you tried putting your theme through the theme accessibility audit yourself?

    Not yet, until now I developed themes only for personal projects and clients. Right now working on my first theme to be released in public and will definitely try this out. Thanks!

Viewing 15 replies - 16 through 30 (of 34 total)
  • The topic ‘How to shroud an email address to prevent spam’ is closed to new replies.
Skip to toolbar