HTML: how to indicate questions with radioboxes as

Question

I have a question in HTML form and radioboxes as answers, like this:

<span>What is your favorite fruit?</span>
<input type="radio" name="favFruit" id="banana"><label for="banana">Banana</label>
<input type="radio" name="favFruit" id="orange"><label for="orange">Orange</label>

But I realised, that question is not connected with answers, which is probably bad for SEO, accessibility and and could be bad for future maintenance of application. So I added aria-describedby attribute:

<span id="favFruitQuestion">What is your favorite fruit?</span>
<input type="radio" name="favFruit" id="banana" aria-describedby="favFruitQuestion">
    <label for="banana">Banana</label>
<input type="radio" name="favFruit" id="orange" aria-describedby="favFruitQuestion">
    <label for="orange">Orange</label>

But at Mozilla Developer Network I found article How to structure an HTML form, when advice is to wrap answers in fieldset tag ans put question in legend tag:

<fieldset>
    <legend>What is your favourite fruit?</legend>
    <input type="radio" name="favFruit" id="banana"><label for="banana">Banana</label>
    <input type="radio" name="favFruit" id="orange"><label for="orange">Orange</label>
</fieldset>

But it could not be trustworthy at 100%, because, because there is written:

This article is in need of a technical review.

Is it really a best way to indicate a question with radioboxes as answers? If it's not, what is the best way? Thank you in advance for every answer.

Answer 1

Yes. <legend> / <fieldset> is the correct tool to use.

Avoid overlong legends though. Some screen readers will read out the entire legend before each label.