JSFiddle - React, Tailwind, and code Playground

by jasonday

HTML

<h2>
Honeypot methods - Verify all with IS
</h2>
<div>
Testing methods for accessibility requirements
</div>
<br/>
<label><input type="checkbox" checked id="toggle"> Hide fields</label>
<h4>
Honeypot method #1
</h4>
<i>Hidden field is under email signup</i>
<ul>
  <li>Avoid use of "honeypot", "hidden", "ignore" etc. in field id, classes, labels. </li>
  <li>Label should match typical generic field name. Aria-label is added to ensure user doesn't accidently access. </li>
  <li>Placeholder is added in case a sighted user somehow accidently sees the field. </li>
  <li>Autofill is turned off to ensure users don't auto populate the field</li>
  <li>Other options include:
    <ul>
      <li>auto generating random field ids (and label for="fieldID")</li>
      <li>randomizing location (above or below email entry)</li>
      <li>randomizing number of honeypots (1-3)</li>
    </ul>
  </li>
  <li><b>Verify all with IS</b></li>
</ul>


<div class="importantInfo">
  <label for="field-42" >Email</label>
  <input type="text" aria-label="if you are human, do not enter this field"  autocomplete="off" placeholder="if you are human, do not enter this field" name="field-42" id="field-42" />
</div>
<div>
<h4>
Code for field that you can't see:
</h4>
<code>
  &lt;div class=&quot;importantInfo&quot;&gt;<br/>
  &lt;label for=&quot;field-42&quot; &gt;Email&lt;/label&gt;<br/>
  &lt;input type=&quot;text&quot;aria-label=&quot;if you are human, do not fill in this field&quot; <br/> autocomplete=&quot;off&quot; placeholder=&quot;if you are human, do not fill in this field&quot; name=&quot;field-42&quot; id=&quot;field-42&quot; /&gt;<br/>
&lt;/div&gt;<br/>
</code>
</div>

<div>
<h4>
Honeypot method #2
</h4>
<ul>
<li>Checkbox method</li>
<li>Checkbox text is not a label, but a span - is not programmatically associate with the field</li>
<li>Checkbox has the attribute tabindex="-1" to prevent screenreaders from being able to focus on the field</li>
</ul>
<div class="importantInfo">  
  <input...

CSS

.field-wrap {
  margin-top: 35px;
  margin-bottom: 35px;
}
.importantInfo {
  display: none;
  border: 2px solid red;
  padding: 20px;
}

JavaScript

$('#toggle').on("change", function(){
  if( $(this).is(':checked')) {
    $('.importantInfo').hide();
  } else {
    $('.importantInfo').show();
  }
});