Alter CSS so that screen readers ignore honeypots

[jameshibbard]

Honeypot form fields currently look like this:

<div style="position: absolute; left: -2000px;"><input type="text" name="name"  value="" /></div>

Fields positioned off-screen in this way will still be voiced by screen readers and could possibly cause users who are reliant on these technologies, to enter something into them.

Changing the CSS thus will avoid this problem:

<div style="display:none"><input type="text" name="name"  value="" /></div>

Ref: http://webaim.org/techniques/css/invisiblecontent/

[guilhermesimoes]

The thing is, display: none is too obvious and spammers can make a quick test for that property. You could use an aria attribute to hide the content from screen readers, like this:

<div style="position: absolute; left: -2000px;" aria-hidden="true">...</div>

But I guess this is also trivial for spammers to check. I'm not sure if there's a good solution for this.

[erik-megarad]

AFAIK there's no way to make this function properly for screen readers while also making it botproof. It's a choice you're going to have to make when you decide whether to implement this. I would be open to a PR that makes this a configurable option, however.

[jameshibbard]

It only took me a year, but I just sent you a PR.