Working around <legend> as a direct child of <fieldset> - html

Question

TLDR: see last example, it doesn't validate. Halp.
I'm using Bootstrap 3 to layout a form, in 2 columns like this:
<div class="form-group row">
<div class="col-sm-3">
<label for="c_title">Survey title</label>
</div>
<div class="col-sm-9">
<input name="c_title" id="c_title" >
</div>
</div>
So far so good. This looks right, and also validates.
Then, later in the form I have row which is a collection of options...
<div class="form-group row">
<div class="col-sm-3">Survey options</div>
<div class="col-sm-6">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</div>
I think I really should use <fieldset> and <legend> there, to be nice...
<fieldset class="form-group row">
<legend class="col-sm-3">Survey options</legend>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</fieldset>
With a bit of CSS to make it look sensible this also looks right and validates.
However I also want to drop an extra element or two into the left hand column. These might be a little popup text bubble, or some extra text noting constraints (e.g. "(max 200 chars)").
I don't think those bits belong inside the <legend> as such, and my understanding is that the whole <legend> gets read out for each form-control within the fieldset .. so that would be quite tedious to a11y users. (BTW, I'll probably link the legend to the span text via aria-describedby).
So I code it like this:
<fieldset class="form-group row">
<div class="col-sm-3">
<legend>Survey options</legend>
<span class="muted">(see HR manual page 321)</span>
<button type="button" id="beta2"></button>
</div>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</fieldset>
This still looks right in the browser, however it does not validate. Apparently, the <legend> must be the first and immediate child of <fieldset>.
Any suggestions on how I might handle this? Is the html5 spec overly fussy on this point?

Answer 1

This might just work...
<fieldset class="form-group row">
<legend class="sr-only">Survey options</legend>
<div class="col-sm-3">
<div aria-hidden="true" role="presentation" class="fake-legend">
Survey options
</div>
<span class="muted">(see HR manual page 321)</span>
<button type="button" id="beta2">?</button>
</div>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1">option #1</label>
<label><input type="checkbox" name="opt2">option #2</label>
<label><input type="checkbox" name="opt3">option #3</label>
</div>
</fieldset>
Here, the <legend> is now the first immediate child element of the fieldset (so it validates), but is then prevented from being visible on screen with Bootstrap's class="sr-only" (so is still available as an actual <legend> semantic element for screen readers).
Then, the text of the legend is repeated within the first column div, formatted to appear as if it were a legend (.fake-legend), and then removed for screen readers via aria-hidden="true" role="presentation".
aria-hidden is defined as
aria-hidden: Indicates that the element and all of its descendants are not visible or perceivable (i.e.presentable to users in ways they can sense) to any user as implemented by the author. (See related aria-disabled).
Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.
role="presentation" is defined as
presentation (role): An element whose implicit native role semantics will not be mapped to the accessibility API.
The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA.