It used to be display:none. Turns out, a lot of spam bots started to ignore fields with display:none, rendering this mechanism basically useless.

rendering this mechanism basically useless.

What? Wasn't the honeypot one of our best performing mechanisms?!

I hava tested the comments with Voice Over.
I did not had any problems in Safari, which is the recommendet Browser for Voice Over.
In Chrome I have the Problem, that I "see" both text fields (comment field and honeypot field). But only the Content from the honeypot field (2nd comment field) get submitted.
In Firefox I can't even fill out the comment fields, but Firefox has general issues with Voice Over and is not recommendet to use with Voice Over.

I have testest the HTML5 "hidden" Attribut in Chrome and it worked better. So I will test that for like a week or two on our site and see, if spam bots get trough that. If not, "hidden" would be a good option.

In general is the recommendation is, to use HTML5 and not Aria if possible.

What is the recommendation here? As VoiceOver should be used with Safari and Chrome/FF has more issues with it, I'm hesitating to change here anything.

What do you think @00travelgirl00 @2ndkauboy @websupporter ?

@Zodiac1978 Voice Over should be used with Safari or Firefox. Chrome has many issues with Voice Over. Also the Stats shows, that only 1.4% of Voice Over users uses Chrome in Mac.

Its different for other Screen Readers like Jaws.

https://www.digitala11y.com/screen-readers-browsers-which-is-the-best-combination-for-accessibility-testing/

Okay, but "What is the recommendation here?" How do we proceed? Should we merge the change or not?

Moved this to future release :)

@Zodiac1978
The solution is to add aria-label="whatever" as attribute to the textarea.

The automated tool checks if a form control has an accessible name. In this case, even if the form control is hidden from sight and screen reader, it must have an accessible name to pass the WAVE test.
This can be easily solved by adding an aria-label like aria-label="comment"

<textarea aria-label="comment" id="two" aria-hidden="true" name="comment" autocomplete="new-password" style="padding:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;position:absolute !important;white-space:nowrap !important;height:1px !important;width:1px !important;overflow:hidden !important;" tabindex="-1"></textarea>

The aria-label can be anything, because it is never announced or visible.
And then it passes WAVE :-)

I made a codepen with both options, with and without adding aria-label. The the first one fails, the second one passes in WAVE.

@rianrietveld This issue is about switching from aria-hidden=true to just hidden (HTML5)

Please see: 3e90f5f

Maybe you can help for this question here too. :)

For the new issue reported in the forums I created a new issue: #434

@Zodiac1978 about using theHTML5 attribute hidden:
It depends on which browser you support. IE doesn't support hidden

But hiding with display: none; is perfectly well supported.
I'm no expert in what spam bots detect or not.

But whatever you choose, keep the HTML valid, so add an accessible name to the textarea (using a label or an aria-label).

@rianrietveld Unfortunately display: none; gets recognized and ignored by some spammers, so our spam protection fails more often. Therefore we switched to aria-hidden=true although it is meant for elements with multiple states (like collapsing items).

But as @00travelgirl00 pointed out:

In general is the recommendation is, to use HTML5 and not Aria if possible.

So we would switch to hidden. Not sure if IE needs to be supported. We need to discuss it in the team.

As a first step we will add the label. Thanks for helping out!

Support in IE can be simulated with CSS:

[hidden] {display: none}