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