JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Hidden Accessible Fieldsets</h1>
<h2>Normal Behavior:</h2>
<fieldset id="fsTests1">
<legend>Test Types</legend>
<div>
<input type="checkbox" value="1" id="chkAct" />
<label for="chkAct">ACT</label>
</div>
<div>
<input type="checkbox" value="1" id="chkSat" />
<label for="chkSat">SAT</label>
</div>
</fieldset>
<br />
<h2>Hide Fieldset & Label Indent:</h2>
<fieldset id="fsTests2">
<legend style="display:none">Test Types1</legend>
<div>
<input type="checkbox" value="1" id="chkAct2" />
<label for="chkAct2">ACT</label>
</div>
<div>
<input type="checkbox" value="1" id="chkSat2" />
<label for="chkSat2">SAT</label>
</div>
</fieldset>
<br />
<h2>Hide Fieldset & Label:</h2>
<fieldset id="fsTests3">
<legend>Test Types</legend>
<div>
<input type="checkbox" value="1" id="chkAct3" />
<label for="chkAct3">ACT</label>
</div>
<div>
<input type="checkbox" value="1" id="chkSat3" />
<label for="chkSat3">SAT</label>
</div>
</fieldset>
CSS
#fsTests2 legend {.
display:none;
border: 0;
padding: 0;
white-space: normal;
}
#fsTests2 {
border:0;
padding:0;
margin-left:0px;
}
#fsTests3 legend {
position:absolute;
left: -5000px;
}
#fsTests3 {
border:0;
padding:0;
margin-left:0px;
}
h1{margin:0;padding:0;font-size:20px;}
h2{margin:0;padding:0;font-size:16px;}