Remove aria-hidden=true and maybe just add hidden (HTML5)

[Zodiac1978]

After some reading about accessibility I would like to recommend removing aria-hidden=true, because it is meant for elements with multiple states (like collapsing items).

antispam-bee/antispam_bee.php

Line 1210 in 9c97b84

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

If we want to hide forever it seems that display: none; is sufficient. Maybe we could add hidden as this has good support in modern browsers:
https://caniuse.com/#search=hidden

But it seems that this is necessary to hide content from screen readers:
https://web.wsu.edu/accessibility-guides/hidden-content/
https://developer.paciellogroup.com/blog/2016/01/the-state-of-hidden-content-support-in-2016/

Can you confirm @00travelgirl00 ?

[websupporter]

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.

[Zodiac1978]

rendering this mechanism basically useless.

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

[00travelgirl00]

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.

[Zodiac1978]

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 ?

[00travelgirl00]

@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/

[Zodiac1978]

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

[websupporter]

Moved this to future release :)

[rianrietveld]

@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.

[Zodiac1978]

@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