Do browsers with accessibility support CSS or JavaScript?

Question

I'm currently working on a honeypot solution to prevent spam in my site that consists in adding a few fields with random names and hiding them with CSS by adding style="display : none;" in the HTML element. When submitted, if any of these fields is not empty -as it should- it means that a spambot just submitted the form. That or a malicious user. Either way, the post is rejected.

Now, this would work perfectly but I'm assuming that all users have browsers that support CSS.

Deleting via JavaScript every field that has the CSS display attribute equal to none could prevent browsers with no CSS support from displaying the supposedly hidden fields.

So, this would work fine for browsers that support:

• both CSS and JavaScript
• only CSS
• only JavaScript

My question is, then, do browsers for the blind or any other accessibility-targeted browser support CSS and JavaScript, only CSS, only JavaScript or none?

Answer 1

do browsers for the blind or any other accessibility-targeted browser

There are no browsers these days that are geared toward people with disabilities. There used to be a few projects that were, but the major assistive technology (AT) manufacturers got their act together and got their software working first with IE, then onto Firefox. You are taking a chance using Chrome or Opera with AT, the support is hit or miss.

support CSS and JavaScript, only CSS, only JavaScript or none?

It really comes down to what JS, CSS, and AT combination is being used. In general AT is fine with CSS. There is four areas that can cause issues: color/contrast, display:table, display: none and visibility:hidden. Since the first two aren't part of the question, we'll skip them. JAWS only announces content that has display:none or visibility:hidden on a <span>. I will leave out commenting too much about JS, but WebAIM has an article providing an overview of JS and accessibility.

consists in adding a few fields with random names and hiding them with CSS by adding style="display : none;" in the HTML element.

I am assuming you are correctly adding <label>s to all your form elements. Please add them to the honey pot fields just in case they are read. I'd add "ignore this field" to the <label> as well.

Reading:

Screen Readers and display: none

JAWS, Window-Eyes and display:none: Return to 2007

Answer 2

Modern screenreaders usually work by "hooking" a text-to-speech interface onto a normal web browser (e.g, Internet Explorer). As such, they support all the CSS and Javascript that the browser would ordinarily support. display:none is perfectly kosher.

As far as other browsers go: Basic CSS rules like display: none have been supported by every major web browser since Netscape 4.something. If someone's using a browser which does not support CSS at all, they will have much bigger problems to deal with than your registration form.

Answer 3

Well I use Lynx when I'm feeling disappointed with the world sometimes, and it doesn't support CSS. What I do in cases like this is write a default value into the hidden field like: Please DON'T fill anything into this field

That takes care of any person that can't see but stupid bots still overwrite it. Then I check in my code if the value is any different than exactly Please DON'T fill anything into this field and profit!

BTW This hidden field method won't stop a determined attacker anyways, so it's a moot point to discuss what happens if an attacker checks out the source of the page. We just want the mass bots to be stopped - and bots that can recognize text like this (each dev uses their own words to communicate the message) are far off from falling into the hands of script kiddies, even if they do exist. Well the last part is a guess.

Answer 4

If you are doing it because of malicious users is it useless way - my opinion. I am not those bad guy, but it cost one click to me to disable CSS style. Easy plugin in modern browser. Good for web development and maybe for other things. Its like re-inventing of wheel to work with random hidden input names in fixed form. Catch 1 working combination (reading source code F4) and you can use it as many times as you want.

Why not simply extra name visible input and store its name in session and compare it after submit?

Or put there one <input type="hidden" with extra code (hash or anything else) what can be recognized just by your app.

Answer 5

Adding to others' answers, I'll say that assistive software like JAWS support even dynamical changes of the display property (say, showing/hiding a div by pressing a button).